Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
jQuery /CSS3: Responsive Funktion via jQuery und CSS auslösen, anstelle von window width
Möchte man Javascript-Funktionen bei bestimmten Bildschirmgrößen auslösen, so fällt einem schnell auf, dass Window Width (Browserbreite) nicht der Breite entspricht, die Mediaqueries benutzen. Dies liegt meistens an der Scrollbar, die je nach Betriebssystem und Browser 10-20px in Anspruch nimmt. So kommt es vor, dass jQuery die Funktion zu spät, oder zu früh auslöst und die restliche Seite noch nicht im Mediaquery ist. Dadurch kann es an den Breakpoints zu unschönen Effekten kommen.
Die Lösung
Die Lösung ist eigentlich relativ simpel. Erstellt für jeden Mediaquery bzw. jede Funktion die eine Breite benötigt ein leeres HTML Element, beispielsweise ein
und gebt diesem eine eindeutige Id oder Klasse.
Nun stylt in euren Mediaqueries diese Elemente mit display:none oder display:block, je nachdem wann diese angezeigt werden sollen.
Danach könnt ihr mit jQuery einfach testen, ob ein bestimmtes Div sichtbar ist oder eben nicht.
Beispiel
<div id="tablet-indicator"></div>CSS
#tablet-indicator {
display: none;
}
@media (max-width: 991px) {
#tablet-indicator {
display: block;
}
}
Javascript
$(window).resize(function(){
if($('#tablet-indicator').is(':visible')){
// Your Code for Tablet
}
});
So was macht das Beispiel?
- Wir haben ein Div mit der ID "tablet-indicator" irgendwo auf der Seite (Am besten im Footer)
- Dieses Div ist ausgeblendet via CSS
- Es wird eingeblendet, solange man unter 992px Bildschirmbreite hat
- Das Javascript guckt ob das Div sichtbar ist, oder nicht. Ist es sichtbar, bedeutet das, wir sind im Tablet Viewport
Kommentare
Hinterlasse einen Kommentar