Best way to display alternatives when javascript fails

Question

Im looking for a very general method of providing an alternative site to a heavy Javascript site (link to an old static site).

My current implementation:

//<Some JS/HTML> $(document).ready(function() { //<Some JS Code> $('#error').attr('style','display: none;'); }); //<Some html> <div id="error"> <span>If you can see this, that means something went very very wrong. Click <a href="somelink.php">Here</a> to use the old portal. Please contact [e-mail] with this error and provide as much information as possible, thank you :) </span> </div> 

My current problem is that this is visible when the site loads :( Is there a better way?

I know that I can try and add a lot of attempts and catch (several already), but the problem is that the main clients will use a mixture of clients between them. FF2-FF3, all versions between them and IE5-IE6. IE5 just puts a message and redirect to them if they try to load the site without even trying to make it compatible.

And these old browsers are simply not compatible with certain things .... I know I can add to .onerror, but FF did not add compatibility until FF6 was new to most clients. (although this is strange in IE5.5)

NOTE: Im just jQuery 1.7.1 The main thread of the current operation is when it finishes loading the initial javascript that hides the div.

Answer 1

For this you can use mostly CSS with the JS helper.

Put this JS code as close to the top of the document as possible when you dare, preferably after declaring a charset. You will need to include jQuery before this line, or you can use standard JS ( document.getElementByID('html-tag').className='js'; this assumes that you gave the html tag the identifier html-tag ):

 $('html').addClass('js'); 

You can then write your CSS to take into account the fact that JS may or may not be available:

 #error { display : block;/*if no JavaScript is available then show this element*/ } .js #error { display : none;/*if JavaScript is available then hide this element*/ } 

Here is a demo: http://jsfiddle.net/x4tjL/ (JSFiddle seems to have problems right now, here is JSBin: http://jsbin.com/ahezuc/edit#preview )

Update

Place the JavaScript code as close to the beginning of the document as possible and do not wrap the code in the document.ready event handler to minimize the flash content that is common when trying to hide / show JS-based content.

Answer 2

A simple solution would be to detect all incompatible browsers and show a message to update your browser or redirect to a non js site, for example:

 for IE5 and 6 if ($.browser.msie && $.browser.version <= 6){ //show my message here }