CODEWITHSUNDEEP
javascriptjqueryhtml
Mattisdada
Mattisdada

Reputation: 914

Best method of displaying an alternative on javascript crash

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

My current implementation is:

//<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 [email protected] with this error and provide as much information as possible, thank you :) </span>
</div>

My current problem is that this is visible while the site is loading :(. Is there a better method?

I know i can try and add lots of trys and catchs (theres already several), but the problem is the primary clients are going to be using a mixture of clients between. FF2-FF3, all version in between, and IE5-IE6. The IE5 im just placing a messagebox and redirection if they try to load the site, im not even going to try and make that compatible.

And these old browsers just are not compatible with certain things.... I know i could add in an .onerror, but FF didn't add compatibility until FF6 which is to new for most of the clients. (although strangely, IE5.5 has it)

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

Upvotes: 4

Views: 132

Answers (2)

Jasper
Jasper

Reputation: 76003

You can use mainly CSS with a JS helper for this.

Put this JS code as close to the top of the document as you dare, preferibly after the charset declaration. You will need to include jQuery before this line or you can use standard JS (document.getElementByID('html-tag').className='js';, this assumes you've given the html tag an id of html-tag):

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

Then you can 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 be having problems right now, here is a JSBin: http://jsbin.com/ahezuc/edit#preview)

Update

Putting the JavaScript code as near the top of the document and not wrapping the code in a document.ready event handler allows you to minimize the "flash" of content that is common when trying to hide/show content based on JS.

Upvotes: 5

Sal
Sal

Reputation: 1655

A simple solution would be to detect all incompatible browsers and show the message to upgrade their browser or to redirect to non js site, something like:

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

Upvotes: 0

Related Questions