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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2009
    Location
    Nepal
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Fade in on page loads

    Hey,

    I just want my DIV and it's content fade in on page load. I think it's done with javascript onload function. How can I do? Please help me.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    It's done with jQuery:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    	#content_to_fade_in{
    		display:none;
    	}
    </style>
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	var fade_duration = 1000		// milliseconds
    	$('#content_to_fade_in').fadeIn(fade_duration);
    });
    </script> 
    
    
    </head>
    
    <body>
    
    <div id="content_to_fade_in">
    	<h1>I am fading in.</h1>
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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