Forums

GMB

I've hit a bit of a snag in creating a "fade to black" effect. What I've come up with works in JSFiddle, which you can see here:

http://jsfiddle.net/2ee2r/

But not on the following test page viewed in Safari and Chrome (haven't tested it in other browsers):


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <style>
    div { background-color: #000; display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }
  </style>

  <script src="http://code.jquery.com/jquery-latest.js"&gt;
  </script>

  <title>Title</title>
</head>

<body>
  <div>
  </div>

  <script>
    $(document).ready(function() {
      $('div:hidden').fadeIn(1000)
    });
  </script>
</body>
</html>

Any idea what I've done wrong?

Thanks in advance for any help.

karlpcrowley

Try this css

div { 
    background-color: #000; 
    display: none; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    height: 100%;  
}

Also if you're going to leave the div empty i'd suggest using

GMB

Thanks for the suggestion, karlpcrowley, but I get the same results: no problem in JSFiddle; no go in browser.

Also, I suppose you meant that I should use:


<p>&nbsp;</p>

in the otherwise empty div?

karlpcrowley

Can you link to the page you're working on?

and you could leave out the paragraph

<div>&nbsp;</div>

GMB

I wasn't working with a live page, just one on my desktop. I did put the page up at:

http://mindmadebooks.com/new_test.html

and got the same results.

Thanks for your help.

Senff

I think there may be something wrong with the semi-colon at the end of your script, or an invisible weirdo character that comes after it (perhaps if you copy/pasted it from somewhere). Your code didn't work for me either, but when I delete that whole line and then type it again manually, it works fine.

});

karlpcrowley

now that you mention it, anytime I copy and paste from jsfiddle it doesn't work
If you check your page which chrome it's stating there's an illegal character

GMB

Thanks, Senff -- there was indeed a space after the final semi-colon. I removed and that did the trick.

And thanks, karlpcrowley -- I should have verified the code.

I appreciate the speedy replies!

treehouse : what would you like to learn today?

Forums

"Fade to black" effect