Url mit Anker nach Element mit id oder Link mit name-Attribut anzeigen
Mit folgendem JQuery Plugin wird beim Überfahren eines Element der volle Link – ergänzt um den Hash des Ankers – angezeigt. Man kennt das aus langen Onepagern, bei denen die Überschriften mit einer id oder dem Element <a name=”ankername”> versehen sind. Dadurch kann der Benutzer direkt zu einer Überschrift verlinken und vor allem auch sehen, […]
Event Handler für noch nicht existierende Elemente in JQuery
s kommt manchmal vor, dass man ein Element mit Jquery einfügt und einen Eventhandler dafür registrieren will. Ab JQuery 1.7+ geht das mit der on() Methode. Für Elemente die noch nicht existieren muss man den Event-Delegation Ansatz der Methode on() nutzen. Der normale direkte Aufruf sieht wie folgt aus (und funktioniert nicht für Elemente, die […]
Mit Google VR-View 360-Grad-Fotos in eigene Webseite einbinden
Google Cardboard ist eine günstige Möglichkeit um aus einem Smartphone und einem Pappkasten mit Linsen eine Virtual-Reality Brille zu erstellen. Wer will kann sich die Brille sogar mit folgender Anleitung selbst bauen.Allerdings muss man die Displaygröße des Geräts beachten. Mein Galaxy Note 3 ist z.B. zu groß. Auch die Linsen selbst sind nicht allzu leicht […]
Hat ein mobiles Gerät ein Gyroskop oder Beschleunigungssensor?
Im letzten Beitrag habe ich einen Weg gezeigt, mit dem man ermitteln kann, ob ein Gerät wirklich mobil ist. Der DeviceMotionEvent gab hierüber Auskunft. Will man wissen, ob ein Gerät über ein Gyroskop verfügt, kann man wie folgt vorgehen: See the Pen Accelerometer or Gyroscope by uli schaeffler (@ulrischa) on CodePen. Erklärung Ich dachte bis […]
Überprüfen ob ein Gerät wirklich “mobil” ist
Ob ein Gerät mobil ist, kann man auf einer Webseite über mehrere Arten überprüfen. Ob das Gerät wirklich portable bzw. mobil ist – sprich bewegt werden kann – ist aber oft noch nicht damit geklärt. Oft werden folgende Verfahren verwendet: Bildschirmbreite abfragen: Eine kleine Bildschirm bedeutet noch nicht, dass das Gerät mobil ist. User Agent: […]
Element beim Scrollen an einer bestimmten Position anzeigen
Folgendermaßen kann man ein Element auf einer Seite beim Scrollen an einer bestimmten Position fest fixieren. See the Pen stickyheader by uli schaeffler (@ulrischa) on CodePen.
JSONP Beispiel in JQuery und in Vanilla JavaScript
JSONP ist eine der ältesten Möglichkeiten Daten über verschiedene Domaingrenzen hinweg auszutauschen und die Einschränkungen die bei einem AJAX Request hinsichtlich Same-Origin-Policy bestehen würden zu umgehen. Man braucht auf der Serverseite ein Script, dass JSON Daten mit einem Funktionsaufruf umhüllt. Z.B. müsste statt {some-key:’some-value’} callbackname({some-key:’some-value’}) vom Server zurückgegeben werden. Und diese Antwort wird vom Client […]
Floatende Elemente auswählen, die nebeneinander liegen
Folgendermaßen kann man Elemente selektieren, die nebeneinander floaten und in einer “Zeile” stehen: See the Pen Get same in floating row by uli schaeffler (@ulrischa) on CodePen.
Realtime PHP Ausgabe über Ajax in anderer Seite
Folgendes Problem: Auf einer Webseite A soll über einen Button ein PHP Skript B gestartet werden, dass über einen längere Zeit hinweg mit echo z.B. log-Ausgaben ausgibt. In der Aufrufenden Seite A sollen diese Ausgaben während der Laufzeit des Skriptes B in einen DIV Container mit einer bestimmten Höhe geschrieben werden. Klingt zunächst einfach, ist […]
JQuery`s click() und dynamisch hinzugefügte Elemente
Angenommen man fügt dynamisch Elemente zum DOM (Document Object Model) einer Webseite hinzu: Dann kann man nicht über innerhalb von document.ready() auf Click-Events reagieren, da das obige Element beim Laden des Dokuments noch nicht existierte. Die Lösung bietet die JQuery live() Methode: