0

I've been using a jQuery fade-in on my homepage, and I've recently just realized that it shows a black screen when Javascript is disabled. How can I change remove the property display: none when Javascript isn't available?

Script:

<script type="text/javascript">
   $(document).ready(function(){
       $('html').fadeIn(3000);
   })
</script>

CSS:

html {
    background: #000;
    height: 100%;
}
body {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
} 
4
  • 2
    A 3-second fade-in when the page has loaded? That seems excessive.
    – cdhowie
    Apr 26, 2013 at 22:17
  • 2
    Instead do $('html').hide().fadeIn(3000); Apr 26, 2013 at 22:18
  • @ExplosionPills I think that the body element is going to have to be hidden as soon as is possible, otherwise parts of it may render before the document-ready event is raised.
    – cdhowie
    Apr 26, 2013 at 22:20
  • Why is that excessive? How would I fade in the content in a less excessive manner?
    – pianoman
    Apr 26, 2013 at 22:53

6 Answers 6

6
<noscript>
   <style type="text/css">
       body {display: block;}
   </style>
</noscript>

In your head section after the styles in your question will show the body.

or just add:

document.body.style.display = 'none';

in your javasript instead of hiding the body with CSS, as waiting for DOM ready will cause flickering.

1
  • document.body.style.display = 'none'; is perfect!
    – pianoman
    Apr 27, 2013 at 4:02
2

Have it SHOWN by default.

Then in your JS, hide it immediately and have it fade back in.

This way it is shown by default (good) and you can still play around with whatever effects you need when jS is enabled.

0

Instead of that use the noscript tag in HTML:
HTML

<noscript><div id='cover'></div></noscript>

CSS

#cover{
   width:100%;
   height:100%;
   position:absolute;
   background-color:black
}

More info here: http://www.w3schools.com/tags/tag_noscript.asp

0

Use javascript to set the "display:none;" property programmatically. If its disabled its ignored.

0

Do the following in your JS/CSS.

In your HTML:

<!doctype html>
<html class="no-js">

In your CSS:

body {
    /* your styles */
}

body.js {
   display: none;
}

In your JS:

(function () {
    var $html = $('html').removeClass('no-js', 'js');
    $(document).ready(function () {
        $html.fadeIn(3000);
    });
});
0

You cant check if javascript is unavailable. You can check if javascript IS available tho, just by running any javascript.

first, I would define the display property in CSS as normal. Then I would set to window.onload to change the display property to none.

This causes that when javascript is unavailable the code wont run and the display property will remain normal.

I dont know if I am answering your question exactly, let me know if I am not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.