Bei onclick() reingleitendes div
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
algorithmus
bereich
beschleunigen
code
date
definieren
dreieck
email
getestet url
grafik
http
login
nutzen
position
rein text
rest
type
url
verschwinden
wechsel
-
Hallo, ich hätte da [...bla bla]
Ich brauche ein div-Bereich, in meinem Fall ein Login-Bereich oben an der Seite, welcher bei klick relativ smooth nach unten gleitet und verstecktes anzeigt. Bei erneutem klick bzw. beim scrollen soll dieser wieder verschwinden.
Dazu enthält dieses div ein Dreieck, oder eher ein ＼／ , welches beim fertigen runterscrollen in ein ／＼ wechseln soll und beim einscrollen wieder andersrum.
Ich habe schon angefangen mit absoluter Positionierung:
#login{background:red;position:absolute;top:-20px;left:0;}
Sollte ich lieber fixed nutzen?
Und hier:
<html><body>hallo bla bla <div id="login" onclick="scroll();"><form action="..." method="post"> <input type="text" value="name"><input type="text" value="pass"><input type="submit"><br><center>＼／</center></form></div> bla bla... bloob bleep. <script type="text/javascript"> function scroll(){for(i=-20;i<=0;i++){setTimeout("document.getElementById('login').top=i;if(i==0)document.getElementById('login').center.innerHTML='／＼';",500);}}</script></body></html>
Beitrag zuletzt geändert: 4.2.2014 10:01:31 von thebigsmilexd -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du musst doch nur im CSS die eine Grafik definieren, die andere blendest du dann mit javascript darüber. Bin natürlich nicht so ganz der javascript Experte.
Passwörter in rein Text?
Wozu gibt es den type='password' -
Warum eine grafik rüberblenden?
Nebenbei, mir ist vor allem wichtig,dass es smooth ist.
den rest dürfte ich doch noch hinbekommen...
---
Ja, ich hatte es nur schnell geschrieben und dabei nicht an type="password" gedacht.
ZIEMLICH UNBEKANNT UND PRAKTISCH SIND AUCH :
type="date"
type="email"
Diese sind äußerst unbekannt, aber sehr gut, type="email" habe ich derzeit nur mit type="submit" getestet. -
jquery->toggle()-Funktion
damit musst du nix selbst schreiben. wenn du selbst schreiben willst, musst du dir einen algorithmus ausdenken, um die animation zu beschleunigen und zu verlangsamen... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
