[jQuery] jQuery cycle plugin not validating as xhtml
Hi
I am having a problem validating the cycle code in my xhtml.
This is what I'm using:
<div id="s2" class="slideshow">
<img src="support/img/test/test-picture-1.png" alt="test" />
<img src="support/img/test/test-picture-2.png" alt="test" />
<img src="support/img/test/test-picture-3.png" alt="test" />
<img src="support/img/test/test-picture-4.png" alt="test" />
</div>
<script type="text/javascript">
$('#s2')
.before('<div><div class="slideshowcontrols"><a href="#"
title="Play slideshow">Play slideshow</a>
<div id="sb2"
class="slideshowbuttons"></div><div class="clearer"></div><div
class="slideshowarrow"><img src="support/img/slideshow/bg-slideshow-
arrow.png" alt=">" /></div></div><div class="clearer"></div></
div>')
.cycle({
fx: 'fade',
// pause on mouseover
pause: 1,
// duration of slide
timeout: 5000,
// speed of transition
speed: 500,
// define navigation div
pager: '#sb2'
});
</script>
And this is the part causing the problem according to W3C:
.before('<div><div class="slideshowcontrols"><a href="#"
title="Play slideshow">Play slideshow</a>
<div id="sb2"
class="slideshowbuttons"></div><div class="clearer"></div><div
class="slideshowarrow"><img src="support/img/slideshow/bg-slideshow-
arrow.png" alt=">" /></div></div><div class="clearer"></div></
div>')
This is the error:
Line 119, Column 21: document type does not allow element "div" here
The problem is not with the rest of the document structure as I can
remove this line and it validates.
I have also tried using several different techniques including the one
outlined here:
http://www.malsup.com/jquery/cycle/pager7.html
But the HTML tags inside the JS are simply not validating.
There seems to be no reference to whether cycle should validate or
not, but I had assumed that it should. Does anyone have any experience
of this problem, or any suggestions? I would be very grateful.
Many thanks in advance.