Results 1 to 1 of 1

Thread: Animated Collapsible DIV Q's!!!

  1. #1
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV (Closing Div Before Opening Another)

    Animated Collapsible DIV

    Web Example

    Problem: I have three DIV's that slide down, problem is that if one is already down, and someone clicks on another, it simply extends the DIV's vertically.

    I tried correcting this (with my largely limited knowledge of javascript) by having a "slidedown" activate whenever a link was clicked, so that if any other DIV's were down, they would be covered by the descending one.

    Problem is that it looks ridiculous, and if you click fast enough (before the animation finishes) you can still extend the DIV's too far vertically.

    I was hoping there was a better way to 'clear' the area before another DIV slided down.

    Thanks!!!

    HTML Code:
    <!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">
    <script type="text/javascript" src="animatedcollapse.js"> </script>
    <link rel=StyleSheet href="master.css" type="text/css" media="all">
    <body>
    
    
    	<div id="navigation">
    	<a href="javascript:collapse3.slideup(),collapse4.slideup(),collapse2.slideit()">Movies</a>
    	<a href="javascript:collapse2.slideup(),collapse4.slideup(),collapse3.slideit()">Photos</a>
    	<a href="javascript:collapse2.slideup(),collapse3.slideup(),collapse4.slideit()">Resume</a>
    	</div>
    
    
    	<!--DrawerOne-->
    	
    	<div id="movies">
    		
    		<div>
    			<p>Content Area for Movies</p>
    		</div>
    
    	</div>
    
    	<!--DrawerOne END-->
    	
    		<!--DrawerTwo-->
    	
    		<div id="photos">
    		
    			<div>
    				<p>Content Area for Photos</p>
    			</div>
    
    		</div>
    
    		<!--DrawerTwo END-->
    	
    			<!--DrawerThree-->
    	
    			<div id="bio">
    		
    				<div>
    					<p>Content Area for a Resume</p>
    				</div>
    
    			</div>
    
    			<!--DrawerThree END-->
    	
    
    <script type="text/javascript" src="vars.js"> </script>	
    </body>
    
    </html>

    Var Collapse Code
    Code:
    //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
    var collapse2=new animatedcollapse("movies", 1000, true)
    var collapse3=new animatedcollapse("photos", 1000, true)
    var collapse4=new animatedcollapse("bio", 1000, true)
    The Original 'Animated Collapsible DIV' code has been left untouched.

    *edit* Any help??? I would be greatly appreciative. I haven't found any write-ups on this problem in the forums already.
    Last edited by claytonbellmor; 09-07-2007 at 08:51 PM.

Bookmarks

Posting Permissions

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