#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5

    Functions with jquery animations, wait till one finsihes before the other starts


    the animation works perfectly if you open and close the same tab, but as soon as u start clicking on other tabs it bugs up a little
    this is because when u click on another tab, it closes the current one
    if i can make the opening tab wait until the current tab closes, i think the bug will be fixed, but i don't know how to do that
    the javascript is at the bottom of the page
    http://patrickallard.net63.net/
    and ill post it here for convenience sake
    Code:
    <script>
    
    //page dimentions
    var tabWidth=300;
    var tabHeight=document.getElementById("experienceshadow").clientHeight;
    var defaultSpeed=400;
    var numRows=2;
    
    //tab constructer
    function tab(divID,row,col)
    {
    	// jquery referencer
    	this.div=$('div#'+divID);
    	
    	// store dimentions of divs into variables
    	this.height=document.getElementById(divID).clientHeight;
    	
    	// row and column of tab iterates from 0
    	this.row=row;
    	this.col=col;
    	
    	// position of tabs based on row and column number
    	this.left=col*parseInt(tabWidth);
    	this.top=row*parseInt(tabHeight);
    
    	// when page initializes, all windows are open, before the initilization fucntion which closes them all
    	// thus we have to set all to open so initilization function sets them to false when closing them
    	this.open=true;
    	
    	// toggle boolian to determine if div is open or closed
    	this.toggle=toggle;
    	function toggle()
    	{
    		if(this.open==true)
    		{
    			this.open=false;
    		}
    		else
    		{
    			this.open=true;
    		}
    	}
    }
    
    // create tabs
    experience=new tab("experience",0,0);
    education=new tab("education",0,1);
    software=new tab("software",0,2);
    codesamples=new tab("codesamples",1,0);
    references=new tab("references",1,1);
    links=new tab("links",1,2);
    
    // jquery functions to open and close tabs
    (function() 
    {
    	// close a tab
    	$.fn.CloseHopin = function(currentTab) 
    	{
    		return $(this).animate
    		(
    			{
    				'height': tabHeight+'px',
    			}
    			, defaultSpeed || 400
    		)
    		.animate
    		(
    			{
    				'left': currentTab.left+'px',
    				'width': tabWidth+'px',
    			}
    			, defaultSpeed || 400
    		)
    		.animate
    		(
    			{
    				'top': currentTab.top+'px',
    			}
    			, defaultSpeed || 400
    		);
    	}
    
    	// open a tab
    	$.fn.OpenHopin = function(currentTab) 
    	{
    		return $(this).animate
    		(
    			{
    				'top': (tabHeight*numRows)+'px',
    			}
    			, defaultSpeed || 400
    		)
    		.animate
    		(
    			{
    				'left': '0px',
    				'width': '900px',
    			}
    			, defaultSpeed || 400
    		)
    		.animate
    		(
    			{
    				'height': currentTab.height+'px',
    			}
    			, defaultSpeed || 400
    		);
    	}
    
    	// function to open or close a tab
    	$.fn.OpenToggle = function(currentTab) 
    	{
    	
    		// if its open close it
    		if(currentTab.open)
    		{
    			currentTab.toggle();
    			$(this).CloseHopin(currentTab);
    		}
    		
    		// if its closed open it
    		else
    		{
    		
    			// close other windows if they are open, then open the clicked window
    			// error here
    			if(experience.open)
    			{
    				experience.div.toggle();
    				experience.div.CloseHopin(experience);
    			}
    			if(education.open)
    			{
    				education.div.toggle();				
    				education.div.CloseHopin(education);
    			}
    			if(software.open)
    			{
    				software.div.toggle();
    				software.div.CloseHopin(software);
    			}
    			if(codesamples.open)
    			{
    				codesamples.div.toggle();
    				codesamples.div.CloseHopin(codesamples);
    			}
    			if(references.open)
    			{
    				references.div.toggle();
    				references.div.CloseHopin(references);
    			}
    			if(links.open)
    			{
    				links.div.toggle();
    				links.div.CloseHopin(links);
    			}
    			currentTab.toggle();
    			$(this).OpenHopin(currentTab);
    		}
    	};
    
    	// add functions to the tabs
    	experience.div.on('click', function() {
    		experience.div.OpenToggle(experience);
    	});	
    	education.div.on('click', function() {
    		education.div.OpenToggle(education);
    	});	
    	software.div.on('click', function() {
    		software.div.OpenToggle(software);
    	});	
    	codesamples.div.on('click', function() {
    		codesamples.div.OpenToggle(codesamples);
    	});	
    	references.div.on('click', function() {
    		references.div.OpenToggle(references);
    	});	
    	links.div.on('click', function() {
    		links.div.OpenToggle(links);
    	});	
    })();
    
    // when page initializes, close all tabs
    (function() {
    		experience.div.OpenToggle(experience);
    		education.div.OpenToggle(education);
    		software.div.OpenToggle(software);
    		codesamples.div.OpenToggle(codesamples);
    		references.div.OpenToggle(references);
    		links.div.OpenToggle(links);
    })();
    </script>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Take a look into the jQuery .promise() API.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5
    cant get .promise() to work, i believe im using the correct syntax but the page just freezes after closing all the tabs

    if(links.open)
    {
    links.div.toggle();
    links.div.CloseHopin(links);
    links.div.promise().done(function()
    {
    currentTab.toggle();
    currentTab.div.OpenHopin(currentTab);
    });
    }

    maybe i can pass the fuction "tab.OpenHopen()" as a parameter to "tab.OpenToggle()"

    and then use .complete to call the correct "tab.OpenHopen()" method on the correct tab object inside the tab.OpenToggle() method

IMN logo majestic logo threadwatch logo seochat tools logo