Kategorie: Javascript

CSS Pseudo-Class :before und :after mit jQuery manipulieren

Das Problem

Frontend-Entwickler nutzen gerne die Pseudo-Klassen :before und :after, um zum Beispiel eine Form mit CSS zu erstellen ohne, dass man dazu ein Hintergrundbild benutzen muss. Beispiel:

.top-header:before {
background: #00589d none repeat scroll 0 0;
height: 61px;
position: absolute;
right: 64px;
top: 0;
transform: skewX(-25deg);
width: 31px;
z-index: 9;
}

Mit diesem Code habe ich ein schräges Rechteck erzeugt. Aufgabe war es, falls sich die Fenstergröße verändert, dann soll sich auch die Position ‚right‘ verschieben. Der neue Wert wird durch jQuery berechnet und in eine Variable gespeichert. Jetzt hatte ich ein Problem, weil man in jQuery keine Pseudoklassen manipulieren kann. Folgendes funktioniert NICHT:

Web Development with Node and Express

Web Development with Node and Express by Ethan Brown (O’Reilly). Copyright 2014 Ethan Brown,

ISBN 9781491949306
327 Seiten, broschiert
eBook-Format: PDF, EPUB, MOBI
Preis: € 20,99

Zielgruppe

Javascript erfahrene Programmierer, die sich einen Überblick über die Entwicklung von Web Anwendungen mit Node.js und dem Web Framework Express verschaffen möchten.

Das Buch ist sowohl als Druckausgabe, als auch als E-Book verfügbar. Es bietet einen Einstieg in alle relevanten Themen. Ergänzende Kapitel zu Test/QA, Scaling, Monitoring, Debugging, API, Wartung, Best Practices und Deployment runden das Ganze ab.

In der Praxis

Buch-Cover „Web Development with Node & Express“
Buch-Cover

Durch die vielen Codebeispiele ist alles leicht nachvollziehbar und selbst auszuprobieren.
Der gesamte Sourcecode ist online auf github verfügbar. Stolperfallen und spezielle Tipps sind durchgängig markiert.

JavaScript bei mehreren Domänen mit CORS

Wenn mehrere Domänen (auch Subdomänen) zusammenspielen sollen, dann gibt es einige Hürden zu umschiffen, die aus Sicherheitsgründen in die Browser eingebaut wurden. Die älteste Lösung mit IFRAME ist unpraktisch, die Lösung mit JSON-P ist nicht 100% sicher (XSS). Abhilfe schafft da CORS, das Cross-Origin Resource Sharing, dass so nebenbei auch POST ermöglicht.

Bei einem XMLHttpRequest (XHR) muss ein Origin-Header mitgeschickt werden. Beispielsweise sieht der Header bei Zugriff auf http://mydomain.com von http://www.myotherdomain.com so aus:

Origin: www.myotherdomain.com

Wer jQuery verwendet muss, dazu nur eine Option beim AJAX-Request setzen:

jQuery Accordion mit inaktiven (nicht aufklappbaren) Einträgen

[UPDATE]
in neueren jQuery (Core, UI) Versionen gibt es keinen _clickHandler mehr,
ich habe hier dann eine bessere Lösung über Events gefunden:
http://stackoverflow.com/questions/5958063/jquery-ui-accordion-disable-tab

——————–

Manchmal braucht man ein Accordion, das aus aktiven und inaktiven (nicht aufklappbaren) Einträgen besteht.

Mit jQuery lässt sich auch das recht elegant lösen.

Angenommen, wir haben folgende HTML Struktur:

<h3>Eintrag 1 - aktiv</h3>
<p>dieser Eintrag lässt sich öffnen</p>
<h3 class="ui-state-disabled">Eintrag 2 - inaktiv</h3>
<p>hier setzen wir auf den Header eine CSS Klasse, die das Element
später auch visuell als inaktiv kennzeichnet; kann entweder
schon am Server passieren oder aber auch per JS am Client</p>
<h3>Eintrag 3 - aktiv</h3>
<p>und noch ein Element, das sich öffnen lässt</p>

dann brauchen wir noch folgendes Javascript, um das ganze zu aktivieren:

Geolocation im Browser

Browser mit Location-Support werden immer verbreiteter.

Damit lässt sich wunderbar die (ca.) Position des Client-Browsers bestimmen.


<html>
        <head>geolocation</head>
        <body>
                <script>
                        if (navigator.geolocation){
                                navigator.geolocation.getCurrentPosition(function(position){
                                        var lat = position.coords.latitude;
                                        var lon = position.coords.longitude
                                        alert (""+lat+":"+lon);
                                });
                                }else{
                                alert("no location support");
                        }
                </script>
        </body>
</html>

test-url

UglifyJS Javascript Compressor/Beautifier

UglifyJS ist ein Javascript Compressor/Beautifier entwickelt auf NodeJS.

Die Dateigröße ist schlußendlich häufig kleiner als mit YUI Compressor oder GoogleClosure Compiler (und weniger fehleranfällig).

Mit UglifyJS läßt sich aber auch minimierter Javascript Code wieder lesbar strukturieren.

Anfrage