JavaScript

JavaScript Zufallszahlen

JavaScript Zufallszahlen erstellen und auswerten

A oder B das ist hier die Frage…

Die folgende Beispiele zeigen wie man mit JavaScript Zufallszahlen erstellt und auswerten kann. Zufallstest mit 2 Werten var ab = Math.random(); if (ab >= 0.5) { var abtest = 'Testergebnis: A'; } else { var abtest = 'Testergebnis: B'; }…

Document Ready

jQuery document ready Kurzform

Warten auf goDOM…

JavaScript im document ready wird erst ausgeführt sobald der DOM fertig geladen ist. Funktionen sollten bereits vor document ready stehen. $(document).ready(function() { /* JS */ }); Kurzform $(function() { /* JS */ });

jQuery User Agent

jQuery User Agent

Browser mit jQuery ermitteln oder eine jQuery Browserweiche erstellen

Der Kompatibilitätsmodus im Internet Explorer hat auf diese Prüfung keinen Effekt. Hier muss manuell nachgebessert werden. <script type="text/javascript"> var ie = false; var ie6 = false; var ie7 = false; var ie8 = false; var ie9 = false; var ie10 = false; var…

BackgroundImageCache

Internet Explorer 6 Hintergrundbilder verschwinden

BackgroundImageCache

Die Verwendung von vielen Hintergrundbildern kann dazu führen, dass die Bilder nach dem hover bzw. mousesover speziell im Internet Explorer 6 nicht mehr anzeigt werden. Dieses Problem kann in vielen Fällen mit JavaScript behoben werden <!--[if IE 6]> <script…

jQuery Tabs

jQuery Tabs

Reiternavigation mit jQuery

Durch Klicken auf die Reiter der Tab-Navigation oder auf weiter/zurück wechselt der Inhalt. Der jeweils aktive Reiter erhält die CSS-Klasse „active“. Reiter- und Contentanzahl müssen gleich sein. Der Content wechselt indem der sichtbare Inhalt ausgeblendet wird und der…

jQuery Overlay

jQuery Overlay

Einfaches jQuery Overlay

Das Overlay hat eine vertikale und horizontale Zentrierung. Bei Anpassung der Fensterbreite und -höhe wird diese neu berechnet. Bei geringer Browserhöhe scrollt die Seite nach oben und position:fixed wird in position:absolute geändert damit das Overlay funktional bleibt.…

jQuery Tooltip

jQuery Tooltip

Ein Tooltip eignet sich um Information platzsparend unter zu bringen und bei Bedarf z.B. per mousesover anzuzeigen. Erklärungen oder Hilfetexte werden oft mit Tooltips dargestellt. Für meinen Tooltip habe ich eine feste Breite von 200px verwendet die aber per CSS angepasst…

iPhone und iPad Hover-Effekt

iPhone und iPad Hover-Effekt

Hover-Workaround mit ontouch für iOS

Hover-Effekte können sehr hilfreich sein. Gerade bei mobilen Geräten ist dies aber oft ein Problem. Hiermit lassen sich einfache :hover-Pseudoklassen mit ontouch darstellen: <script type="text/javascript"> if ("ontouchstart" in…

jQuery Click-Event iPhone iPad touchstart

jQuery Click-Event iPhone iPad

Click-Event auch für iOS

Hier mit dem iPhone/iPad Klicken jQuery click touchstart <script type="text/javascript"> $(".example").on("click touchstart", function() { alert('klick'); }); </script>

Impressum