Ergebnis 1 bis 10 von 10

Thema: Java Script - Layer runterfahren lassen

  1. #1
    Großmeister(in) Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Java Script - Layer runterfahren lassen

    Hallo,
    ich habe um besser CSS und Java Script zu lernen vorgehabt einen
    Layer runterfahren zu lassen, wenn man auf einen Button klickt.

    Jedoch wird der Layer nicht angezeigt und ich habe schon mehre
    Male versucht rauszufinden wieso aber es wird nichts ausgegeben,
    der springt anscheinend nichtmal in die Funktion...

    HTML-Code:
    <style type="text/css">
    
    .content
    {
        font-family:Arial;
        font-size:12px;
        width:500px;
        margin:0px auto;
        letter-spacing: 1px;
        
    }
    h1
    {
        font-family:Arial;
        font-size:20px;
        color:#D53035;
    }
    #layer
    {
        visibility:hidden;
        background-color:#D53035;
        font-family:Arial;
        font-size:20px;
        color:#FFFFFF;
        width:500px;
        height:200px;
        letter-spacing: 1px;    
        position:fixed;
        left:30%;
        top:0%;
    
        
    }
    </style>
    
    <script type="text/javascript">
    var i = 1;
    function layerrunterfahren()
    {
        document.getElementById('layer').style.visibility="visible";
        alert('test');
        if(i<=10)
        {
            document.write('if');
            document.getElementById('layer').style.'top'=i+"%";
            i++;
            setTimeout('layerrunterfahren()', 50);     
        }
        else
        {
            document.write('ELSE');
        }
    }
    function layerschliessen()
    {
        document.getElementById('layer').style.visibility="hidden";
    }
    </script>
    <input type="submit" name="open" value="open" onClick="layerrunterfahren()">
    <div id="layer">
    <center>
    <br>
    <br>
    Dies hier ist der Layer!! :)
    <br>
    <br>
    <br>
    <input type="submit" name="close" value="Schließen [ X ]" onClick="layerschliessen()">
    </center>
    </div>
    
    
    <div class="content">
    <center>
    </center>
    <br>
    <br>
    <h1>Hier steht der Titel</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    <br><br>
    <h1>Das ist Titel 2</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    -

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Java Script - Layer runterfahren lassen

    Code:
    <html>
    <head>
      <title></title>
      <style type="text/css">
    
    .content
    {
        font-family:Arial;
        font-size:12px;
        width:500px;
        margin:0px auto;
        letter-spacing: 1px;
        
    }
    h1
    {
        font-family:Arial;
        font-size:20px;
        color:#D53035;
    }
    #layer
    {
        visibility:hidden;
        background-color:#D53035;
        font-family:Arial;
        font-size:20px;
        color:#FFFFFF;
        width:500px;
        height:200px;
        letter-spacing: 1px;    
        position:fixed;
        left:30%;
        top:0%;
    
        
    }
    </style>
    
    <script type="text/javascript">
    var i = 1;
    function layerrunterfahren()
    {
        document.getElementById('layer').style.visibility="visible";
        alert('test');
        if(i<=10)
        {
    
            document.getElementById('layer').style.top=i+"%";
            i++;
            setTimeout('layerrunterfahren()', 50);     
        }
        else
        {
            alert("fraat");
        }
    }
    function layerschliessen()
    {
        document.getElementById('layer').style.visibility="hidden";
    }
    </script>
    </head>
    <body>
    
    <input type="submit" name="open" value="open" onClick="layerrunterfahren()">
    <div id="layer">
    <center>
    <br>
    <br>
    Dies hier ist der Layer!! :)
    <br>
    <br>
    <br>
    <input type="submit" name="close" value="Schließen [ X ]" onClick="layerschliessen()">
    </center>
    </div>
    
    
    <div class="content">
    <center>
    </center>
    <br>
    <br>
    <h1>Hier steht der Titel</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    <br><br>
    <h1>Das ist Titel 2</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    </div>
    </body>
    </html>
    so siehste mal wie dein script funzt..

    und wegen gleitender layer guck dir mal des hier an: http://home.arcor.de/synaptic/JS_basics/layer.html
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    So funktionierst schonmal im Firefox:
    HTML-Code:
    <style type="text/css"> 
    
    .content 
    { 
        font-family:Arial; 
        font-size:12px; 
        width:500px; 
        margin:0px auto; 
        letter-spacing: 1px; 
         
    } 
    h1 
    { 
        font-family:Arial; 
        font-size:20px; 
        color:#D53035; 
    } 
    #layer 
    { 
        visibility:hidden; 
        background-color:#D53035; 
        font-family:Arial; 
        font-size:20px; 
        color:#FFFFFF; 
        width:500px; 
        height:200px; 
        letter-spacing: 1px;     
        position:fixed; 
        left:30%; 
        top:0%; 
        border:2px solid #000000; 
    
         
    } 
    </style> 
    
    <script type="text/javascript"> 
    var i = 1; 
    function layerrunterfahren() 
    { 
        document.getElementById('layer').style.visibility="visible"; 
        if(i<=10) 
        { 
            document.getElementById('layer').style.top=i+"%"; 
            i++; 
            setTimeout('layerrunterfahren()', 10);      
        } 
    } 
    function layerschliessen() 
    { 
        document.getElementById('layer').style.visibility="hidden"; 
        i = 1; 
    } 
    </script> 
    <div id="layer"> 
    <center> 
    <br> 
    <br> 
    Dies hier ist der Layer!! :) 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <input type="submit" name="close" value="Schließen [ X ]" onClick="layerschliessen()"> 
    </center> 
    </div> 
    
    
    <div class="content"> 
    <input type="submit" name="open" value="Layer öffnen" onClick="layerrunterfahren()"> 
    <center> 
    </center> 
    <br> 
    <br> 
    <h1>Hier steht der Titel</h1> 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    <br><br> 
    <h1>Das ist Titel 2</h1> 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren.  
    </div>
    -

  4. #4
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    und wegen gleitender layer guck dir mal des hier an: http://home.arcor.de/synaptic/JS_basics/layer.html
    Hallo,
    das funktioniert wie gesagt schon bei mir nur leider biser alles
    perfekt im Firerfox.


    Hier mal ein Video:

    • der IE zeigt die Inhalte nicht zentriert an (marging: 0px auto
    • ebensowenig gibt er den Platz des Layers frei, wenn dieser hidden ist (an welcher CSS Einstellung dies liegt weiß ich noch nicht vielleicht position? oder visibility?)

    http://www.xup.in/dl,67345054/firefoxielayer.rar/
    -

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Java Script - Layer runterfahren lassen

    also visibility:hidden hält platz frei und display:none lässt das objekt komplett verschwinden...
    im ie? welche version denn? und an sich is des von mir verlinkte script crossbrowsertauglich
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    also visibility:hidden hält platz frei und display:none
    Habe es dann alles auf display="block" und display="none" umgestellt.

    im ie? welche version denn?
    Version 7

    crossbrowsertauglich
    Konnte durch Google nichts finden heißt es für alle Browser tauglich?
    Fande es ehrlich gesagt ziemlich kompliziert im Vergleich zu meinem.
    Das mit dem visibility Problem ist nun behoben allerdings noch nicht, dass es auch im IE zentriert ist und runterläuft.
    Ich kann mir nicht vorstellen das der IE diese CSS Elemente nicht unterstützt, da sie bei CSS 4 YOU für den IE funktionierend markiert sind.
    Geändert von Darkxor (13.04.2009 um 22:41 Uhr)
    -

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Java Script - Layer runterfahren lassen

    jup crossbrowsertauglich bedeutet es funzt in jedem browser..
    auch wenns komplizierter scheint.. grundlegend ist es einfach und funktioniert so wie es soll
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    Mit ziemlich viel rumgetrickse habe ich es nun auch bei dem IE zum
    Laufen bekommen.

    Nur der Abstand des Close Buttons ist im FF im Vergleich zum IE noch
    ziemlich anders. Unterschiedliche Browser ...


    HTML-Code:
    <style type="text/css">
    
    .content
    {
        font-family:Arial;
        font-size:12px;
        width:500px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        letter-spacing: 1px;
        
    }
    h1
    {
        font-family:Arial;
        font-size:20px;
        color:#D53035;
    }
    #layer
    {
        display:none;
        background-color:#D53035;
        font-family:Arial;
        font-size:20px;
        color:#FFFFFF;
        width:500px;
        height:200px;
        letter-spacing: 1px;    
        top:0%;
        left:30%;
        border:2px solid #000000;
        position:absolute;
        
    }
    </style>
    
    <script type="text/javascript">
    var i = 1;
    function layerrunterfahren()
    {
        document.getElementById('layer').style.display="block";
        if(i<=20)
        {
            document.getElementById('layer').style.top=i+"%";
            i++;
            setTimeout('layerrunterfahren()', 10);     
        }
    }
    function layerschliessen()
    {
        document.getElementById('layer').style.display="none";
        i = 1;
    }
    </script>
    <div id="layer">
    <center>
    <br>
    <br>
    <b>Fehler!!!</b>
    <br>
    <br>
    Bitte versuche es nocheinmal.
    <br/>
    <br/>
    <br/>
    <input type="submit" name="close" value="Schließen [ X ]" onClick="layerschliessen()">
    </center>
    </div>
    <center>
    <div class="content">
    <input type="submit" name="open" value="Layer öffnen" onClick="layerrunterfahren()">
    <center>
    </center>
    <br>
    <br>
    <h1>Hier steht der Titel</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    <br><br>
    <h1>Das ist Titel 2</h1>
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    Am Morgen des 4ten Julis stand Text im Inhalt und der Text diente nur als Dekoration um den Layer zu demonstrieren. 
    </div>
    </center>
    -

  9. #9
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    Im Konqueror klappt es auch.

  10. #10
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Java Script - Layer runterfahren lassen

    Chrome auch IE nicht XD
    (Was den Close Button Abstand angeht.)
    Zudem ist dies wohl nicht die schönste Möglichkeit das Problem zu lösen indem man
    anstatt im CSS margin: 0px auto; nutzt vor und nach dem div den center Tag setzt,
    aber nur so klappte es im IE.
    -

Ähnliche Themen

  1. Java Script
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 31.10.2007, 19:47
  2. Java-Bild tauschen bei onmouseover und bei onclick so lassen
    Von Rene1974 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 19.03.2007, 13:13
  3. Komisches Fenster beim runterfahren
    Von Minksi im Forum Computer - Internet Forum
    Antworten: 13
    Letzter Beitrag: 09.12.2006, 13:56
  4. Java Script
    Von Snowfront im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 20.11.2006, 16:15
  5. Java-Script und select.
    Von GreenRover im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.02.2005, 15:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •