0

I have this little bit of code for a fade in effect but for some reason firefox is not picking up the which I need because the fade it doesn't work for firefox. What am I missing to get this to work? 

<noscript>
</style>
<style type="text/css"> 
  body {display:inherit !important;} /*if they haven't got javascript we need to show the body       
</style>
</noscript>

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

the css

body {
     background-color:#000;
     overflow-x:hidden;
     -webkit-text-size-adjust:100%;
     display:none;}
gVidal
  • 335
  • 1
  • 3
  • 15

1 Answers1

4

You can't have a <noscript> tag anywhere but the <body> section of your document, and you can't have a <style> tag anywhere but the <head> section of your document (see this post).

An alternative way to do this would be to make the body tag default to display: visible and set the display property using JavaScript like so:

<body>
    <script type="text/javascript">document.body.style.display = "none";</script>
    ...
</body>

Then get rid of your <noscript> tag completely and remove the display:none; line from your CSS declaration.

The advantage of this is that if the browser doesn't have JavaScript enabled, your <body> tag will be visible, regardless of how the browser handles the <noscript> tag.

Community
  • 1
  • 1
Kyle
  • 1,620
  • 14
  • 25