Kurz notiert: Die Suche nach der Smart Sticky Floating Box

06 Aug
Verfasst von Freizeitler unter Javascript, Kurz notiert

Neulich bin ich auf dem Blog von Soh Tanaka auf eine nette Spielerei gestossen. Ein HTML-Element mit einer fixen Position im Browserfenster (in diesem Fall eine Social Network/Info-Box). Klingt erstmal unspektakulär, allerdings ist es das spezielle Verhalten dieses Elements, dass die ganze Sache interessant macht und den Einsatz von jQuery erfordert.

Die Suche – der Weg ist das Ziel

Da gibt es doch bestimmt schon ein Snippet oder ein Plugin, denke ich mir, aber wie soll ich danach suchen? Also tippe ich bei Google jquery menü am oberen rand browserfenster ein und drücke den Suche-Knopf. Die deutschen Ergebnisse sind es nicht so, deswegen lasse ich mir die übersetzten, englischen Ergebnisse anzeigen. Das sorgt nicht nur für eine Menge Spaß, sondern bringt mich meinem Ziel ein ganzes Stück näher. Der Artikel Erstellen einer Floating HTML Menü mit jQuery und CSS kommt der Sache sogar schon verdammt nahe, allerdings will ich, dass das Element nach dem verlassen der Startposition am oberen Rand des Browserfensters hängt.
Jetzt weiss ich wenigstens wonach ich suchen muss und tippe Floating Menü mit jQuery. Treffer! Natürlich die jQuery Plugins.

Das Plugin

Und da ist sie also, die Smart Sticky Floating Box und sie lässt sich wunderbar einfach anwenden. Am unteren Ende der Funktion $.fn.stickyfloat kann man die ID des Elements, sowie die Dauer der Animation festlegen.

$('#navigation').stickyfloat({ duration: 200 });

Das fließende Element bewegt sich innerhalb seines Elternelements, in dem es absolut positioniert wurde. So kann man Start- und Endpunkt genau festlegen und es verläuft alles in geregelten Bahnen.
Das Ergebnis seht ihr ja jetzt (vorläufig?) live auf diesem Blog. Noch Fragen?

 

Wordpress: Freizeitlers NonPurista!-Theme

20 Nov
Verfasst von Freizeitler unter Downloads, Javascript

Die Experimente und Spielereien der letzten Wochen wurden in einem einzigen Wordpress-Theme zusammengefasst.
Daraus entstand eine witzige Mischung aus Zweckmäßigkeit und Wahnsinn, aus CSS und MooTools. Get kissed by the Cow!

mehr »

 

MooTools: Fading Opacity. Schickes Menü mit Mouseover

29 Okt
Verfasst von Freizeitler unter Downloads, Javascript

Nach einigen kleineren Startschwierigkeiten habe ich das Ding zum laufen gebracht. Und ich muss sagen: Mootools ist wirklich Kinderleicht und man kann es überall einsetzen…

mehr »

 

Javascript: Von der Multibox über Tooltips zu MooTools

22 Okt
Verfasst von Freizeitler unter Downloads, Javascript

Wenn die mühsam angelesenen Grundkenntnisse in Javascript langsam zu verblassen drohen helfen oft nur noch glückliche Umstände, um das Interesse neu aufflammen zu lassen. Und es begann eigentlich ganz harmlos mit der Multibox…

mehr »