kostenloser Webspace werbefrei: lima-city


Popups erstellen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Hallo,
    Ich kämpfe mich nun schon seit längerem durch Google, komme aber keinen Schritt voran. Ich möchte kleine Popupfenster erstellen, wie beispielsweise im Browsergame www.the-west.de/. Falls jemand dieses Spiel nicht kennt, versuche ich jetzt mal zu erklären wie das ganze aussieht: Es gibt kleine Popups, die über einen Link aktiviert werden. Diese Popups sind immer vor dem Haupt-Browserfenster, aber wenn es mehrere Popups gibt, ist immer das aktuellste vorne. Dabei blockieren sich die Popups allerdings nicht gegenseitig, also wenn ich 3 Popups offen habe, dann kann ich auch in allen dreien und im Haupt-Browser-Fenster arbeiten. Diese Popups sind nicht einfach ganz normale Browserfenster im Miniformat, sondern komplett selbst designete "Bilder", mit eigenen Grafiken zum schließen, minimieren und neu laden. Wenn ein Fenster minimiert wird, verschwindet es nich in der Taskleiste, sondern in einem bestimmten Bereich des Browserfensters. Soetwas würde ich auch gerne auf meiner Seite einbauen, ich hab auch schon etwas rumprobiert, habe es aber noch nicht so ganz hinbekommen.
    Falls dies nicht in Javascript umsetzbar ist, sondern in PHP muss dieser Beitrag verschoben werden.
    Ich freue mich um jeden lösungsansatz, also wenn jemad nur eine Teillösung hat, kann ich damit vielleicht auch schon etwas anfangen.
    Danke im vorraus für alle Antworten
    THWBM

    PS: Ich kenne mich mittelmäßig mit PHP aus, aber nicht wirklich gut mit Javascript, also nehmt es mir bitte nicht übel, wenn ich bei Javascript die einfachsten Sachen nachfrage
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    Das was du suchst sind keine "popups", damit wirst du nicht viel finden, sondern "javascript widgets".
    Ich würde vorschlagen, du schaust dich vllt ein wenig im Bereich von jQuery UI um, das ist recht einfach, oder du schaust dir Dojo bzw DojoFX an.

    Liebe Grüße
  4. einfaches Beispiel:

    <html>
    <head>
    <title>Layer Popup: open/close</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="javascript" type="text/javascript">
    
    function show(id) {
    	document.getElementById(id).style.visibility = "visible";
    }
    
    function hide(id) {
    	document.getElementById(id).style.visibility = "hidden";
    }
    
    </script>
    
    
    <style type="text/css">
    <!--
    #layer1 { 
      visibility:hidden; 
      position:absolute; 
      top:160px; left:150px; 
      width:500px; height:200px; 
      background:#FFFFAA; 
      padding:0px; 
      border:solid 1px #FF33FF; 
      text-align:center;
    }
    
    .closelink { 
      position:absolute; 
      top:0px; right:0px; 
      margin:0px; 
      padding:8px; 
      background:#FF33FF;
    }
    
    .closelink a { 
      color:#FFFFFF; 
      text-decoration:none;
    }
    
    -->
    </style>
    
    
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    
    <br>
    <br>
    
    <p>Open Layer: <a href="javascript:void(0)" onClick="show('layer1')">OPEN</a></p>
    
    
    <div id="layer1" onClick="hide('layer1')">
     
     <p class="closelink"><a href="javascript:void(0)" onClick="hide('layer1')"><strong>CLOSE</strong></a></p>
     
     <h2>Layer Titel</h2>
      <p>Inhalt ... Bilder ... als HTML ... hier ...</p>
      <p>Blabla bla blablabla ...</p>
      <p>Alternativer Link: <a href="javascript:hide('layer1')"><strong>CLOSE</strong></a></p>
    
    </div>
    
    <br>
    <br> 
    <br>
    
    
    </body>
    </html>



    sollte funktionieren :) .... schön machen kann man es ja dann immernoch :)
    ... Position anpassen, Farben ändern, Inhalt im DIV id="layer1" mit Bild, etc..

    das sollte die Funktion (selbst-)erklären
    ... einfach mit onClick Events die Sichtbarkeit der Ebene an / aus


    EDIT:
    anstatt onClick geht glaub ich auch so: (im href)

    <a href="javascript:show('layer1')"><strong>OPEN</strong></a>
    bzw.
    <a href="javascript:hide('layer1')"><strong>CLOSE</strong></a>

    das ist wohl Geschmacks-Sache ... :)


    Beitrag zuletzt geändert: 26.8.2012 18:23:39 von tela
  5. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Erstmal danke für eure schnellen Antworten,
    Das was ich da bisher veranstaltet habe war eine einzige Katastrophe, aber das sieht alles schonmal ganz gut aus.
    1. An ggamee:
    Ich werde mich mal ein bischen erkundigen und mal gucken, was ich damit anfangen kann, wenn mich das System von tela nicht weiterbringt. Erstmal vielen Dank!
    2. An tela:
    Das sieht ja schonmal ganz gut aus, ist aber nicht ganz dass was ich gesucht habe. Was mir jetzt noch fehlt ist, dass man das Fenster nicht verschieben kann, sondern es verschwindet, sobald man es anklickt. Ich hab auch mal versucht einen Link in "layer1" zu setzen, der dann "layer2" öffnet, das hat auch funktioniert, aber "layer1" war danach zu. Was ich allerdings bräuchte wäre ein Fenster/layer, in dem ich weitere Fenster/layer verlinken kann, sodass aber auch immer das zuvor geöffnete Fenster/layer geöffnet bleibt.
  6. hallo

    also mit meinem kleinen Beispiel oben kann man das Fenster nicht verschiben
    man kann nur die Position vorher festlegen, Abstand von oben und links (in Pixel)

    Wenn der Layer bei Link innerhalb des Layers nicht verschwinden soll,
    dann ersetze einfach die Zeile

    <div id="layer1" onClick="hide('layer1')">

    durch:
    <div id="layer1">


    also den onClick Event im DIV raus machen,
    habe es nur rein, um zu zeigen, dass man auch dort einen onClick-Event einbauen könnte

    einen zweiten Layer kannst Du einfach durch einen Link aufmachen

    <p>Open Layer 2: <a href="javascript:show('layer2')">OPEN Layer 2</a></p>


    den kannst Du auch innerhalb von layer1 platzieren

    <div id="layer1">
      <p class="closelink"><a href="javascript:void(0)" onClick="hide('layer1')"><strong>CLOSE</strong></a></p>
      <h2>Layer Titel</h2>
      <p>Inhalt ... Bilder ... als HTML ... hier ...</p>
      <p>Open Layer 2: <a href="javascript:show('layer2')">OPEN Layer 2</a></p>
    </div>

    genauso wie bei layer1, du musst halt den div als id="layer2" und dazu einen CSS-Style anlegen

    neuer Teil im CSS:
    #layer2 {
      visibility:hidden;
      position:absolute;
      top:370px; left:320px;
      width:500px; height:200px;
      background:#FFFFAA;
      padding:0px;
      border:solid 1px #FF33FF;
      text-align:center;
    }


    und neues HTML

    <div id="layer2">
     <p class="closelink"><a href="javascript:hide('layer2')"><strong>CLOSE</strong></a></p>
     <h2>Layer Nummer 2</h2>
     <p>... ein anderer Inhalt ... auch als HTML ... jaja ...</p>
    </div>


    das klappt ganz gut :) .. habs ausprobiert



    Beitrag zuletzt geändert: 26.8.2012 19:40:39 von tela
  7. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Da bin ich dir aber zuvorgekommen mit dem Ausprobieren. Ich hab bereits alles gemacht (Ein zweites layer in dem ersten velinkt, den HTML und den CSS teil angepasst.). Wie gesagt, ich kenne mich nicht gut mit JS aus, aber das mit dem "onClick" hätte ich sehen müssen, denn das ist ja soetwas von einleuchtend das "onClick" = "on click" = "auf klick" = "beim draufklicken". ;D
    Schade, dass das mit dem verschiben nicht geht, aber trotzdem danke! Ich glaube, damit komme ich schon ein ganzes stück weiter!
    Viele grüße:
    THWBM
  8. m******e

    thwbm schrieb:
    Schade, dass das mit dem verschiben nicht geht
    ^^ Vielleicht suchst Du sowas?

    Und hier der Quelltext.

    Reicht nicht? Dann hier mal schauen.

    ;)
  9. Für das verschieben kannst du auch Jquery UI verwenden. http://jqueryui.com/demos/draggable/
  10. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Nochmal danke für die weiteren Antworten, ich denke mit den links von menschle lässt sich was anfangen. Vielleicht werde ich mich aber auch mit makawas vorschlag beschäftigen
  11. m******e

    thwbm schrieb:
    Nochmal danke für die weiteren Antworten, ich denke mit den links von menschle lässt sich was anfangen. Vielleicht werde ich mich aber auch mit makawas vorschlag beschäftigen
    Ja, mit Jquery lässt sich schnell viel zaubern - wenn man es beherrscht. Allerdings sollte man sich da etwas reinknieen, was sich jedoch lohnt.

    Habe Dir was ohne Jquery gebastelt, was Deinen Wünschen vielleicht etwas näher rückt.
    Wegklickebare, verschiebbare Hinweisboxen (Div´s), mit OnMouseOver- und OnClick-Beispielen.
    Sollte JavaScript deaktiviert sein, gibt es dazu einen Hinweis (was viele gerne vergessen ;).
    Als kleine Spielerei wird beim bewegen eines Div-Container die Position im Fenstertitel angezeigt, und ein kleines Easteregg ist auch dabei.

    Musst Dich mal durchklicken.
    myDiv (Kompletter Quelltext in einem Dokument)
    myDiv2 (Wie ^^ mit kürzeren Funktionsnamen)
    myDiv3 (Kürzere Funktionsnamen, JS und CSS ausgelagert)

    Viel Spaß

    CSS (myDiv3)
    body { margin: 20px;
           padding: 0px;
           overflow: auto;
           font-family: Verdana, Arial, Helvetica, sans-serif;
           font-size: 9pt;
           line-height: 135%;
           background-color: #DF0000;}
    
    h2 { margin: 10px 20px;
         font-size: 20px;
         text-decoration: none;
         Text-align: center;
         cursor: pointer;}
    
    .divClass { padding: 7px;
                position:absolute;
                overflow: hidden;
                z-index:1;
                background-color: #990000;
                border: 1px solid #000000;
                color: #ffffff;
                cursor: move;}
    
    #id1 { left:350px;
           padding: 5px;
           top: 60px;
           width: 310px;
           height: 120px;}
    
    #id2 { left:300px;
           padding: 5px;
           top: 175px;
           background-color: #808000;
           width: 176px;
           height: 310px;}
    
    #id5 { left:20px;
           padding: 5px;
           top: 120px;
           background-color: #808000;
           width: 190px;
           height: 310px;}
    
    #id1,#id2,#id3,#id5 { visibility: hidden;}
    
    a { color: #FFFF00;
        text-decoration: none;
        font-weight: bold; cursor: pointer;}
    
    .bold { margin: 0px;
            font-weight: bold;}
    
    p,p.text { margin: 0px; text-decoration: none;}
    
    .order { text-align: right;}
    
    .order a { text-decoration: none;
               color: #fff;
               font-size: 1.4em;
               font-weight: bold;
               cursor: pointer;}

    JS (myDiv3)
    var d = document,
    objDrag = null, // Element, über dem Maus bewegt wurde

    mouseX = 0, // X-Koordinate der Maus
    mouseY = 0, // Y-Koordinate der Maus
    offX = 0, // X-Offset des Elements, das geschoben werden soll
    offY = 0; // Y-Offset des Elements, das geschoben werden soll

    // Browserweiche
    IE = d.all&&!window.opera;
    DOM = d.getElementById&&!IE;

    // Initialisierungs-Funktion
    function init(){
    // Initialisierung der Überwachung der Events
    d.onmousemove = doDrag;
    d.onmouseup = stopDrag;
    }

    // Wird aufgerufen, wenn die Maus über einer Box gedrückt wird
    function startDrag(objElem) {
    // Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich
    objDrag = objElem;

    // Offsets im zu bewegenden Element ermitteln
    offX = mouseX - objDrag.offsetLeft;
    offY = mouseY - objDrag.offsetTop;
    }

    // Wird ausgeführt, wenn die Maus bewegt wird
    function doDrag(ereignis) {
    // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
    mouseX = (IE) ? window.event.clientX : ereignis.pageX;
    mouseY = (IE) ? window.event.clientY : ereignis.pageY;

    // Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
    if (objDrag != null) {
    // Element neue Koordinaten zuweisen
    posX = (mouseX-offX); posY = (mouseY-offY);
    objDrag.style.left = posX + "px";
    objDrag.style.top = posY + "px";

    // Bei Bewegung Position im Fenstertitel ausgeben; kann auch gelöscht werden
    document.title="X:"+posX+" Y:"+posY;if(posX+posY==0){alert('Toll!\n\n0 Punkte!\n\n'+posX+
    ' + ( '+posY+' ) = 0\n\n:P');objDrag.style.left="200px";objDrag.style.top="200px";objDrag=null};
    }
    }

    // Wird ausgeführt, wenn die Maustaste losgelassen wird
    function stopDrag(ereignis) {
    // Objekt löschen -> beim Bewegen der Maus wird Element nicht mehr verschoben
    objDrag = null;

    // Standarttext im Fenstertitel ausgeben; kann auch gelöscht werden
    document.title = "Div-Container mit Maus bewegen";
    }

    // Funktion zum ein/ausblenden der Div's
    function showDiv(divId,divShow){if(d.getElementById) d.getElementById(divId).style.visibility=(divShow)?'visible':'hidden'; else d.all(divId).style.visibility=(divShow)?'visible':'hidden';}

    // Funktion kuerzen. DivID: s = show (1) / h = hide (0)
    function s1(){showDiv('id1',1)}
    function s2(){showDiv('id2',1)}
    function h1(){showDiv('id1',0)}
    function h2(){showDiv('id2',0)}

    Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen.
  12. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    menschle schrieb:
    Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen.

    Mach das, ich antworte jetzt mal, damit du wieder antworten kannst. Ich möcht dir und allen Anderen für ihre Hilfe sehr danken.
  13. m******e

    thwbm schrieb:
    menschle schrieb:
    Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen.

    Mach das, ich antworte jetzt mal, damit du wieder antworten kannst. Ich möcht dir und allen Anderen für ihre Hilfe sehr danken.
    ^^ Eine Frage hätte ich dazu: Haste es Dir angeschaut, oder nicht?
    Geht aus Deiner Antwort nicht hervor. :wink:

    Hier der Restquelltext:
    Html (myDiv3)
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Div-Container mit Maus bewegen</title>
    <link rel="stylesheet" type="text/css" href="all.css" />
    <script src="showDiv.js" type="text/javascript"></script>
    </head>
    
    <body onload="init();">
    <script>d.write('<h2 id="id4" onclick="s1();">Hallo, ich bin ein Link<br /><br /><img src="02.gif" width="24" height="36" /></h2>');</script>
    <noscript><h2 id="id4">Hallo, ich w&auml;re ein Link.<br /><br />Leider ist JavaScript aber nicht aktiviert.<br /><br /><img src="09.gif" width="24" height="36" /></h2></noscript>
    
     <div id="id1" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;">
      <div class="order"><a onclick="h1()">X</a></div>
       <p class="bold">Hallo, ich bin Div 1.</p><br />
       Bewege mich!<br /><br />Div 2 sehen wollen? <a onclick="s2();">Klicken!</a>
     </div>
    
     <div id="id2" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;">
      <div class="order"><a onclick="h2()">X</a></div>
       <p class="bold">Hallo, ich bin Div 2.</p><br />
       Ich kann ebenfalls mittels Drag & Drop bewegt werden.<br /><br />
       <p align="center"><img src="cat.jpg" width="150" height="150" /></p><br />
       Reicht nicht? <a onclick="showDiv('id3',1);">Div 3!</a>
     </div>
    
     <div id="id5" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;">
       <p class="bold">Ey! <img src="16.gif" width="24" height="36" /><br />
       Wenn Du alle Div's ausblendest, siehste doch nix mehr!<br />
       <img src="19.gif" width="24" height="36" /></p><br />
       Achso, ich bin Div 5.<br />
       <img src="07.gif" width="24" height="36" /><br /><br />
       Wenigstens das Menu sollte doch sichtbar bleiben.<br /><br />
       <a onclick="showDiv('id3',1);showDiv('id5',0);">Schlie&szlig; mich! <img src="06.gif" width="24" height="36" style="border:none;" /></a>
     </div>
    
    <div class="text" id="id3">
    <p class="bold">OnMouseOver</p>
    <a onmouseover="s1()">Div 1 anzeigen</a><br />
    <a onmouseover="s2()">Div 2 anzeigen</a><br />
    <a onmouseover="h1()">Div 1 ausblenden</a><br />
    <a onmouseover="h2()">Div 2 ausblenden</a><br />
    <br />
    <a onmouseover="s1();s2()">Beide Div's anzeigen</a><br />
    <a onmouseover="h1();h2()">Beide Div's ausblenden</a><br />
    
    <br />
    <p class="bold">OnClick</p>
    <a onclick="s1()">Div 1 anzeigen</a><br />
    <a onclick="s2()">Div 2 anzeigen</a><br />
    <a onclick="h1()">Div 1 ausblenden</a><br />
    <a onclick="h2()">Div 2 ausblenden</a><br />
    <br />
    <a onclick="s1();s2()">Beide Div's anzeigen</a><br />
    <a onclick="h1();h2()">Beide Div's ausblenden</a><br />
    <br />
    <a onclick="showDiv('id4',1);showDiv('id3',0);">Menu ausblenden</a><br />
    <a onclick="h1();h2();showDiv('id3',0);showDiv('id4',0);showDiv('id5',1)">Alle Div's ausblenden!</a>
    </div>
    
    </body>
    </html>
  14. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    menschle schrieb:
    ^^ Eine Frage hätte ich dazu: Haste es Dir angeschaut, oder nicht?
    Geht aus Deiner Antwort nicht hervor. :wink:

    Ich habe es mir angeschaut oder genauer ich schaue es mir immernoch an :wink:.
    Ich glaube das ist, was ich gesucht habe, Danke
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!