Forum Moderators: open
The "toggle" function is used on the following page, when you click the "Email to friend" link (top of right column). This works fine every time you click it.
URL Removed
We tried using this same technique to show/hide the top menu, but it is acting erratic. Click the blue "Show/Hide Menu" button that is right above the right column. You will notice it takes a few clicks to work on FireFox. On IE6 it captures the first click, but sometimes the menu button don't show up until you mouseover.
We are using the same kind of idea on other pages throughout the side.
URL Removed - this uses Prototype (i think?) but its a "slide" function
URL Removed - this uses the Javascript that is baked in to vBulletin.
Any help or suggestion on how I can get this working consistently is appreciated.
Thanks.
Rezilient
[edited by: Fotiman at 2:15 pm (utc) on Oct. 17, 2008]
[edit reason] No URLS per the TOS please. [/edit]
In your case, your markup looks like this:
<div class="show_hide">
<a href="javascript:;" onclick="$('top_menu').toggle();"><b style="visibility:hidden;">Show--Hide--Menu</b></a>
</div>
And it looks like this is the relevant CSS that is applied to your elements:
.show_hide {
display:block;
height:25px;
left:622px;
margin:0pt;
padding:0pt;
position:relative;
top:225px;
width:147px;
}
.show_hide a {
display:block;
height:25px;
margin:0pt;
padding:0pt;
text-decoration:none;
width:147px;
}
.show_hide a b {
margin:0pt;
padding:0pt;
visibility:hidden;
}
.show_hide a:hover {
margin:0pt;
padding:0pt;
visibility:hidden;
}
Adding a breakpoint inside the toggle function reveals that its not getting called. This suggests to me that there is a problem with your styles such that your link's onclick event is never firing. In other words, because of positioning or how you are styling your link, it is making the link not "clickable". I noticed too that mousing over the link seems to cause the mouse to change from the arrow pointer to the hand and back to the pointer as you move pixel by pixel across the link, also suggesting that the link is not clickable.
I would look more closely at how you are styling your page, as your onclick handler works when it fires.
[edited by: Fotiman at 2:28 pm (utc) on Oct. 17, 2008]
Any idea what in the CSS might be breaking the links "clickability", it is the same CSS we are using across the other sections on our website which is working and clickable. Any hints to help troubleshoot the CSS would be very.
Meanwhile I'll start poking away to see if I can figure it out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style type="text/css">
.show_hide {
background-color: red; /* ADDED THIS FOR TESTING */
display:block;
height:25px;
left:622px;
margin:0pt;
padding:0pt;
position:relative;
top:225px;
width:147px;
}
.show_hide a {
display:block;
height:25px;
margin:0pt;
padding:0pt;
text-decoration:none;
width:147px;
}
.show_hide a b {
margin:0pt;
padding:0pt;
visibility:hidden;
}
.show_hide a:hover {
margin:0pt;
padding:0pt;
visibility:hidden; /* THIS IS THE PROBLEM */
}
</style>
<title>Untitled</title>
</head>
<body>
<div class="show_hide">
<a href="javascript:;" onclick="alert('hi');"><b style="visibility:hidden;">Show--Hide--Menu</b></a>
</div>
</body>
</html>
THANK YOU!
