Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problems with simple object fade code

    Hi all. I'm learning JS from pretty much scratch and the first thing I'm trying to do is simply make an image fade function. I just can't seem to make it work though, the image starts off at the right opacity (im this case 0.5) but after that the page goes white and the script never stops. It does seem to be counting up normally "opacity: 0.6 opacity: 0.7" etc. though.

    Code:
    			<img src="1.jpg" id="pic1">
    	
    			<script type="text/javascript">
    				var amount = 0.5;
    				var target = document.getElementById('pic1');
    				
    				function fade() {				
    											
    				if (target.style.opacity < 1.0) {
    					
    					target.style.opacity = amount;
    					amount = amount + 0.1;
    
    					document.write("<br>opacity: " + target.style.opacity);
    					
    					setTimeout("fade()", 1000)					
    					//fade();
    					}
    					
    				}
    				
    				fade();
    
    			</script>
    edit I rewrote it to make it simpler but still having basically the same problem D:!
    Last edited by eddo; 07-29-2011 at 08:16 AM.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any ideas on this one? I rewrote it to make it simpler but still getting the same basic problem :/

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    			<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="pic1">
    
    			<script type="text/javascript">
    				var amount = 0.5;
    				var target = document.getElementById('pic1');
    
    				function fade() {
    
    				if (target.style.opacity < 1.0) {
    
    					target.style.opacity = amount;
    					amount = amount + 0.1;
    
    					target.style.opacity=amount;
    
    					setTimeout("fade()", 1000)
    					//fade();
    					}
    
    				}
    
    				fade();
    
    			</script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    eddo (07-29-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Dang, I'd tried that before and it didn't work so I was trying to make the reverse work instead. No idea what I did wrong the first time! Many thanks.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    What went wrong? It's the document.write() .... this will always create a new document if applied after page load. So document.write() is really ONLY useful to show content during the initial load of the page.

  • Users who have thanked devnull69 for this post:

    eddo (07-29-2011)

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    What went wrong? It's the document.write() .... this will always create a new document if applied after page load. So document.write() is really ONLY useful to show content during the initial load of the page.
    Ahhhhhhhhhhhhh so that's what it was! So what can I use if I want to print a var's current value for debugging purposes?

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    It depends on which browser you are using. You can use

    1. console.log() in some cases, if you have the possibility to access the javascript console or you have extensions like Firebug for Firefox or the Development Tools for IE
    2. alert() ... which shows you a dialogue window
    3.
    Code:
    HTML
    <div id="messagearea"></div>
    
    Javascript:
    document.getElementById('messagearea').innerHTML = "This is a message";


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •