nicht angemeldet
Script für bewegliches div dynamisch machen
Hi zusammen,
ich hab hier ein Script für ein bewegliches div, praktisch ein "Nachbau" einer Popup-Box. Nun würde ich dies gerne unabhängig vom Namen machen (mehrere Boxen auf einer Seite, nur ein Script).
Hab mich schon ergebnislos versucht - hoffentlich kann mir jemand weiterhelfen!
Hier das Script:
<script language="javascript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_drop_ns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializiere_drag(e){
crossobj=ns6? document.getElementById("theBox") : document.all.theBox
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializiere_drag
document.onmouseup=new Function("dragapproved=false")
function box_weg(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.theBox.visibility="hide"
}
</script>
Und hier das div:
<div id="theBox" style="BORDER-RIGHT:#000000 1px; BORDER-TOP:#000000 1px; Z-INDEX:110; FILTER:alpha(opacity=95); LEFT:53px; BORDER-LEFT:#000000 1px; WIDTH:462px; BORDER-BOTTOM:#000000 1px; POSITION:absolute; TOP:155px; BACKGROUND-COLOR:#f0f0f0; layer-background-color:#F0F0F0">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="white" width="100%" style="background-color:#60857E;" height="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="34">
<tr>
<td class="white" id="dragbar" style="cursor:hand;background-color:#60857E;" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_drop_ns(theBox)" onMouseout="dragswitch=0">
<font color="#FFFFFF">Aktuelle Info</font>
</layer></ilayer></td>
<td class="white" style="cursor:hand;background-color:#60857E;"><a href="#" onClick="box_weg();return false"><img src="images/x_blue.gif" border=0></a></td>
</tr>
<tr>
<td class="white" width="100%" style="padding:10px;background-color:#F0F0F0;" colspan="2">
<!-- *********************************************************** -->
<p>Hier der Inhalt der Box </p>
<!-- *********************************************************** -->
</td></tr></table>
<td valign="top"></td>
</tr>
</table>
</div>
Danke!
Hans
-
Hallo Hans,
die Änderungen an dem Script dauert doch zu lange wie ich festgestellt habe. Schaue dir mal das hier an:
http://www.dhtmlcentral.com/script/search.asp?category=other
(auf "View Demo" beim Window Script)Ich denke das ist das was du willst, und noch mehr...
Gruß
Carsten
-
Hi Carsten,
ja, das ist super, vielen Dank!
http://www.dhtmlcentral.com/script/search.asp?category=other
(auf "View Demo" beim Window Script)Gruß, Hans
-