Combining CSS with Javascript (drag & drop)?

Drag script combined with a centered layer...how can i combine both?

[Mobull]

I'm not a hero concerning Javascript but I found a nice script which can move my layer. It all works nice if I have the layer positioned somewhere hardcoded. The draggable layer is from CodeLifter.com and works very good if I have a layer positioned like: "left:100px;top:100px;".

Now I want to combine this script with a CSS style I use to center a layer horizontal and vertical. Somehow I cannot find a way to combine both. I hope someone of you can tell me if it is even possible what I want since the centered layer uses a 50% instead of a 50px marge. Here's parts of both codes:

CSS code:

body{
background-color: Black;color: White;font-size: 10px;
height:100%;
}
#horizon 
{
background-color: #0ff;
text-align: center;
position: absolute;top: 50%;left: 0px;width: 100%;height: 0px;
overflow: visible;
visibility: visible;
display: block;
z-index: 0;
}
#theLayer 
{
margin-left: -400px;position: absolute;top: -236px;left: 50%;width: 800px;height: 472px;
visibility: visible
z-index: 1;
text-align: center;
}

HTML code:

<div id="horizon">
<div id="theLayer">
 My content goes here
</div>
</div>

The Javascript to move a layer (theLayer)

<script language="JavaScript1.2">
// 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);
 }
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>

anyway to make "theLayer" center onload....then move when someones want to move it?

[orion_rus]

Hello
if i understand right. The key is:

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

u need to apply this onmousedown and onmouseout to your main div like:
<div id="horizon" onmousedown=ddInit() onmouseup=Function("ddEnabled=false")>
<div ....
content
</div>
</div>
I hope i help)

[orion_rus]

Oh
besides ddinit() u should write ddinit(event) i think