anyone having javascript fadein and fadeout of DIV

Discussion in 'JavaScript' started by jagathdesigner, Aug 24, 2009.

0
  1. #1
    i want to fade in and fade out divs like a photoslide show.....


    anyone having code for dat.....?
     
    jagathdesigner, Aug 24, 2009 IP
  2. JavaScriptBank.com

    JavaScriptBank.com Peon

    Messages:
    141
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    JavaScriptBank.com, Aug 24, 2009 IP
  3. ajaXpert

    ajaXpert Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    you can do it with scriptaculous very easily
     
    ajaXpert, Aug 25, 2009 IP
  4. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Use JQuery, super easy and you don't need two files to do it (ie: prototype+scriptaculous)

    Example (assuming you already got the full markup, div styled, etc)

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Toggle</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
	
	$(document).ready(function() {
		$('#clickme').bind("click", function(e){
			$('#theDiv').toggle('slow');
		});
	});

    </script>
    <style type="text/css">
        html * { outline: none; margin: 0px; padding: 0px; }
        body { background: #fff none no-repeat 0 0; }
	#theDiv { display: none; width: 400px; height: 300px; border: 1px solid black; }
    </style>
</head>
<body>
    <div id="theDiv">Some Stuff</div>
    <input type="button" id="clickme" value="Click Me!"/>
</body>
</html>
    Code (markup):
    live example : http://kbeezie.com/examples/toggle.php

    Alternatively you can skip the whole script block (still gota include jquery.js though) and use

    <input type="button" onclick="javascript:$('#theDiv').toggle();" value="Click Me!"/>

    But I like to bind the events rather than doing things inline.
     
    kblessinggr, Aug 25, 2009 IP