JS Draggable Layer Not working?

Draggable layer not functioning in frames (document.all, document.layer)

[The_Warden]

Hi. I'm trying to use someone else's JavaScript code to create a draggable layer. Below is the JS/HTML code. Now it all is quite basic and nothing to complicated here but I'm confused and not sure what to do here. The code works great in a single HTML file. But in my case the code needs to be placed in a frame (I know, I know) and I think that is why properties of this code are not working. The draggable layer appears when I click on the specific link but it will not drag nor does it allow me to position the layer when used in frames.

I thought it might have something to do with document.all. I'm not sure how this works in a frame environment.

Any ideas? Any direction to a solution would be greatly appreciated, thanks!

Oh yeah on another note it's my understanding that document.all and document.layer is a proprietary DOM and is not a standard. How could I fix it to be standard supported code but also work in IE and Mozilla?

JS Code

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

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

function ddInit(e){
topDog=isIE? "BODY" : "HTML";
whichDog=isIE? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE? event.clientX : e.clientX;
offsety=isIE? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}

function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}

function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
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 (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function hideMe(){
if (isIE¦¦isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
if (isIE¦¦isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

here's the html code

<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:500;visibility:hidden">
<table border="0" width="250" bgcolor="#424242" 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="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="#FFFFFF">Layer Title</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">Close</font></a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->
This is where your content goes.<br>
It can be any html code or text.<br>
Remember to feed the reindeer.<br>
Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->

[tedster]

You're right about document.all and document.layers. They're not standard DOM and you're headed for trouble if you cobble something together today that won't be FORWARD compatible when browsers drop their legacy support.

If you want to support both standards and legacy browsers, you will need to begin with good browser sniffing. Then run the standard code for all browsers that support the DOM. Feed your old code ONLY to the antiques.

For instance, you'll find that recent IE will offer backward support for a lot of legacy js, but it will run most standard DOM code as well -- so you're better off sending standard code to every version that will accept it.

The interaction with a frameset does add in some complication as well. I'd suggest looking for different code -- either from another developer who offers their scripts nfree on the web, or you could contract a javascript jockey, or rewrite it yourself from the ground up.

I doubt that any code will let you drag a div from one frame into another. At best, you'll be limited to dragging within the originating frame.

[The_Warden]

Okay but if I'm not to use document.all and document.layers what am I suppose to use in place of it? At present this is the only way I know of how. Lots of discussion on this issue but I've seen nothing on how to deal with it.

Yes I might have to end up writting something myself. I've just tried using Matt Kruse javascript code for popup layers and issues with that too in frames, this time though it only seems to affect Mozilla. Argh, frustrating.

[The_Warden]

Can anyone assit me in getting this popup layer to position in Mozilla? I've used code from codelifter.com and code from by Matt Kruse and both do not seem to work in Mozilla. I'm begining to wondering if popup layer positioning actually works in Mozilla or not.

I can post code from Matt Kruse if needed... or if anyone out there replies <G>.