...

View Full Version : Need help with Toggle Visibility



Dannyj6
12-11-2009, 11:31 AM
I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;

function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

Here is a sample of my a to z table;

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>

</tr></table>

And here is an example of the Brand name div ;

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give

gusblake
12-11-2009, 12:40 PM
My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected

That's what does happen. The mouseout event doesn't occur because the cursor isn't over the div already when it appears, but if you mouseover, then mouseout, it does exactly what you're talking about.

Unless I misunderstand completely, you could just take a few px off the top and left of the div, and the mouse will be over it by default.

Edit - I see you already add 20px to make it look better. To keep the effect, the div could be within a transparent container (to which the mouseout event would be attached) with some padding.

vwphillips
12-11-2009, 12:41 PM
var Lst=false;

function toggle_visibility(o,id) {
var obj = document.getElementById(id);
if (Lst&&Lst!=obj){
Lst.style.display='none';
}
Lst=obj;
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';
}
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

Dannyj6
12-11-2009, 02:43 PM
Thank you Vic... This has made it function a little better although something strange still occurs when you hover the links. Please see the live page at;

http://www.dp-development.co.uk/ProteinStop/site

It seems to me to hide and show the div.

Again thank you for you help so far.

Dan

vwphillips
12-11-2009, 03:55 PM
I can not see any 'strange things' on mouseover

but best to add return to link calls


<a href="#" onclick="return toggle_visibility(this,'uniquename0');">A</a>

and add a return false to the function


var Lst=false;

function toggle_visibility(o,id) {
var obj = document.getElementById(id);
if (Lst&&Lst!=obj){
Lst.style.display='none';
}
Lst=obj;
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';
}
return false;
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum