Supportnet Computer
Planet of Tech

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

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.

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:

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>


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


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.

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:
Zitat:
setTimeout("window.scrollBy(0, -10)", 10);
y = y - 10;

Experimentier doch einfach damit rum.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: