5 replies [Last post]
velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 9 years 51 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

I am too embarrassed to tell you how much time I have devoted to this little nugget of javascript Hades today......I really do hate javascript. hate it with a bloody passion. Of all the languages it's one I can never seem to "get" in a paradigm sense....anyway, enough blathering....

Very simple, I am trying to hide/show divs in a collapsable menu style.

I have a container div. The primary meny option contains all child divs. I've tried it with the kiddies outside and it fails miserably as well. I've found about 4 dozen exampled on the WWW that says this should work...but it doesn't

Here is my css for the divs in question

 
        div.safeChooser{
	margin:0px;
	padding:0px;
	border:1px solid #333333;
	background:#eee;
	width:100px;
	float:left;
	height:100%;
	}

	div.mainChoice{
	width:100px;
	visibility:visible;
	margin:0px;
	padding:1px;
	border: 0px;
	color:#333333;
	font-size:10px;
	cursor:pointer;
	_cursor:hand;
	}
	
	div.subChoice{
	display:none;
	margin:0px;
	padding:1px;
	color:#333333;
	font-size:10px;
	cursor:pointer;
	_cursor:hand;
	}
	
	div.mainChoice.img, div.subChoice.img{
	margin:0px;
	border:0px;
	}
	
	img.sign{
	margin-left:1px;
	margin-right:2px;
	}

Here is the javascript-

function showHide(divName){
	divID = document.getElementById(divName);
	if(divID.style.display  == "none"){
		divID.style.display = "inline";
	}//end if
	
	else if(divID.style.display == "inline"){
		divID.style.display = "none";
	}//end else if
}//end Function showMe
	
function swapImage(picID){	
	  var pic = document.getElementById(picID);
	  if(pic.src == "graphics/minus.jpg"){
		  pic.src = "graphics/plus.jpg";
		  }
	  
	  else if(pic.src == "graphics/plus.jpg"){
		  pic.src = "graphics/minus.jpg";
		  }	
}//end function swapImage


function userChoice(choiceVar){
	if(choiceVar == "choice1"){
		var choiceArray = new Array("premDeposit", "underCounter", "cashTray");
		var y = choiceArray.length;
		y = y - 1;	
		}//end if
	for (var x = 0; x <= y; x++){
		divName = choiceArray[x];
		showHide(divName);
		}//end for
}//end function choice*/

And here is the HTML-

 
<div class="safeChooser">
	<div class="mainChoice" id="commercial" onClick="swapImage('commercial_sign'); userChoice('choice1');">
	<img src="graphics/plus.jpg" alt=" " align="left" class="sign" id="commercial_sign">Commercial Safes
	

		<div class="subChoice" id="premDeposit" onClick="swapImage('premDeposit_sign');">
		<img src="graphics/dropdown.jpg" alt=" "><img src="graphics/plus.jpg" alt=" " align="left" class="sign" id="premDeposit_sign">Premium Depositories
		</div>
					
		<div class="subChoice" id="underCounter"><a href="page-products-safeType-under_counter.htm">
		<img src="graphics/dropdown.jpg" alt=" "><img src="graphics/plus.jpg" alt=" " align="left" class="sign" id="underCounter_sign">Under-Counter Depositories</a>
		</div>
		
		<div class="subChoice" id="cashTray" onClick="swapImage('cashTray_sign');">
		<img src="graphics/dropdown.jpg" alt=" "><img src="graphics/plus.jpg" alt=" " align="left" class="sign" id="preDeposit_sign">Cash Tray Storage
		</div>
		
	<!--// end commercial //-->
	</div>		

<!--//end safe Chooser//--> 
</div>
			

Note that this thing is not complete, I am building/testing as I go....which is not far. Clicking the "commercial" div changes an image with swapImage() and then sends a value to userChoice. Based on that value, userChoice builds an array of the sub-choices. A count variable is instantiated and used as the conrol for a for loop. In the for loop, each sub-choice (now a value in an array and corresponding to a div id, is supposed to change the div.style.display of each div in turn. It no worky. I have tested and know that the code gets to the showHide function for each name in the array. It just doesn't have any visible affect on the display property. When tested, divID.style.display shows as empty...not even NULL.

I am obviously missing something very, very basic and I am not too proud to ask, dang it.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Tags:
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 25 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

dhtml and style.display

style is the object that corresponds to the style attribute in an html tag. Since your initial values are in the CSS and you don't use the style attribute your javascript tests will never succeed. What you are after is the computed style. That is a much more complex beast and requires cross-browser contortions to work.

You may find it easier to use the CSS to control the styles such that all parts of the tree are visible. Then hide all those parts that should have an initial state of hidden using the inline style attribute (e.g. style="display:none").

Your javascript then becomes a test for display:none. Clearing the style.display property if its set, setting it to none if its not. e.g.

e.style.display = (e.style.display == "none") ? "" : "none";

This has the added advantage of working with elements irrespective of their normal display state. ie., you don't care if the normal state is block, inline, table or whatever.

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 9 years 51 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

dhtml and style.display

Chris, that did it, thank you.

It seems I am at a point in my CSS learning curve where I think I need to do some looking into more of the technical aspects and background of CSS as it relates to the DOM and how it interacts with the browser. Can you recommend any articles/sites?

Thanks.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 25 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

dhtml and style.display

I would consider my areas of dubious expertise, php, html & css. Javascript and DOM I have only a nodding acquaintance with. My bible is O'Reilly's Dynamic HTML reference which contains basic & reference information about HTML, CSS, DOM & Javascript. It talks about all elements/properties/attributes in existence at the time it was published, irrespective of whether they are microsoft, netscape or part of the standard and explains which (of the then current) browsers support them and to what level. I come from a programming/engineering background and am used to reading technical manuals and specs, something that doesn't suit a lot of people.

Personally, javascript drives me nuts. I hate that it generally does nothing if even the slightest thing isn't right. I have never managed to get my head around using javascript debuggers, they look like old style C debuggers but somehow I can't get them to work how I think they should. If you find a book out there that explains everything clearly - please let me know about it Smile

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 9 years 51 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

dhtml and style.display

Quote:
I hate that it generally does nothing if even the slightest thing isn't right
This simple fact has caused more profanity to escape my lips over the last year or so than anything else in my life.....even my ex-wife, and that that is saying something!!!!!

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 22 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

dhtml and style.display

Chris..S wrote:
Personally, javascript drives me nuts.

So, it's not just me then. Laughing out loud Which is why I wish you'd proposed something other than a js-solution in the PHP form thread. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference