Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    treating dom objects as objects in jquery with boolian properties

    my new website uses jquery! but its buggy and i need help!
    http://patrickallard.net63.net/
    ive gotten to the point in this code where i realize i should have the divs that are opening and closing treated as objects (well, they are dom objects, but i need to have my own boolian properties for them)
    here is my script so far, the windown[] array doesnt exist, i was just trying to do it with arrays
    can anyone glance at my code and give me a tip please?
    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
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    please, i just need an outline for a div treated like an object in javascript


  •  

    Posting Permissions

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