OK, so the <script> tag can go in the <head> section of a web page, but the <noscript>tag can not. Go figure!
The problem came up when someone tried to display a jQuery image rotator to cycle through some images. To make sure it degraded nicely when javascript was turned off we chose to just display a static image. The problem was that the plugin used, s3Slider, had a height set on the div it displays in. While not entirely bad while javascript is turned on, it creates a rather larger white box when javascript is turned off.
Simple workaround in this case…
We set a display:none; on the <div id=”s3Slider”> in one of the stylesheets used so that by default the div would NOT be shown thus eliminating our large white area. So for the folks with Javascript turned off we are done.
For the folks with javascript turned on we just use javascript to change the display style. The s3Slider code is initialized using:
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});We changed it using jQuery chaining:
$(document).ready(function() {
$('#s3slider').css({display:"block"}).s3Slider({
timeOut: 7000
});
});
You can ignore the change in the timeOut as that doesn’t affect this. Notice the addition of the css({display:”block”}) which causes the block to display, but only for those users with Javascript.
todd