Welcome to WebmasterWorld Guest from 23.23.46.20

Forum Moderators: open

Toggling visibility with one onclick, not two

on an element initially hidden

   
6:18 pm on Nov 10, 2006 (gmt 0)

5+ Year Member



Hello,

A javascript question about toggling visibility of an element:

I am using a hidden DIV to hold some "help" info for site users, to be made visible when the user clicks on an image (a question mark icon.) It works, but only after the icon has been clicked twice. After an initial click, the onclick event fires correctly. By the way, I tried using:

style.display = 'block';
and
style.display = 'none';

rather than:
style.visibility = 'visible';
and
style.visibility = 'hidden';

but that causes different rendering problems.

Can someone help me with this?

TIA,

Dennis

============================
Here are 3 variants of the markup on the (question mark icon) image that I have tried. I made the onclick event bold to make it easy to find. All have the same problem/result, as described above.

<a href="javascript;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Quest1','','Images/IconQuestion2_mo.gif',0)" onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>

<a href onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Quest1','','Images/IconQuestion2_mo.gif',0)" onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>

<a href onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>
============================

Here's the javascript function:

<script type="text/javascript" language="javascript">

function toggle_visibility2(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'hidden')
e.style.visibility = 'visible';
else
e.style.visibility = 'hidden';
}
//-->
</script>

============================

Here's the DIV that is initially 'hidden':

<div id="help_reg_reg">
<div class="infonotes">
<div class="helpinfoheader">
<img src="Images/IconQuestion2.gif" alt="help" />&nbsp;Register
</div>
<hr width="80%" align="center" />
Once you have registered, you can log in and start using the advanced features of the site.
</div>
</div>

============================

and here's the CSS for the nested DIVs:

#help_reg_reg {
visibility:hidden;
}

.infonotes {
font-family:Verdana, Arial, Tahoma, sans-serif;
font-size: 80%;
color: #000000;
background-color: #F3EBDE;
border-width:2px;
border-color:#000066;
border-style:solid;
position: relative;
top: 0px;
left: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-top: 4px;
display: block;

}

.helpinfoheader {
font-size: 120%;
font-family: Verdana, Arial, Tahoma, sans-serif;
text-align: center;
}

8:06 pm on Nov 10, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Try changing your function to this:

function toggle_visibility2(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'visible')
e.style.visibility = 'hidden';
else
e.style.visibility = 'visible';
}

The problem is that the 'style' property of the element is not setting the initial visibility of the element. That is, setting an element to be hidden via a selector (class, id, etc.) is not the same as setting the style property of an element. So initially, e.style.visibility will NOT equal 'hidden', as you thought it would. Instead, check to see if the style property is set to visible, and if not, assume that it should be hidden (instead of the other way around). Note, if you change your style to make this item visible by default, then you'll also need to changet this function back to what it was.

Understand?

10:35 pm on Nov 10, 2006 (gmt 0)

5+ Year Member



Fotiman,

You did not just give me a fish, you taught me how to fish! Of course, it works perfectly now! (In FireFox) And, I understand the logic.

THANK YOU!

My last chore is to find out why IE6 is rendering the page elements out of position...

Dennis

 

Featured Threads

Hot Threads This Week

Hot Threads This Month