Java Script - Layer runterfahren lassen

Darkxor

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

<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>

Alles anzeigen

synaptic

HTML

<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>

Alles anzeigen

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

Darkxor

So funktionierst schonmal im Firefox:

HTML

<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>

Alles anzeigen

Darkxor

Zitat

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/
http://home.arcor.de/synaptic/JS_basics/layer.html

synaptic

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

Darkxor

Zitat

also visibility:hidden hält platz frei und display:none

Habe es dann alles auf display="block" und display="none" umgestellt.

Zitat

im ie? welche version denn?

Version 7

Zitat

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.

synaptic

jup crossbrowsertauglich bedeutet es funzt in jedem browser..
auch wenns komplizierter scheint.. grundlegend ist es einfach und funktioniert so wie es soll

Darkxor

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

<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>

Alles anzeigen

The User

Im Konqueror klappt es auch.

Darkxor

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.

Tags