michaelsinterface.de

move.layer | vertical

Die CSS-Eigenschaft top definiert die obere Startposition für ein HTML-Element.

Mit dem hier vorgestellten Script wird der Wert für die obere Position manipuliert, und das Element im Anzeigefenster an eine festgelegte Position vertikal bewegt.

JavaScript

Der Script-Code wird im Dokument-Header notiert:

function init(){
        if(document.getElementById){
        obj = document.getElementById("boxDiv");
        obj.style.top = "-170px";
        }
}

function slideDown(){
        if(obj){
                if(parseInt(obj.style.top) < -5){
                        obj.style.top = parseInt(obj.style.top) + 10 + "px";
                        setTimeout("slideDown()",50);
                }
        }
}

function slideUp(){
        if(obj){
                if(parseInt(obj.style.top) > -170){
                        obj.style.top = parseInt(obj.style.top) - 10 + "px";
                        setTimeout("slideUp()",50);
                }
        }
}

window.onload = function(){
        init();
        slideDown();
}

CSS

Für das Element wird im ID-Selektor #boxDiv mit der top-Eigenschaft die gewünschte Startposition festgelegt - in diesem Beispiel liegt die Box durch den negativen top-Wert im nicht-sichtbaren Bereich des Fensters:

#boxDiv {
position: absolute;
left: -1px;
top: -170px;
z-index: 1000;
width: 140px;
height: 180px;
background: #eaeaea;
}

Funktionsaufruf

Der Funktionsaufruf lässt sich über den onclick- oder onmouseover / onmouseout-Eventhandler implementieren:

<a href="#" onclick="slideDown()">slideDown</a> | <a href="#" onclick="slideUp()">slideUp</a>

<a href="#" onmouseover="slideDown()" onmouseout="slideUp()">slideDown/Up</a>

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: move.layer :::</title>

<script type="text/javascript">
<!--
function init(){
        if(document.getElementById){
        obj = document.getElementById("boxDiv");
        obj.style.top = "-170px";
        }
}
function slideDown(){
        if(obj){
                if(parseInt(obj.style.top) < -5){
                        obj.style.top = parseInt(obj.style.top) + 10 + "px";
                        setTimeout("slideDown()",50);
                }
        }
}
function slideUp(){
        if(obj){
                if(parseInt(obj.style.top) > -170){
                        obj.style.top = parseInt(obj.style.top) - 10 + "px";
                        setTimeout("slideUp()",50);
                }
        }
}
window.onload = function(){
        init();
        slideDown();
}
//-->
</script>

<style type="text/css">
#boxDiv {
position: absolute;
left: -1px;
top: -170px;
z-index: 1000;
width: 140px;
height: 180px;
background: #eaeaea;
}
p {
text-align: right;
}
</style>

</head>
<body>

<p>onclick:
    <a href="#" onclick="slideDown()">slideDown</a> | <a href="#" onclick="slideUp()">slideUp</a>
</p>
<p>onmouseover:
    <a href="#" onmouseover="slideDown()" onmouseout="slideUp()">slideDown/Up</a>
</p>
<div id="boxDiv">Box</div>

</body>
</html>