homepage Welcome to WebmasterWorld Guest from 54.237.98.229
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

    
JS Draggable Layer Not working?
Draggable layer not functioning in frames (document.all, document.layer)
The_Warden

10+ Year Member



 
Msg#: 265 posted 5:05 pm on Jan 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 265 posted 9:43 pm on Jan 23, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 265 posted 4:46 pm on Jan 24, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 265 posted 10:07 pm on Jan 27, 2003 (gmt 0)

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>.

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