How to animate visibility for mulitiple div statements...


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: How to animate visibility for mulitiple div statements...

  1. #1
    Join Date
    Jun 2006
    Posts
    2

    Post How to animate visibility for mulitiple div statements...

    Hi,
    I need help setting up a javascript flipbook-type animation. I have found several examples of these online, but they are for pictures. What I want to do is make one to work with div statements. Using css :WAVE: nd a tiny javascript I have created such an animation, but you have to continuously click on the divs to make one hide and then another pop up. I wanted to know if there was a way to make this process automate, so onload of the page it cycles through the animation automatically.


    This is what I am using now.
    <script language="javascript">
    //toggles layer visibility on and off
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>


    See below example for the entire code.
    -------------------------------------
    <html>
    <body lang=EN-US style='tab-interval:.5in'>
    <head>
    </head>
    <style>
    #tgoombad { background:green;color:pink; left:35; top:5px; height:95px; width:50px;
    z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
    </style>
    <script language="javascript">
    //toggles layer visibility on and off
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>
    <div id="tgoombad" onclick="hide('tgoombad'); show('tgoombaa'); "></div>
    <!-- -->
    <!-- -->
    <style>
    #tgoombac { background:yellow;color:pink; left:35; top:5px; height:95px; width:50px;
    z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
    </style>
    <script language="javascript">
    //toggles layer visibility on and off
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>
    <div id="tgoombac" onclick="hide('tgoombac'); show('tgoombad'); "></div>
    <!-- -->
    <!-- -->
    <style>
    #tgoombab { background:red;color:pink; left:35; top:5px; height:95px; width:50px;
    z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
    </style>
    <script language="javascript">
    //toggles layer visibility on and off
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>
    <div id="tgoombab" onclick="hide('tgoombab'); show('tgoombac'); "></div>
    <!-- -->
    <!-- -->
    <style>
    #tgoombaa { background:blue;color:pink; left:35; top:5px; height:95px; width:50px;
    z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
    </style>
    <script language="javascript">
    //toggles layer visibility on and off
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>
    <div id="tgoombaa" onclick="hide('tgoombaa'); show('tgoombab'); "> </div>

    </body>
    </html>

    -------------------------------------
    Thanks in advance for any help

    Joshua Woodward

  2. #2
    Join Date
    Aug 2003
    Posts
    313
    Take a look at the following:
    Code:
    <!-- basic template file for HTML -->
    
    <html>
    <title>hello world</title>
    <script type="text/javascript" language="javascript1.5">
    
    function hide(id) {
    	document.getElementById(id).style.visibility = 'hidden';
    }
    function show(id) {
    	document.getElementById(id).style.visibility = 'visible';
    }
    
    function Animation(_frames, _timeout) {
    	var frames = _frames;
    	var timeout = _timeout;
    	var current = 0;
    	
    	for( i = 1; i < frames.length; i++ )
    		hide(frames[i]);
    	
    	function Animation_Next() {
    		hide(frames[current]);
    		current = (1 + current) % frames.length;
    		//alert(current);
    		show(frames[current]);
    		window.setTimeout(Animation_Next, timeout);
    	}
    	
    	function Animation_Start() {
    		window.setTimeout(Animation_Next, timeout);
    	}
    	
    	this.play = Animation_Start;
    	return this;
    }
    </script>
    <style type="text/css">
    div.frame { position: absolute; width: 300px; height: 300px; left: 150px; top: 150px; }
    div#d0 { background-color: black; color: white }
    div#d1 { background-color: blue }
    div#d2 { background-color: yellow }
    div#d3 { background-color: red }
    div#d4 { background-color: green }
    </style>
    <body onload="(new Animation(new Array('d0','d1','d2','d3','d4'), 1000)).play();">
    
    <div class="frame" id="d0">start</div>
    <div class="frame" id="d1">hello</div>
    <div class="frame" id="d2">good bye</div>
    <div class="frame" id="d3">hello</div>
    <div class="frame" id="d4">good bye</div>
    
    
    </body>
    
    </html>
    Its kinda ugly, and the many colors hurt my eyes, but I think its kinda like what you want to do. Hope it helps.
    ~evlich

  3. #3
    Join Date
    Jun 2006
    Posts
    2

    Thank you!!!

    This is exactly what I needed. It works great.

Similar Threads

  1. Scrollbars in IE display in the DIV tag
    By Billkamm in forum Web
    Replies: 0
    Last Post: 04-20-2006, 01:58 PM
  2. HELP: DataGrid inside DIV Layer
    By dhruba.bandopad in forum ASP.NET
    Replies: 0
    Last Post: 04-13-2006, 12:18 PM
  3. Replies: 1
    Last Post: 06-25-2005, 01:30 AM
  4. Replies: 0
    Last Post: 03-29-2001, 12:42 AM
  5. One DIV on top of another
    By Tim Cowan in forum Web
    Replies: 2
    Last Post: 09-21-2000, 04:28 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center