Schlagwort: javascript

Fullscreen Flyout Menüs / Lightbox und die Scrollbar Breite

Raoul Kramer Schreibe einen Kommentar

Bei Flyouts oder Lightboxen die das Page Scrollen unterbinden

body.overlay {overflow: hidden;}

tritt im Desktop häufig das Problem auf, dass durch die verschwindene Scrollbar alle Inhalte der Seite etwas nach rechts rutschen.

TL;DR

Mit body { width: 100vw; overflow-x: hidden;} nimmt die Seite auch den Platz hinter der Scrollbar ein, während sie bei body { width: 100%; } nur vom linken Rand bis zur Scrollbar dimensioniert ist.

Das liegt daran, dass die Scrollbar z.B. 15px der Seite einnimmt und diese 15px dann freigibt.

Auffällig wird dieses zum Beispiel bei Seiten die ihren Inhalt ab einer gewissen Browserbreite horizontal zentrieren und der Menü Button unter der Maus verrutscht.

Nun hatte ich ein Javascript gefunden, welches mir die Breite der Scrollbar ausgibt, im Linux Chromium die oben genannten 15px, auf Windows Chrome 17px – ungerade Zahlen, im Edge 12px…

Das Javascript im Beitragsbild ist zum großen Teil die Lösung von David Walsh.

weiterlesen

Javascript und der </body>-Tag

Raoul Kramer Schreibe einen Kommentar

„Kaum macht man es richtig, schon funktioniert es.“

Ein simples Sprichwort – doch kann man das Ganze bei Javascript umdrehen:

„Es funktioniert, also ist es richtig?“

Womit ich beim Thema wäre :-)

Paul Lewis und Jake Archibald haben mich mit ihrem Videoblog HTTP 203 zum Grübeln gebracht. Als erfahrene JS Entwickler hängen wir unseren Code erst vor dem </body>-Tag ein und führen ihn frühestens im document.ready Event aus…

Und um ihr Beispiel (von mir frei übersetzt) zu zitieren:

„Das ist so, als würde man sicher stellen dass die Straßen bis 8:45h frei sind und dann fahren alle auf einmal los“ (HTTP 203: Performance Matters ~30s)

weiterlesen

jQuery vs Vanilla JS featuring JSLint = good practice

Raoul Kramer 1 Kommentar

Javascript Frameworks wie jQuery((jQuery – „write less, do more“)) erleichtern jedem Entwickler die Arbeit, aber können dem Browser mehr Arbeit bescheren.

JSLint((JSLint – The JavaScript Code Quality Tool)) ist in der JavaScript Entwicklung ein idealer Partner, doch leider ist jQuery für JSLint nicht ganz durchschaubar und so können sich schnell wieder „bad practices“ einschleichen.

Zu diesem Beitrag habe ich mir ein Testdokument erstellt, welches aus einem simplen html Gerüst besteht und als Inhalt einen <ul> mit 10.000 <li> Elementen besteht, welche jeweils ein Click Event bekommen um eine Klasse zu wechseln. Das erste Beispiel nutzt jQuery 1.7.2, alle weiteren jQuery 1.11.2. UPDATE: Nun habe ich auch eine Vanilla JS delegated Methode durchgemessen. UPDATE 2: Die kompletten Testdateien habe ich nun bei bitbucket hochgeladen: djpogo/vanilla-jquery-listener.

Bei jQuery ist es durchaus gängig einen Listener Funktion als anonyme Funktion zu implementieren. Das sieht dann so aus:

// jQuery &lt; = 1.7.x 
$(".viewportChanger").click(function () { $(this).toggleClass("show"); });
 
// jQuery 1.11.2 ohne Delegation
$(".viewportChanger").on("click", function () { $(this).toggleClass("show"); });
 
// jQuery 1.11.2 mit Delegation
$(".viewport").on("click", ".viewportChanger", function () { $(this).toggleClass("show"); });

weiterlesen

simple Javascript HTML5 jQuery Form Validation

Raoul Kramer

Formular Validierung hat noch nie Spaß gemacht und meistens beschränke ich die Validierung auf die Server-Seite. Doch bevor man ein Formular per AJAX abschicken will, ist es immer besser auch auf der Client-Seite die Eingaben zu validieren und dem Benutzer ggf. noch darauf hinzuweisen dass nicht alle notwendigen Informationen eingegeben sind, das erspart Frustration.

HTML5 ist dabei eine große Hilfe. Mit dem erweiterten Formularfeld Attribut type, sowie dem pattern und required Attribut übernimmt der Browser die Validierung. Per Javascript reicht dann die Suche nach Formular Elementen die required sind aber einen invalid Status haben:

var $form = $("#emailForm");
if ($form.find(":required:invalid").length === 0) {
  // alle Pflichtfelder validieren
 
} else {
  // Nicht alle Pflichtfelder validieren
}

Über CSS kann man die Formularfelder auch noch stylen je nachdem ob sie valid oder invalid sind. Wer noch „Nicht-HTML5-Browser“ unterstützten muss, könnte per Modernizr((Modernizr  – the feature detection library for HTML5/CSS3)) eine Weiche schalten und ein Javascript Plugin zur Valdierung nutzen, oder per Progressive Enhancement((Progressive Enhancement – Wikipedia Artikel)) das Formular einfach über die serverseitige Parameter Validierung überprüfen und ausgeben lassen – um die serverseitige Validierung kommt man auch mit der jQuery Zeile von oben nicht drumherum. Frontend Formular Validierung ist und bleibt ein UX-Enrichment((UX Enrichment – Die Bereicherung des Benutzer Erlebnis)).

„lazy load“ vom facebook cdn

Raoul Kramer Schreibe einen Kommentar

Obwohl Facebook ein CDN bietet, wartet man (der Browser) häufig lange auf Facebook Javascripts oder CSS Dateien… Manchmal bis zu 10 Sekunden oder länger und in dieser Zeit denkt der Seitenbesucher das die Seite „langsam“ ist, also langsam ausgeliefert wird.

Wenn wir Yahoos und Googles Seiten Optmierungen vollendet haben, haben wir zwar alle <script>-tags vor Ende des </body>-tags gesetzt, aber wenn Facebook nur langsam seine Daten ausliefert, dreht sich oben im Browser noch die Spinner Grafik und manchmal verzögern sich dadurch massiv weitere JavaScript Ausführungen.

weiterlesen

IE feature: $(‚ie a‘).attr(„href“);

Raoul Kramer Schreibe einen Kommentar

Passend zu meinem vorherigen Post habe ich heute wieder etwas interessantes herausgefunden.

Folgender Quelltext beschreibt die Ausgangssituation:
<a href="#4">4</a>
Mit folgendem jQuery will ich an den Wert des href Attribut ran:
$('a').attr('href');
Manche Browser geben in diesem Fall ‚#4‚ zurück. Der IE6 findet es aber intuitiver direkt den vollen Pfad auszugeben, also: ‚http://www.raoulkramer.de/lirumlarum#4‚ – eigentlich auch ok, man muss es nur wissen.

weiterlesen

IE feature: nicht $(‚ie[text=xyz] && $(‚ie‘).text(), sondern $(‚ie‘).html()

Raoul Kramer Schreibe einen Kommentar

Ich hatte mir einen so schönen jQuery Ausdruck zusammengebaut und dann kam der Internet Explorer dazwischen :(

Generell wanderte ich durch ein paar <li>-Objekte und wollte eins von ihnen mit der Klasse aktiv hervorheben.
$(o).find('li[text=3]').addClass('aktiv');
fertig! (Firefox und Chrome Entwickler brauchen nicht mehr weiterlesen)

In jedem IE greift diese Formel aber nicht.

weiterlesen