Jquery - Footer IE Fehler
ivorysmoker
- javascript
Hallo zusammen
Ich habe mir eine kleine Funktion zusammengebaut die den Footer steuert. Sprich ist der Scrollbalken ganz unten wird der footer sichtbar.
Dies funktioniert im Firefox, Safari ohne Probleme. Leider tut der Code im IE gar nichts.
Gibt es hier möglicherweise Versionsprobleme?
Hat jemmand eine Idee wie man dies im IE auch zum laufen bekommt?
Die Funktion scrollpos wird über den Evetnhandler onscroll geladen. (Im body)
function scrollpos() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
if(documentHeight == scrollDifference){
$("#Cleiste").css("visibility", "visible");
}else{
$("#Cleiste").css("visibility", "hidden");
}
}
<div id="Cleiste" style="visibility:hidden; background-image: url('CLeiste.jpg'); bottom: 0; height: 22px; position: fixed; width: 100%; color:#82888b;">Ich bin ein Footer</div>
Ich bedanke mich für eure Bemühungen.
Grüsse Ivorysmoker
@@ivorysmoker:
nuqneH
Dies funktioniert im Firefox, Safari ohne Probleme. Leider tut der Code im IE gar nichts.
Und wo kann man sich das (Nicht-)Funktionieren ansehen?
Aus deinem Code ein Testbeispiel erstellen? Danke, keine Lust. Das machst du bitte selber. Codepen, JSFiddle, deine Seite verlinken …
Qapla'
Hey Gunnar
Und wo kann man sich das (Nicht-)Funktionieren ansehen?
In dem man eine HTML Datei erstellt und die 2-3 sachen reinkopiert.
Im IE wird es dir im Debugger keine Fehler ausgeben, daher auch die Frage @Versionen.
Aus deinem Code ein Testbeispiel erstellen? Danke, keine Lust. Das machst du bitte selber. Codepen, JSFiddle, deine Seite verlinken …
Nachbauen *hust*? HTML Datei erstellen - Code reinkopieren - script & html tags setzen. Voila.
Das Thema hatten wir schon einmal Gunnar.
Wer aus meiner Sicht es nicht schaft die paar Zeilen Code in eine HTML Datei zu laden und im Body die funktion zu laden, wird mir wohl auch bei diesem Problem nicht helfen können.
Grüsse Ivorysmoker
@@ivorysmoker:
nuqneH
Nachbauen *hust*? HTML Datei erstellen - Code reinkopieren - script & html tags setzen. Voila.
Und das soll JEDER tun, der sich mit DEINEM Problem beschäftigt?
Anstatt dass du das EINMAL tust und ALLE sich das gleich im Browser ansehen können?
Wer aus meiner Sicht es nicht schaft die paar Zeilen Code in eine HTML Datei zu laden und im Body die funktion zu laden, wird mir wohl auch bei diesem Problem nicht helfen können.
Wer es nicht schafft, ein Online-Beispiel zu erstellen, um es damit potentiellen Helfern einfach zu machen, wird wohl nicht unbedingt Hilfe erwarten können.
Qapla'
@@ivorysmoker:
nuqneH
Dan bin ich ja einmal gespannt ;)
Footer Test
IE mag es nicht, dass der Eventhandler für body gesetzt wird. Das onscroll-Attribut beim html-Element und es geht.
Allerdings sollten Eventhandler gar nicht als on…-Attribute im HTML zu finden sein, sondern im Script gesetzt werden.
Mit jQuery: $(window).on('scroll', scrollpos);
oder kurz: $(window).scroll(scrollpos);
Ich frag mich allerdings, was das soll. Der Footer ist doch sowieso erst zu sehen, wenn man runterscrollt. Wozu das JavaScript?
Wie sieht es mit der Barrierefreiheit aus? „Scrollen“ denn Screenreader oder bleibt denen der Footer verborgen?
Und passt das footer-Element nicht für den Footer und das main-Element nicht für den Hauptinhalt?
Qapla'
IE mag es nicht, dass der Eventhandler für body gesetzt wird.
Anmerkung: ... wobei das Event-Attribut onscroll für <body> seit html5 valide wäre.
Hi Gunnar
Ich bedanke mich für deinen Lösungsvorschlag.
IE mag es nicht, dass der Eventhandler für body gesetzt wird. Das onscroll-Attribut beim html-Element und es geht.
Wiso mag IE das nicht? Bitte um genaue Beschreibung.
Allerdings sollten Eventhandler gar nicht als on…-Attribute im HTML zu finden sein, sondern im Script gesetzt werden.
Mit jQuery:$(window).on('scroll', scrollpos);
oder kurz:$(window).scroll(scrollpos);
Funktioniert Prima wen der Eventhandler vom Jquery getriggert wird. Danke
Ich frag mich allerdings, was das soll. Der Footer ist doch sowieso erst zu sehen, wenn man runterscrollt. Wozu das JavaScript?
Nicht ganz. Wenn der Balken im float wäre trifft das zu.
Dieser ist aber Dynamisch und wandert mit der Seite. Siehe CSS
Jetzt war ein Wunsch das der Footer nur am schluss der Webseite sichtbar wird. Daher die Jquery Erweiterung.
Wie sieht es mit der Barrierefreiheit aus? „Scrollen“ denn Screenreader oder bleibt denen der Footer verborgen?
Hmm, dass weis ich momentan noch nicht.
Und passt das footer-Element nicht für den Footer und das main-Element nicht für den Hauptinhalt?
Kannst du diese Frage etwas anders vormulieren? Ich verstehe die Frage nicht.
Gruss Ivorysmoker
@@ivorysmoker:
nuqneH
Wiso mag IE das nicht? Bitte um genaue Beschreibung.
Nun, es ist der IE. ;-) Hätte ich bis zum 9er gesagt. Allerdings geht <body onscroll=…>
im 10er auch nicht. (11er hab ich nicht getestet.)
Die Specs durchzuackern, ob das OK so ist oder ein Bug, überlasse ich jetzt mal anderen. Dir z.B.
Jetzt war ein Wunsch das der Footer nur am schluss der Webseite sichtbar wird.
Das ist er doch auch, wenn er ganz normal nach dem Hauptinhalt in den Viewport gescrollt wird. Ich verstehe das Problem nicht.
Und passt das footer-Element nicht für den Footer und das main-Element nicht für den Hauptinhalt?
Kannst du diese Frage etwas anders vormulieren? Ich verstehe die Frage nicht.
http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/
Qapla'
Aloha ;)
Jetzt war ein Wunsch das der Footer nur am schluss der Webseite sichtbar wird.
Das ist er doch auch, wenn er ganz normal nach dem Hauptinhalt in den Viewport gescrollt wird. Ich verstehe das Problem nicht.
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
Grüße,
RIDER
@@Camping_RIDER:
nuqneH
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
position: sticky
Demnächst in ihrem Browser.
Qapla'
Aloha ;)
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
position: sticky
Demnächst in ihrem Browser.
I know... Ich warte sehnsüchtig!
Grüße,
RIDER
Hi Rider
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
Schon nicht übel aber nicht ganz korrekt. Der Footer befindet sich immer ganz unten unabhängig vom Content. Mit ganz unten ist nicht die unterste scroll Position gemeint sondern die aktuelle Position.
Gruss Ivorysmoker
@@ivorysmoker:
nuqneH
Schon nicht übel aber nicht ganz korrekt. Der Footer befindet sich immer ganz unten unabhängig vom Content. Mit ganz unten ist nicht die unterste scroll Position gemeint sondern die aktuelle Position.
So in etwa? Look Ma, no JavaScript!
Qapla'
Om nah hoo pez nyeetz, Camping_RIDER!
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
bis zu einer ordentlichen Umsetzung von position: sticky
hilft http://www.cssstickyfooter.com/de/
Matthias
Aloha ;)
Ohne Ahnung zu haben erahne ich das Problem: Bei Seiten mit wenig Inhalt steht der Footer irgendwo mitten im Bildschirm, was Layout-Technisch nicht gewünscht ist. Nicht wahr? Das ist ein Mistding, mit dem ich mich auch schon öfter rumgeschlagen habe... Ohne Patentlösung...
bis zu einer ordentlichen Umsetzung von
position: sticky
hilft http://www.cssstickyfooter.com/de/
Thank u very much, das sieht doch mal gut aus! Muss ich mir definitiv merken und mal genauer analysieren! Warum hab ich dich eigentlich noch nicht früher dazu befragt? ;)
Der TO dürfte damit möglicherweise auch glücklich werden...
Grüße,
RIDER
Om nah hoo pez nyeetz, Camping_RIDER!
Thank u very much, das sieht doch mal gut aus! Muss ich mir definitiv merken und mal genauer analysieren! Warum hab ich dich eigentlich noch nicht früher dazu befragt? ;)
Mach das mal. Anpassungen wären sinnvoll. Inzwischen gibts ja HTML5, da kann man für unser Wiki die passenden Elemente verwenden. Px muss für Elementabmessungen auch nicht unbedingt sein und box-sizing existiert.
Also, wenn du mal lange Weile hast ;-)
Matthias
Hi Gunnar
Jetzt war ein Wunsch das der Footer nur am schluss der Webseite sichtbar wird.
Das ist er doch auch, wenn er ganz normal nach dem Hauptinhalt in den Viewport gescrollt wird. Ich verstehe das Problem nicht.
Ich versuche es einmal anders zu erklären:
Wie du schon sagst scrollt der Footer immer ganz unten mit, soweit ist deine Ausage auch korrekt.
Er ist zwar immer unten aber gehen wir jetzt einmal davon aus das die Seite Ultra viele Content hat. Was wiederum heisst das dieser Footer am Anfang der Seite bereits sichtbar ist und dieser störend ist. Daher habe ich mit dieser Funktion dies unterbunden, da der Footer erst ganz unten auf der Seite sichtbar werden soll.
Bestimmt gibs noch etliche Möglichkeiten dies anders zu bauen, da die Seite aber Dynamisch, mehrsprachig etc ist, war dies die einfachste Lösung in meinen Augen.
Ich hoffe ich konnte es in etwas schildern.
Gruss Ivorysmoker
Om nah hoo pez nyeetz, ivorysmoker!
Jetzt war ein Wunsch das der Footer nur am schluss der Webseite sichtbar wird.
Das ist er doch auch, wenn er ganz normal nach dem Hauptinhalt in den Viewport gescrollt wird. Ich verstehe das Problem nicht.Ich versuche es einmal anders zu erklären:
Wie du schon sagst scrollt der Footer immer ganz unten mit, soweit ist deine Ausage auch korrekt.
Er ist zwar immer unten aber gehen wir jetzt einmal davon aus das die Seite Ultra viele Content hat. Was wiederum heisst das dieser Footer am Anfang der Seite bereits sichtbar ist und dieser störend ist. Daher habe ich mit dieser Funktion dies unterbunden, da der Footer erst ganz unten auf der Seite sichtbar werden soll.
Ich hoffe ich konnte es in etwas schildern.
leider nein.
Wenn der footer sich ganz normal nach dem Hauptinhalt im Markup befindet, ist er nicht sichtbar, wenn der Hauptinhalt nicht in das Browserfenster passt.
<body>
<main>…</main>
<footer>…</footer>
</body>
Matthias
Hi,
Allerdings sollten Eventhandler gar nicht als on…-Attribute im HTML zu finden sein, sondern im Script gesetzt werden.
Mit jQuery:$(window).on('scroll', scrollpos);
Und dann noch ein Allerdings:
Man sollte nicht auf *jeden* Scroll-Event mit ggf. aufwendigen Operationen reagieren – siehe http://ejohn.org/blog/learning-from-twitter/
MfG ChrisB
@@ChrisB:
nuqneH
Und dann noch ein Allerdings:
Man sollte nicht auf *jeden* Scroll-Event mit ggf. aufwendigen Operationen reagieren – siehe http://ejohn.org/blog/learning-from-twitter/
Natürlich nicht. Deshalb stellte ich auch das ganze Script infrage.
Qapla'
Anstatt dass du das EINMAL tust und ALLE sich das gleich im Browser ansehen können?
Gutes Argument, ich habe euch den Link hinterlegt.
Grüsse Ivorysmoker
Hallo,
Nachbauen *hust*? HTML Datei erstellen - Code reinkopieren - script & html tags setzen. Voila.
@ivorysmoker: siehste eigentlich ganz einfach, das solltest du auch schaffen...
Gruß
Kalk