hide javascript and css when javascript is disabled

[helenp]

Hi, dont know where to post this, so lets try here.
I have done a slideshow wich uses css, javascript and mootools.
Works like a charm, however if I turn javascript off I have the small images and url of the large images all over the content of the page, awful.
noscript does not work, If I add a noscript, I get the noscript text, but also all images and url all over the page.
I did found a way adding a css rule inside the noscript tag, however that dont validate, you cant put css there, and I want the site to validate.
So how should I do it? Been trying many ways and none works.
The images are displayed in the html like this:

<div id="dg-image-gallery" class="dg-image-gallery">

<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" alt="Images properties for rent in Marbella." src="nuevas/casa_blanca_4_house_pool-2.jpg">
<span class="dg-image-gallery-caption">The house and heated pool</span>
<span class="dg-image-gallery-large-image-path">nuevas/casa_blanca_4_house_pool.jpg</span>

And the javascript in the html page is like this:
<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2
}
});
</script>

[rocknbil]

This is because you did it backwards. You built the page around the enhancement. What you're supposed to do is build the page without Javascript, then apply Javascript as an enhancement. That way, if Javascript is disabled, it still works. No worries, it's pretty common . . . .

What I'd suggest at this point is find the elements that offend thee (Guessing the spans and paths?) and set their display to none:

.dg-image-gallery-large-image-path { display: none; }

Then use the Javascript to reveal them, if you need to.

<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2
}
});
$('.dg-image-gallery-large-image-path').css('display','block');
</script>

Something along those lines . . .

[helenp]

Thanks but did not work, however one gave me a solution,
this in the header:

 <script type="text/javascript">window.addEvent('domready', function() {
 $$('html').set('class', 'jsOn');
});
</script>

An alternative content instead of <noscript>:
<p class="alternative">no javascript content/p>

this in the .css file:
.dg-image-gallery {
display: none;
}
.jsOn .dg-image-gallery {
display: block;}
.jsOn .alternative {display:none; }

Thanks,
Helen