senäh

17senäh und so…

Code Snippet Thumb

HTML/CSS/JS
25. Apr 2013
Kommentare: 0

Einfaches, selbstgebautes Drag&Drop für beliebige Elemente

Kategorien: HTML/CSS/JS | 25. Apr 2013 | Kommentare: 0

Die Anforderung war einen HTML-Container verschieben zu können. Ich wollte dafür aber nicht gleich überfrachte Frameworks wie jQuery UI benutzen. Auch wollte ich kein möglichst flexibles Plugin draus machen, da ich es wirklich nur für diesen einen Zweck brauchte. Deswegen habe ich Chris Coyiers Lösung abgewandelt.

Hier ist das Endprodukt: Weiterlesen →

stickyheaders_artikelbild

HTML/CSS/JS
15. Apr 2013
Kommentare: 1

stickyHeaders: jQuery Plugin für bleibende Überschriften wie z.B. im iOS Adressbuch

Kategorien: HTML/CSS/JS | 15. Apr 2013 | Kommentare: 1

Solltet ihr ein iOS-Device euer Eigen nennen können, habt ihr sicherlich schonmal die Art der Sortierung im Adressbuch oder auch bei der Titelübersicht der Musik-App bestaunt. Es handelt sich dabei erst mal um eine einfache alphabetische Sortierung. Positiv fällt auf, dass der aktuelle Buchstabe immer am oberen Ende stehen bleibt, was der Orientierung gut tut. Richtig fancy ist aber der Übergang zwischen 2 Buchstaben, wobei der Untere den Oberen wegschiebt.

Übergang zwischen 2 Buchstaben in der Titelliste der Musik-App

Übergang zwischen 2 Buchstaben in der Titelliste der Musik-App

Als ich kurz darüber nachdachte, wie ich etwas Derartiges mit HTML, CSS und JavaScript umsetzen würde, sind mir spontan ein paar Lösungsansätze gekommen. Mit ein wenig Hilfe von meinem Kumpel Google wollte ich gegenprüfen, ob es andere Möglichkeit gibt. Doch ich lag gar nicht so verkehrt. Weiterlesen →

Code Snippet Thumb

HTML/CSS/JS
09. Mar 2013
Kommentare: 0

jQuery: CSS-Eigenschaft in style-Attribut entfernen

Kategorien: HTML/CSS/JS | 09. Mar 2013 | Kommentare: 0

Folgende Situation: eine Animation wie fadeIn(666) ändert die Sichtbarkeit über Inline-Styles. Das style-Attribut wird also am Beginn der Animation auf opacity:0 gesetzt und über 666 Sekunden auf opacity:1 interpoliert. Logisch bis hierher.

Das Problem ist, dass das style-Attribut so bestehen bleibt. D.h. wenn ich dem Element jetzt eine Klasse .see-through {opacity:0.5;} über $element.addClass(‘see-through’) zuweise, ändert sich nichts. Das style-Attribut ist spezifischer und überschreibt deswegen die Angabe der Klasse.

Es gibt verschiedene Lösungsansätze. Weiterlesen →

CanvasTileCreator Thumb 140x93

HTML/CSS/JS
01. Nov 2011
Kommentare: 0

Fancy Kacheleffekt für Bilder: Canvas sei dank!

Kategorien: HTML/CSS/JS | 01. Nov 2011 | Kommentare: 0

Heute mal wieder ein kleines jQuery Plugin! Dieses Mal zerlege ich ein Canvas-Element in viele kleine Kacheln, welche einzeln animiert werden können. So sieht das Ganze am Ende aus:

CanvasTileCreator

CanvasTileCreator

In Bewegung ist der Effekt natürlich beeindruckender. Einen Link zu einem Live-Beispiel findet ihr am Ende des Artikels ;)

Weiterlesen →

Slideshow Thumb

HTML/CSS/JS
25. Oct 2011
Kommentare: 0

Interaktive Slideshows für Präsentationen mit jQuery

Kategorien: HTML/CSS/JS | 25. Oct 2011 | Kommentare: 0

Moinsen Leute! Für eine Präsentation über HTML5 Canvas habe ich mich die letzten Tage mal hingesetzt, um eine jQuery Plugin für Präsentationen zu schreiben, welche komplett in HTML, CSS und JavaScript realisiert sind. Der Vorteil? Ich kann meine Canvas Beispiele direkt in die Folien einbauen. Außerdem kann ich mittlerweile dank CSS3 schicke Animationen realisieren. Auslöser für die Idee war die Slideshow von HTML5Rocks, sowie einige Präsentationen der Google I/O 2011. Den Code, sowie meine gewonnene Erfahrung möchte ich nun mit euch teilen. Live-Beispiele findet ihr etwas weiter unten im Text. Weiterlesen →

HTML/CSS/JS
25. Jul 2011
Kommentare: 0

Eine einfache Preroll für Spiele mit jQuery

Kategorien: HTML/CSS/JS | 25. Jul 2011 | Kommentare: 0

Ich gehöre zu den wenigen Entwicklern, die wohl erst an die Preroll und das Spielmenü denken und danach erst an das eigentliche Spiel. Ich kann irgendwie nicht anders als chronologisch arbeiten ;) Darum habe ich in einem kleinen Test eine erste Preroll in JavaScript programmiert. Eine Preroll ist quasi eine Slideshow, die vor dem eigentlich Spiel gezeigt wird. Sie zeigt im einfachsten Fall das Logo der Entwickler, häufig aber auch verwendete Engines und Techniken oder Werbung. Für die Fading-Effekte habe ich übrigens zum ersten Mal das sagenumwobene jQuery benutzt. Schickes Framework. Weiterlesen →