homepage Welcome to WebmasterWorld Guest from 54.211.34.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggling visibility with one onclick, not two
on an element initially hidden
dtleahy

5+ Year Member



 
Msg#: 3152822 posted 6:18 pm on Nov 10, 2006 (gmt 0)

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;
}

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3152822 posted 8:06 pm on Nov 10, 2006 (gmt 0)

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?

dtleahy

5+ Year Member



 
Msg#: 3152822 posted 10:35 pm on Nov 10, 2006 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved