S
Scubasteve
Gast
Hi jungs,
erstmal ein freundliches Hallo an alle
jetzt zu meiner Frage ich habe ein kleines Script gefunden quasi ein Ilayer per java
Das ist ein saugeiles Popup was design technisch komplett anpassbar ist ...
und man kann es frei herumschieben ...
es gibt 2 Dateien einmal eine Popup.js und eine Index.html deren inhalt ich gleich noch posten werde...
momentan bekommt man das popup nur wenn die <div> anweisung in der Index.html irgendwo mitladen lasse, was aber auch einwandfrei klappt !!!
jetzt meine Frage ist es machbar dieses popup auch über ein klick zu starten ???
ich hau euch ma den Quellcode von der Popup.js rein...
Das ist der inhalt der Index.html
Ich würde mich freuen wenn mir einer helfen kann ..
gruss Scuba
erstmal ein freundliches Hallo an alle
jetzt zu meiner Frage ich habe ein kleines Script gefunden quasi ein Ilayer per java
Das ist ein saugeiles Popup was design technisch komplett anpassbar ist ...
und man kann es frei herumschieben ...
es gibt 2 Dateien einmal eine Popup.js und eine Index.html deren inhalt ich gleich noch posten werde...
momentan bekommt man das popup nur wenn die <div> anweisung in der Index.html irgendwo mitladen lasse, was aber auch einwandfrei klappt !!!
jetzt meine Frage ist es machbar dieses popup auch über ein klick zu starten ???
ich hau euch ma den Quellcode von der Popup.js rein...
Code:
//Popup Box- By Jim Silver @ [email]jimsilver47@yahoo.com[/email]
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(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)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////
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 initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
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=initializedrag
document.onmouseup=new Function("dragapproved=false")
////drag drop functions end here//////
function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
Das ist der inhalt der Index.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" src="popup.js"></script>
</head>
<body>
<div id="showimage" style="position:absolute;width:200px;left:50;top:50">
<table width="200" border="0" cellspacing="0" cellpadding="1" bgcolor="#D1D1D1">
<tr>
<td width="100%">
<table border="0" width="200" cellspacing="" cellpadding="1" bgcolor="#FFffff">
<tr>
<td width="100%" id="dragbar" class="navheadleft" style="padding-top: 1px;padding-left: 5px; padding-bottom: 1px; cursor: hand;"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseOver="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseOut="dragswitch=0"><font face="Arial" color="#D1D1D1" style="text-decoration: none; font-style: normal; font-size: 10px;">INFO / Hier das Fenster verschieben</font></layer></ilayer></td>
<td class="navheadleft" style="padding-top: 1px;padding-left: 5px; padding-bottom: 1px; cursor: hand;">[url="#"][b]<font face="Arial" color="#D1D1D1" style="text-decoration: none; font-style: normal; font-size: 10px;">X</font>[/b][/url]&</td>
</tr>
<tr>
<td width="200" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<table width="200" border="0" cellspacing="0" cellpadding="1" bgcolor="#D1D1D1">
<tr>
<td width="100%" style="background-color: #ffffff;">Hier würde jetzt Euer Test stehen ...</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Ich würde mich freuen wenn mir einer helfen kann ..
gruss Scuba