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

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5

    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. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    One thing, that I can see (assuming you did not want to redirect end user; once link, with extended info, displays); is that you need to add a return false or preventDefault(), to those links that have more content to display (ie... "extended info"). Beyond that; what else are you having problems with or what else are you trying to achieve?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5
    please, i just need an outline for a div treated like an object in javascript
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Originally Posted by chopficaro
    please, i just need an outline for a div treated like an object in javascript
    This converts a div into an object or... "treats div like an object":
    Code:
    <script>
    function DIVObj(define_id)
    {
    var obj = document.getElementById(define_id);
    alert(obj); // remove this... it just shows you; that the div is now accessible as an object, from the document tree
    }
    </script>
    
    <div id="someDiv">
    <!-- content here -->
    </div>
    
    <input type="button" value="Turn To Object" onclick="DIVObj('someDiv')"/>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5
    yes i have that in my code already, refering to the divs as varibles
    but in my OpenToggle function, i need to change a boolian property "open" to 1 or 0
    i need for the function to know which div it is working on and to only change the boolian of that particular div
    in javascript, arguments are passed as values, not as variables correct? so because of that i dont know how to do what im trying to do
    srry tried my best to explain it, i really appreciate u taking time to help me
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    This may be of some help to you: Boolean - JavaScript | MDN.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5
    Originally Posted by web_loone08
    This may be of some help to you: Boolean - JavaScript | MDN.
    i have the boolians in my code already as well
    what i need is for the boolian to be a property of the div

    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
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    jQuery can tell you when an element is visible or not with the ":visible" selector.
    Code:
    if ($("#theElement").is(":visible")) { #theElement is visible }
    So if you are showing/hiding sections of a webpage, as in a tabbed container, and you want to know which tab is visible - you don't need to assign a boolean "is open" property to each container and worry about setting/unsetting it yourself. Just use jQuery to find out which one is open.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    103
    Rep Power
    5
    the element is still visable it has just changed size and location
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Originally Posted by chopficaro
    the element is still visable it has just changed size and location
    Why don't you just create a function; that validates the occurrence of the element changing size and position. Then add a setTimeout() or setInterval() to that function (do whatever your wanting to do, in this function, if the element's size/position changes) and... then, trigger this function on $("document") ready()? This might be the best way to go; with what your trying to accomplish.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    If you absolutely need to define your own properties on your divs and you're using HTML5 you can use a custom data attribute which will allow you to store data within your HTML markup:
    Code:
    <div id="myDiv" data-open="true">
    </div>
    Accessing the attribute in Javascript:
    Code:
    // get div
    var obj = document.getElementById('myDiv');
    
    // get data-open attribute
    var isOpen = obj.getAttribute('data-open');
    
    // display data-open attribute
    alert('data-open is set to: ' + isOpen);
    
    // set new value to data-open attribute
    obj.setAttribute("data-open","false");
    
    // get data-open attribute
    isOpen = obj.getAttribute('data-open');
    
    // display data-open attribute
    alert('data-open is set to: ' + isOpen);
    Working example here: http://jsfiddle.net/KEMTQ/

    Comments on this post

    • web_loone08 agrees : That is a good idea and should work for OP's needs.

IMN logo majestic logo threadwatch logo seochat tools logo