Höhe von Div ermitteln und in CSS einbinden ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
animation
arbeiten
auslese
code
dank
datei
eigenschaft
element
empfehlen
erzeugen
fehler
funktionieren
ladezeit
notiz
paar
position
problem
url
weglassen
-
Hi alle zusammen.
Seit einiger Zeit bastle ich wieder an einem kleinen Projekt da ich echt beeindruckt bin was mit HTML5 und CSS3 so alles geht. Man braucht ja quasi für nichts mehr Javascript. Nun bin ich an einem Punkt wo ich glaube das ich doch nicht ganz ohne klar komme. Leider hab ich echt absolut 0 Erfahrung mit Javascript. Zu meinem Problem:
Ich möchte den Content meiner Seite von oben einfliegen lassen. Das funktioniert wunderbar, kein Problem. Bislang habe ich es so gelöst das die Content Position TOP einen hohen Negativen wert hat und dann mittels Animation auf die reale Position gebracht wird. Dabei stellt sich mir das Problem das der Content ja unterschiedlich hoch ist und somit brauch es immer Unterschiedlich lange bis er dann tatsächlich in die Seite eingeflogen kommt. Deshalb meine Frage: gibt es über Javascript eine Möglichkeit die Höhe eines Div Elementes auszulesen und diesen Wert in einer externen CSS-Datei an beliebiger stelle einzufügen, in meinem Fall als Negative "Top-Position" ? Hier mal der kleine Scriptteil. Es Handelt sich um die 0% Top Position die ich mit Javascript ändern möchte.
@keyframes c_container { 0% {top:-1800;} 100% {top:0px;} }
Mit CSS3 komm ich da gerade nicht mehr weiter vielleicht übersehe ich auch einfach nur etwas. Zum auslesen der Höhe habe ich bereits ein Script bei google gefunden das halbwegs funktioniert. Aber das ganze dann an eine Externe CSS-Datei zu übergeben, und dort entsprechend einfügen, da konnte mit google bislang keine ermutigenden Antworten liefern.
Vielleicht finden sich ja hier ein paar schlaue köpfe die mir da weiter helfen können.
Beitrag zuletzt geändert: 24.4.2016 10:30:00 von jhb -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
So, wie du dir das vorstellst wird es wohl leider nicht funktionieren. JavaScript wird vollkommen clientseitig ausgeführt und somit hast du nicht die Möglichkeit andere Dateien (wie eben dein Stylesheet) zu bearbeiten.
Jedoch kannst du natürlich mit JavaScript selbst CSS-Eigenschaften beeinflussen. Du müsstest dazu zuerst die Höhe des Bodys auslesen und diesen dann bei -XXXXpx positionieren. Danach animierst du diese Eigenschaft, wobei du die Zeit schließlich auch beeinflussen kannst, da du alle benötigten Werte (Höhe des Bodys) kennst. Dies ist zu 100% mit normalem JavaScript umsetzbar.
Denke aber auch dran: Vielleicht stört es einige Nutzer, wenn die Seite immer erst von oben einfliegt... manchmal ist weniger besser!
mfg
Jonas -
Okay, Danke schonmal soweit hab ich das jetzt auch verstanden, jetzt tuhe ich mich dann allerdings doch etwas schwer mit der umsetztung hab mich mal irgendwie rann gewagt.
<script> var content_height = document.getElementById(c_container).offsetHeight; document.getElementById(@keyframes c_container).style.top = -content_height; </script>
Das kann aber nicht funktionieren... tut es auch nicht. Wie kann ich denn die "0% Top Angabe innerhalb des @keyframes c_container Elementes beeinflussen, da ist die Struktur ja etwas anders als bei normalen css Elementen. -
Erst einmal empfiehlt es sich vielleicht doch, eine Einführung zu JavaScript durchzulesen bzw. ein Youtubevideo zu dem Thema zu schauen etc. Dann würde dir auch auffallen, dass bei c_container die Anführungszeichen fehlen, weshalb die Methode getElementById des document-Objekts nicht funktioniert. Deshalb solltest du auch einen Fehler ausgeworfen bekommen...
Zum debuggen hilft es oft, mit alerts zu arbeiten. So kannst du herausfinden, ob dein Fehler jetzt an der ersten oder zweiten Zeile des Codebeispiels lag:
var content_height = document.getElementById(c_container).offsetHeight; alert(content_height); // ====> Das sollte einen Fehler erzeugen bzw. eine leere Ausgabe erzeugen var content_height = document.getElementById("c_container").offsetHeight; alert(content_height); // ====> Jetzt solltest du die offset-Height-Angabe erhalten
Notiz: das var-Schlüsselwort ist obsolet, du kannst es auch weglassen.
mfg
Jonas -
Okay Danke dafür schonmal.
Leider finde ich weiter nichts so wirklich wie man gezielt die keyframe animationen beeinflusst. Google liefert dafür zwar ein paar sachen, aber daraus werde ich meist auch nicht schlau, weil da oft viel mehr beinhaltet ist wie z.B das ganze über buttons Ausslösen undso. Und als Blutiger Anfänger ist das doch alles sehr verwirrend. Vielleicht hab ich auch einen Falsche vorstellung von dem ganzen und das lässt sich nicht unter 10 zeilen JS bewerkstelligen. Hab durchaus erfahrungen mit sprachen wie PHP und LUA aber Javascript fand ich oft sehr abschrekend kompliziert das ich da nie einen einstieg gefunden habe.
Hättest du oder jemand anders ein kurzes Script beispiel wie sowas dann gezielt aussieht, wenn ich wirklich nur standart mäßig diesen einen wert innerhalb der keyframe über Javascript beeinflussen möchte ? oder meinet wegen auch einen Link wo sehr vereinfacht, dieses problem behandelt wird?
Ich habe hier ein kleines JSFiddle vorbereited:
http://jsfiddle.net/bVkwH/38/
Kann leider selbst sogut wie nie an der eigendlichen Seite arbeiten. Desshalb muss ich mich so oder so mit Playgrounds zufrieden geben.
Beitrag zuletzt geändert: 25.4.2016 11:54:11 von jhb -
Liebe(r) jhb,
Die einfachste Möglichkeit, das von dir beschriebene Problem zu lösen ist "Animate.css"
--> https://daneden.github.io/animate.css/
Es ist ein Stylesheet, dass du zusätzlich zu deiner eigentlichen css-Datei einbindest. Somit hast du Zugriff auf die Animationen. Um die Ladezeit zu verringern kann ich dir ebenfalls empfehlen, die nicht benötigten Animationen aus der Datei zu löschen (Du kannst ja testen, welche Animationen du möchtest, indem du dich auf der obigen Website austobst).
Info: Das Element, was animiert werden soll einfach mit
versehen (das "animated" ist wichtig!)class="ANIMATIONSNAME animated"
Diese Datei hat mir in meinen Anfängen sehr weitergeholfen, dennoch kann dir empfehlen, dich ein wenig mit JavaScript auseinanderzusetzen, da es trotzdem ein wichtiger Bestandteil der Frontend- und Backendentwicklung von Websites ist.
MfG ~moritz-php -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
