How to make site compatible with JavaScript disabled

Could someone tell me how to make this site: http://webpages.charter.net/jelsinger/Township-dark-blue/history.html compatible with those who use the Internet with JavaScript disabled? I really want to have the slideshow but is there a way I can have the site look good if someone disables JavaScript?

Thanks.

Step one is going to be absolutely positioning the header images inside a container with a defined height and width. That will be done in your CSS file, and will make it so you will only see one header and they won’t change with JS turned off.

Using Chromes developer tools, I got rid of 3 of the 4 header images and that looks like the only problem. I would suggest using javascript to add those in after the page loads so people without javascript never even download them.

If you remove the last 3 headers from the HTML, then modify your jquery code like this:


$(document).ready(function(){
$('#slideshow').append('<img src="images/summer.jpg" width="898" height="290" alt="" />
<img src="images/autumn.jpg" width="898" height="290" alt="" />
<img src="images/winter.jpg" width="898" height="290" alt="" />');

//Cycle code

})

It should work

I think I did what you suggested but now the slide show doesn’t work. Can you take a look? I put up a different test page: http://webpages.charter.net/jelsinger/Township-dark-blue/index-test.html

Thanks.

Where I commented “//Cycle code”, you need to put the actual image cycling code. It was already in your page.


$(document).ready(function(){
$('#slideshow').append('<img src="images/summer.jpg" width="898" height="290" alt="" />
<img src="images/autumn.jpg" width="898" height="290" alt="" />
<img src="images/winter.jpg" width="898" height="290" alt="" />');

$('#slideshow').cycle({

		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

	});
});

Opps :slight_smile: I’ll change that.

Thanks.