[SOLVED] <ul> inside <script> tag ?

[DjMikeS]

Hi all,

 

I'm trying to make my website cross browser compatible. This also means that I want it to validate as strict XHTML and I'm nearly there...just one last error...

 

I'm using jquery to get a nice fading header which loops through some images and fades them in and out.

 

<?php
$backgrounds = "";
$arrPhotos = scandir($site_path . "headerbg");
foreach ($arrPhotos as $strPhoto) {
$arrPhoto = explode (".", $strPhoto);
if ($arrPhoto[1] == "jpg") {
	$backgrounds .= "<li><img src=\"http://dev.phison.nl/headerbg/$arrPhoto[0].$arrPhoto[1]\" alt=\"$arrPhoto[0]\" title=\"$arrPhoto[0]\" /></li>";
}
}
echo "<script type=\"text/javascript\">\n
  document.write('<ul id=\"header\" class=\"header\">$backgrounds</ul>');\n
  </script>\n";
?>
noscript><div><img src="http://dev.phison.nl/headerbg/lake.jpg" alt="lake" /></div></noscript>
</div>

 

So, when javascript is enabled, it shows the nice fading header, and when javascript is disabled, it shows just a single image.

 

The validator outputs:

Line 21, Column 49: document type does not allow element "ul" here.

…write('<ul id="header" class="header"><li><img src="http://dev.phison.nl/head

 

I can't put the <ul> outside the javascript tag, because that causes unexpected behavior.

 

Does anyone know how I can keep this structure and make it XHTML Strict valid ?

[dropfaith]

what contains this? does it even have a container..

 

also if you view the scource what does it show..

 

everything looks fine for validation so im wondering what its inside

[haku]

Replae

 

<

 

with

 

<

 

and replace

 

>

 

with

 

>

[DjMikeS]

@Haku: I've tried your solutions, but that breakes the script...And the images display as a list instead of the fading header...

 

@dropfaith:

This is the relevant output to the browser:

<div class="header">
<script type="text/javascript">

  document.write('<ul id="header" class="header"><li><img src="http://dev.phison.nl/headerbg/code.jpg" alt="code" title="code" /></li>_
<li><img src="http://dev.phison.nl/headerbg/lake.jpg" alt="lake" title="lake" /></li>_
<li><img src="http://dev.phison.nl/headerbg/san_switch.jpg" alt="san_switch" title="san_switch" /></li>_
<li><img src="http://dev.phison.nl/headerbg/typewriter.jpg" alt="typewriter" title="typewriter" /></li>_
<li><img src="http://dev.phison.nl/headerbg/wet-flower.jpg" alt="wet-flower" title="wet-flower" /></li>_
<li><img src="http://dev.phison.nl/headerbg/yellow-field.jpg" alt="yellow-field" title="yellow-field" /></li>_
</ul>');

  </script>
<noscript><div><img src="http://dev.phison.nl/headerbg/lake.jpg" alt="lake" /></div></noscript>
</div>

 

For now it's merely a cosmetic problem but I would to solve it...

 

So if anyone has a solution...

[JasonLewis]

Make a div with the display set to none, which contains the list, then use JavaScript to set the divs display to block.

 

<script language="javascript">
document.getElementById("list").style.display='block';
</script>

<div id="list" style="display:none;">
<!-- Put list here -->
</div>

[DjMikeS]

Oh, thnx Project, that works great...still need to clean it up a bit but the idea works!