Question

On my site I’m using the jquery cycle plugin for a slideshow with a pager.
This example:
http://malsup.com/jquery/cycle/pager.html

So in the head of my document, I have a script similar to:

<script type="text/javascript">
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
</script>

My doc type is XHTML Strict.

When I try and validate the page, I get the following errors:
“document type does not allow element “div” here”
and
“end tag for “div” omitted, but OMITTAG NO was specified” because the div tag isn’t closed.

Is there a way to use the jquery and get it to validate?

Answer 1

Actually, the reason your code is not validating is because certain characters are not allowed in XHTML (e.g. “<“, etc.) so they must be wrapped in CDATA sections in XHTML (due to the strict nature of XML parsing rules). HTML comment markers (specfically, the double dashes “--“) are also not allowed and shouldn’t appear in a SCRIPT block since they’re not valid understandable JavaScript. So instead of using HTML comment markers, you should wrap your code inside a “CDATA marked section” to pass the validator and not confuse the JavaScript engines:

<script type="text/javascript">
//<![CDATA[
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
//]]>
</script>

Take a look at the following pages for more information:

1. XHTML 1.0 recommendation: 4.8. Script and Style elements
2. Properly Using CSS and JavaScript in XHTML Documents