Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Wie funktioniert dieses Javascript? Fenster soll runter fahren
Frage
hallo,
ich würde gerne den effekt hier anwenden, den man unter:
http://www.profission.com/
unter dem menü clients finden kann. das fenster
fährt runter und man kann sich einloggen. im grunde ist das ja eine andere
seite. ist das überhaupt ein javascript effekt? und hat einer so ein script fertig?
ich habe leider von programmierung keine ahnung, bin nur gestalter.
wäre echt super. danke schön.
Antwort 1 von rfb
<html>
<head>
...
<script type="text/javascript">
<!--
function sichtbar(a) {
document.getElementById("unsichtbar").style.display=(a)?"block":"none";
}
// -->
</script>
</head>
<body onload="sichtbar(false)">
<div id="unsichtbar">Geheim<br> Geheim</div>
<a href="javascript:sichtbar(true)">Simsalabim</a></div>
</body>
</html>
also die JavaScript-Funktion kommt in den Head-Bereich der Seite.
Am Anfang befindet sich ein DIV-Bereich mit der ID "unsichtbar", der ist beim Laden für ein paar (Milli-)Sekunden sichtbar, und wird dann mit dem Funktionsaufruf
sichtbar(false)
zum Verschwinden gebracht, der Link macht das per Funktionsaufruf sichtbar(true)
rückgängig.Die Variante auf der von dir genannten Seite ist ein wenig komplizierter programmiert. Der Vorteil dieser Variante hier ist aber, dass sie auch ohne JavaScript noch funktioniert.
Wo du den DIV-Bereich auf der Seite einbaust ist dir überlassen.
Antwort 2 von rfb
Nachtrag:
das </div> in der drittletzten Zeile ist überflüssig
das </div> in der drittletzten Zeile ist überflüssig
Antwort 3 von mammamaria
vielen dank. nur ist das problem hier, das es direkt da ist. also kein langsamer
werdendes runterfahren. es ist im prinzip ein zusätzliches einblenden auf
knopfdruck. die programmierung dieser einen seite ist glaub ich super
aufwendig. das script kopieren funzt irgendwie nicht.
werdendes runterfahren. es ist im prinzip ein zusätzliches einblenden auf
knopfdruck. die programmierung dieser einen seite ist glaub ich super
aufwendig. das script kopieren funzt irgendwie nicht.
Antwort 4 von rfb
nun, dann ergänzen wir eben um "sanftes Scrollen", was voraussetzt, das der DIV-Bereich ganz oben steht und der Link ein Stückle darunter:
(NachOben() stammt aus SelfHTML)
Zitat:
<html>
<head>
...
<script type="text/javascript">
<!--
function sichtbar(a) {
document.getElementById("unsichtbar").style.display=(a)?"block":"none";
if (a) NachOben();
}
function NachOben () {
var y = 0;
if (window.pageYOffset) {
y = window.pageYOffset;
} else if (document.body && document.body.scrollTop) {
y = document.body.scrollTop;
}
while (y > 0) {
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
}
}
}
// -->
</script>
</head>
<body onload="sichtbar(false)">
<div id="unsichtbar">Geheim<br> Geheim</div>
<a href="javascript:sichtbar(true)">Simsalabim</a></div>
</body>
</html>
<html>
<head>
...
<script type="text/javascript">
<!--
function sichtbar(a) {
document.getElementById("unsichtbar").style.display=(a)?"block":"none";
if (a) NachOben();
}
function NachOben () {
var y = 0;
if (window.pageYOffset) {
y = window.pageYOffset;
} else if (document.body && document.body.scrollTop) {
y = document.body.scrollTop;
}
while (y > 0) {
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
}
}
}
// -->
</script>
</head>
<body onload="sichtbar(false)">
<div id="unsichtbar">Geheim<br> Geheim</div>
<a href="javascript:sichtbar(true)">Simsalabim</a></div>
</body>
</html>
(NachOben() stammt aus SelfHTML)
Antwort 5 von mammamaria
wenn ich das mache, macht er nichts mehr
Antwort 6 von rfb
hm, beim Kopieren ist mir da wohl eine } zuviel reingerutsch
richtig ist:
richtig ist:
Zitat:
<html>
<head>
<title>007</title>
<script type="text/javascript">
<!--
function sichtbar(a) {
document.getElementById("unsichtbar").style.display=(a)?"block":"none";
if (a) NachOben();
}
function NachOben () {
var y = 0;
if (window.pageYOffset) {
y = window.pageYOffset;
} else if (document.body && document.body.scrollTop) {
y = document.body.scrollTop;
}
while (y > 0) {
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
}
}
// -->
</script>
</head>
<body onload="sichtbar(false)">
<div id="unsichtbar">Geheim<br> Geheim</div>
<a href="javascript:sichtbar(true)">Simsalabim</a>
</body>
</html>
<html>
<head>
<title>007</title>
<script type="text/javascript">
<!--
function sichtbar(a) {
document.getElementById("unsichtbar").style.display=(a)?"block":"none";
if (a) NachOben();
}
function NachOben () {
var y = 0;
if (window.pageYOffset) {
y = window.pageYOffset;
} else if (document.body && document.body.scrollTop) {
y = document.body.scrollTop;
}
while (y > 0) {
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
}
}
// -->
</script>
</head>
<body onload="sichtbar(false)">
<div id="unsichtbar">Geheim<br> Geheim</div>
<a href="javascript:sichtbar(true)">Simsalabim</a>
</body>
</html>
Antwort 7 von mammamaria
jetzt gings auf, aber nicht wieder zurück, wenn man wieder auf den link klickt.
wie kann ich denn die höhe dieser tabelle oder was das ist einstellen, damit
man sieht, wie es runterfährt, das geht hier bei dem schmalen streifen so
schnell.
wie kann ich denn die höhe dieser tabelle oder was das ist einstellen, damit
man sieht, wie es runterfährt, das geht hier bei dem schmalen streifen so
schnell.
Antwort 8 von rfb
Die beiden -10 (Pixel) in diesem Abschnitt und die 10 (Millisek bis zum nächsten mal Scrollen) regeln zusammen die Scrollgeschwindigkeit:
Experimentier doch einfach damit rum.
Zitat:
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;
Experimentier doch einfach damit rum.