[JavaScript] mehre Popup Boxen auch im Firefox?

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [JavaScript] mehre Popup Boxen auch im Firefox?

    PHP-Code:
    <html>
    <    head>
    <    script language="JavaScript1.2">
    /*<![CDATA[*/
    var ns4=document.layers
    var ie4=document.all
    var ns6=document.getElementById&&!document.all



    //Drag und Drop Funktion fuer ie4+ und 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     initializiere_drag(pop,drag){

            crossobj=ns6? document.getElementById(pop) : document.all[pop];
        var     firedobj=ns6? e.target : event.srcElement;
        var     topelement=ns6? "HTML" : "BODY";

        while (    firedobj.tagName!=topelement && firedobj.id!=drag){
                firedobj=ns6? firedobj.parentNode : firedobj.parentElement
            }

        if (    firedobj.id==drag){
                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");
    //Drag und Drop Funktionen enden hier//

    function box_weg(){
        if (    ie4||ns6)
                crossobj.style.visibility="hidden"
    }
    /*]]>*/
    </script>

    <    style>
    .    window{
            margin-bottom: 0px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            padding: 0px;
            width: 250px;
            display:block;
            position:absolute;
    }
    </    style>
    </    head>
    <    body>

    <    div id="pops" class="window" style="left:20px;top:20px" onmousedown="initializiere_drag('pops','dragbar');">
        <    table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
            <    tr>
            <    td width="100%">
                <    table border="0" width="100%" cellspacing="0" cellpadding="0" height="34">
                <    tr>
                <    td id="dragbar" style="cursor:hand" onmousedown="initializiere_drag('pops','dragbar');" width="100%">
                    <    font color="#FFFFFF">Pop-up-Box</font>
                </    td>
                <    td style="cursor:hand">
                    <    a href="#" onClick="box_weg(); return false;"><img src="zu.gif" border=0></a>
                </    td>
                </    tr>
                <    tr>
                <    td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
                <!--     Fuegen Sie Ihre Inhalte hier ein -->
                    Informationen, Informationen und Informationen...
                <!--     Fuegen Sie Ihre Inhalte bitte hier ein -->
                </    td>
                </    tr>
                </    table>
            </    td>
            </    tr>
        </    table>
    </    div>

    </    body>
    </    html> 
    Im Explorer habe ich es hinbekommen das ich mehrere Boxen definieren kann um Sie zu verschieben.
    Im Firefox scheitere ich an "e.target" genauer gesagt weiß ich
    nicht wie ich das "e" definieren soll!
    Stichworte: -
  • #2
    Für alle die es mal brauchen.
    Mein Problem war das ich nicht wusste das man "event" mit der Funktion bei FF übergeben muß.
    Hier der Code

    PHP-Code:
    <html>
    <    head>
    <    script language="JavaScript1.2">
    /*<![CDATA[*/
    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    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

            }
    }
    /*
    @param    string    Name der Popup Box welche bewegt werden soll
    @param    string    Name der Drag Bar mit der die Box bewegt werden kann
    @param    event
    @return
    */
    function initializiere_drag(pop,drag,e){

            crossobj=ns6? document.getElementById(pop) : document.all[pop];
        var     firedobj=ns6? e.target : event.srcElement;
        var     topelement=ns6? "HTML" : "BODY";

        while (    firedobj.tagName!=topelement && firedobj.id!=drag){
                firedobj=ns6? firedobj.parentNode : firedobj.parentElement
            }

        if (    firedobj.id==drag){
                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.onmouseup=new Function("dragapproved=false");

    /*
    @param    string    Name der Popup Box welche ausgeblendet wird
    @return
    */
    function box_weg(pop){
        if (    ie4||ns6){
                crossobj=ns6? document.getElementById(pop) : document.all[pop];
                crossobj.style.visibility="hidden";
        }
    }
    /*]]>*/
    </script>

    <    style>
    .    window{
            margin-bottom: 0px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            padding: 0px;
            width: 250px;
            display:block;
            position:absolute;
    }
    </    style>
    </    head>
    <    body>

    <    div id="pops" class="window" style="left:20px;top:20px">
        <    table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
            <    tr>
            <    td width="100%">
                <    table border="0" width="100%" cellspacing="0" cellpadding="0" height="34">
                <    tr>
                <    td id="dragbar" style="cursor:hand" onmousedown="initializiere_drag('pops','dragbar',event);" width="100%">
                    <    font color="#FFFFFF">Pop-up-Box</font>
                </    td>
                <    td style="cursor:hand">
                    <    a href="#" onClick="box_weg('pops'); return false;"><img src="zu.gif" border=0></a>
                </    td>
                </    tr>
                <    tr>
                <    td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
                <!--     Fuegen Sie Ihre Inhalte hier ein -->
                    Informationen, Informationen und Informationen...
                <!--     Fuegen Sie Ihre Inhalte bitte hier ein -->
                </    td>
                </    tr>
                </    table>
            </    td>
            </    tr>
        </    table>
    </    div>
    <    div id="pops2" class="window" style="left:20px;top:20px">
        <    table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
            <    tr>
            <    td width="100%">
                <    table border="0" width="100%" cellspacing="0" cellpadding="0" height="34">
                <    tr>
                <    td id="dragbar2" style="cursor:hand" onmousedown="initializiere_drag('pops2','dragbar2',event);" width="100%">
                    <    font color="#FFFFFF">Pop-up-Box</font>
                </    td>
                <    td style="cursor:hand">
                    <    a href="#" onClick="box_weg('pops2'); return false;"><img src="zu.gif" border=0></a>
                </    td>
                </    tr>
                <    tr>
                <    td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
                <!--     Fuegen Sie Ihre Inhalte hier ein -->
                    Informationen, Informationen und Informationen...
                <!--     Fuegen Sie Ihre Inhalte bitte hier ein -->
                </    td>
                </    tr>
                </    table>
            </    td>
            </    tr>
        </    table>
    </    div>
    </    body>
    </    html> 

    Kommentar

    Vorherige template Weiter
    Lädt...
    X