...

View Full Version : var and hidden divs issue



layoutweb
06-13-2010, 09:55 PM
I would like to think I understand the fundamentals of JavaScript, but I am beating my head with this and it seems so simple. I am trying to set the current div as visible, then set the old div as not visible, then set the new div id as a variable so that it can be used next. all it is doing is setting the new div to visible, and not setting the variable to be used. here is my code.

this is the function
[code]
var Gp;
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
document.getElementById(Gp).style.display = 'none';
Gp = id;
}
[code]

this is the html
[code]
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6389/thumb2.jpg" onclick="setVisibility('img_name1', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6389/thumb1.jpg" width=68 height=90 /></a></div>
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6396/thumb2.jpg" onclick="setVisibility('img_name2', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6396/thumb1.jpg" width=68 height=90 /></a></div>
<div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6403/thumb2.jpg" onclick="setVisibility('img_name3', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click">


<div id='img_name1' style='display:none'>new 1 image</div>
<div id='img_name2' style='display:none'>new image 2</div>
<div id='img_name3' style='display:none'>new 1 image 3</div>
[code]

Any help would be greatly appreciated. Cheers - James

randomuser773
06-14-2010, 04:19 AM
One of the most fundamental of fundamentals is that you always use the error console.
What is the value of Gp the first time it is referenced?

layoutweb
06-14-2010, 06:38 AM
I will definitely check out the error console, I guess that shows what I know. That being said, the Gp is the current div that is visible. The idea is on click -> set the current div to display: none and the new div to display: inline. Is that what you wanted?

layoutweb
06-14-2010, 06:42 AM
Okay just checked the error console in firefox and there were no errors pertaining to my javascript, only some css not related to my divs in question.

Skychan
06-14-2010, 06:59 AM
Is that the exact code you have? cuz the var Gp is not defined at the outset. So the very first time the line "document.getElementById(Gp).style.display = 'none';" is ran, it throws an exception since the var Gp is empty and so getElementById returned null and you tried accessing the style attribute of a null value. Since an exception was thrown the line "Gp = id;" is never ran.

Since at the outset all 3 images are set to not display, you just need a catch:



var Gp = null;
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
if(Gp != null){
document.getElementById(Gp).style.display = 'none';
}
Gp = id;
}

layoutweb
06-15-2010, 06:10 PM
Yup that was it. I knew I had the logic right, is was the format that killed me. Thank You



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum