Passing layer name dynamically

[dizzle]

i am using javascript to display a pop up div layer. i am using a link to activate the div layer. the link directs to the javascript function ShowMe(), below is the javascript I have. As you can see, the layer name is hard coded in write now, but I want to pass it to the javascript, possibly by ShowMe('layer1'). However the part that assigns the name runs on mousedown before ShowMe() runs. I cant think of a way to arrange this so the name can be passed in dynamically, any suggestions


isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
DoIt=false;

function ddInit(e)
{
TWD=isIE ? "BODY" : "HTML";
TWD1=isIE ? document.all.theLayer : document.getElementById("theLayer");
TWD2=isIE ? event.srcElement : e.target;
while (TWD2.id!="titleBar"&&TWD2.tagName!=TWD)
{
TWD2=isIE ? TWD2.parentElement : TWD2.parentNode;
}
if (TWD2.id=="titleBar")
{
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(TWD1.style.left);
nowY=parseInt(TWD1.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e)
{
if (!ddEnabled) return;
TWD1.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
TWD1.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(TWD3)
{
if (!isN4) return;
N4=eval(TWD3);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e)
{
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e)
{
if (DoIt)
{
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function()
{
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe()
{
ddInit;
if (isIE||isNN) TWD1.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}
function showMe(layerName)
{

if (isIE||isNN) TWD1.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

 

[BillyRayPreachersSon]

Where are you actually calling showMe from? I can't see that anywhere.

Do you really need to support Netscape v4? It is very, very old, and supports few of todays coding standards.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[dizzle]

To show the layer: <a href="javascript:showMe();">Click
Here</a> <br>


well I know, but I am trying to support as many people as possible, no telling who will be looking at this site

 

[BillyRayPreachersSon]

Trust me - drop support for NN4, unless your target audience includes people who won't have upgraded software in years (so maybe grandparents who have archaic computers).

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[dizzle]

ok, i agree but what about the dynamic naming of the layer problem?

 

[BillyRayPreachersSon]

Use this:

function showMe(layerName) {
   document.getElementById(layerName).style.visibility = 'visible';
}

with this:

<a href="javascript:showMe('TWD1');">Click Here</a>

assuming the element has an ID of 'TWD1'.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[dizzle]

i dont see how that work, because if you look at the second to last line of code youll notice that some of the events are firing on mouse down. so the name of the layer, which is assigned, is collected before the function showMe is activated. i was wondering if we could leave the code close to the way it is and retrieve that variable on mouse down, maybe by the use of another function, im not sure

 

[BillyRayPreachersSon]

I think you are going to have to restructure your code. Why don't show us your HTML as well as any other relevant JS, and explain what it is you are actually wanting to achieve? I'm sure someone will be able to help you compact your code down and make it more dynamic.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[dizzle]

this is essentially what my html looks like, I have left of the contents of the calculator because they are not relevant to my question. I would like to have several divLayers(calculators) on this page, with each link passing the name of the layer. the code works now as is, with only one layer.



To show the layer: <a href="javascript:showMe();">Click
Here</a> <br>

<div id="theLayer" style="position:absolute;width:250px;left:345px;top:100px;visibility:hidden;z-index:100">
<table border="0" bgcolor="#336699" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="DoIt=true;if (isN4) ddN4(theLayer)" onMouseout="DoIt=false">
<font face="Arial" color="#FFFFFF" size="2"><b><font size="3">
Calculator</font></b></font> </layer>
</ilayer>
</td>
<td style="cursor:hand" valign="top">
<a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a>
</td>
</tr>

<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- START BODY CONTENT (AFFORDABILITY) -->

<!-- START BODY CONTENT (REFINANCE) -->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>