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

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    6

    Object oriented sort of need


    in the code
    there are boolians for each tab, which indicate open or closed, and which are supposed to toggle when clicking a tab
    theres a function for opening a tab
    a function for cosing a tab
    a function that calls those when u click on a tab called opentoggle, which toggles the tab open or closed
    i need to pass opentoggle something so that it knows which boolian to set once a tab is clicked
    Code:
    <script>
    
    	// store dimentions of windows into variables
    	var sampleItemHeight=document.getElementById("experienceshadow").clientHeight;
    	var experienceHeight=document.getElementById("experience").clientHeight;
    	var educationHeight=document.getElementById("education").clientHeight;
    	var softwareHeight=document.getElementById("software").clientHeight;
    	var codesamplesHeight=document.getElementById("codesamples").clientHeight;
    	var referencesHeight=document.getElementById("references").clientHeight;
    	var linksHeight=document.getElementById("links").clientHeight;
    	
    	// 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
    	var experienceOpen = true;
    	var educationOpen = true;
    	var softwareOpen = true;
    	var codesamplesOpen = true;
    	var referencesOpen = true;
    	var linksOpen = true;
    	
    	// variable to refer to windows
    	var experience = $('div#experience');
    	var education = $('div#education');
    	var software = $('div#software');
    	var codesamples = $('div#codesamples');
    	var references = $('div#references');
    	var links = $('div#links');
    
    (function() {
    	// function to open or close a window
    	$.fn.OpenToggle = function(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn) 
    	{
    		//if its open close it
    		if(window[binaryBool])
    		{
    			window[binaryBool]=false;
    			
    			var itemLeft=col*parseInt(itemWidth)
    			var itemTop=row*parseInt(itemHeight)
    			
    			$(this).CloseHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    
    		}
    		// if its closed open it
    		else
    		{
    			// close other windows if they are open, then open the clicked window
    			// error here
    			if(experienceOpen)
    			{
    				experience.CloseHopin("experienceOpen",0,0,300,sampleItemHeight,2,experienceHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    			if(educationOpen)
    			{
    				education.CloseHopin("educationOpen",0,1,300,sampleItemHeight,2,educationHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    			if(softwareOpen)
    			{
    				software.CloseHopin("softwareOpen",0,2,300,sampleItemHeight,2,softwareHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    			if(codesamplesOpen)
    			{
    				codesamples.CloseHopin("codesamplesOpen",1,0,300,sampleItemHeight,2,codesamplesHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    			if(referencesOpen)
    			{
    				references.CloseHopin("referencesOpen",1,1,300,sampleItemHeight,2,referencesHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    			if(linksOpen)
    			{
    				links.CloseHopin("linksOpen",1,2,300,sampleItemHeight,2,linksHeight,500);
    				$(this).OpenHopin(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn);
    			}
    		}
    	};
    
    	// close a window
    	$.fn.CloseHopin = function(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn) 
    	{
    		return $(this).animate({
    			'height': itemHeight+'px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		}).animate({
    			'left': itemLeft+'px',
    			'width': itemWidth+'px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		}).animate({
    			'top': itemTop+'px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		});
    	}
    
    	
    	// open a window
    	$.fn.OpenHopin = function(binaryBool,row,col,itemWidth,itemHeight,numRows,openHeight,speed,fn) 
    	{
    		return $(this).animate({
    			'top': (sampleItemHeight*numRows)+'px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		}).animate({
    			'left': '0px',
    			'width': '900px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		}).animate({
    			'height': openHeight+'px',
    		}, speed || 400, function() {
    			$.isFunction(fn) && fn.call(this);
    		});
    	}
    	
    
    	// add functions to the windows
    	experience.on('click', function() {
    		experience.OpenToggle("experienceOpen",0,0,300,sampleItemHeight,2,experienceHeight,500);
    	});	
    	education.on('click', function() {
    		education.OpenToggle("educationOpen",0,1,300,sampleItemHeight,2,educationHeight,500);
    	});	
    	software.on('click', function() {
    		software.OpenToggle("softwareOpen",0,2,300,sampleItemHeight,2,softwareHeight,500);
    	});	
    	codesamples.on('click', function() {
    		codesamples.OpenToggle("codesamplesOpen",1,0,300,sampleItemHeight,2,codesamplesHeight,500);
    	});	
    	references.on('click', function() {
    		references.OpenToggle("referencesOpen",1,1,300,sampleItemHeight,2,referencesHeight,500);
    	});	
    	links.on('click', function() {
    		links.OpenToggle("linksOpen",1,2,300,sampleItemHeight,2,linksHeight,500);
    	});	
    })();
    
    // when page initializes, close all windows
    (function() {
    		experience.OpenToggle("experienceOpen",0,0,300,sampleItemHeight,2,experienceHeight,500);
    		education.OpenToggle("educationOpen",0,1,300,sampleItemHeight,2,educationHeight,500);
    		software.OpenToggle("softwareOpen",0,2,300,sampleItemHeight,2,softwareHeight,500);
    		codesamples.OpenToggle("codesamplesOpen",1,0,300,sampleItemHeight,2,codesamplesHeight,500);
    		references.OpenToggle("referencesOpen",1,1,300,sampleItemHeight,2,referencesHeight,500);
    		links.OpenToggle("linksOpen",1,2,300,sampleItemHeight,2,linksHeight,500);
    })();
    
    
    
    </script>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    You started three separate threads for this same issue now. Just wanted to point that out. Also I find it interesting that this appears to be for help on your resume website; if it's your resume, shouldn't you avoid making it so complicated that you can't execute the design yourself?

    Anyway, like I said in another one of your threads, the jQuery selector filter ":visible" can tell you whether an element is visible or hidden. Look at the jQuery documentation on selectors for more on that.

    In a typical tabbed-container widget, you wouldn't need to pass string identifiers for which tab is clicked because the tab elements have a click handler assigned, and within that handler the jQuery reference "this" points to the tab that was clicked. Often times, the tab will have an ID attribute that shares a similar name to the target container's ID, so you can dereference the target container easily.

    I'd make a little example jsfiddle but the site seems to be down at the moment. So...
    Code:
    <style type="text/css">
    .tabContent { display: none; }
    </style>
    <ul class="tabs">
        <li id="foo">Foo</li>
        <li id="bar">Bar</li>
    </ul>
    <div class="tabContent" id="fooTarget">This is the Foo tab content</div>
    <div class="tabContent" id="barTarget">This is the Bar tab content</div>
    <script>
    // assign a click handler to the tabs
    $(".tabs li").click(function() {
        // first hide the visible tab
        $(".tabContent:visible").hide();
        $("#"+$(this).attr("id")+"Target").show();
    });
    </script>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    6
    i dont want to hide and show i want my specific animation to bring the tab open and closed
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    Then my suggestion would be to first do it simply - hide and show. Then work on replacing the simple $.hide() and $.show() with animations.

IMN logo majestic logo threadwatch logo seochat tools logo