moo_ Templatesammlung

[Psi]

Lasst uns doch mal ein paar moo_ Templates sammeln die kleine Gimmicks in die Website einbringen.
Diese Seite soll nur ein Sammelthread sein! Bitte keine Fragen oder Diskussion!

[Psi]

moo_tooltips

Mootools Mouseover-Tips für Elemente mit tip-Klasse und title-Attribut

Demo: http://demos111.mootools.net/Tips
Doku: http://mootools.net/docs/more/Interface/Tips

[Psi]

moo_continuesFader

Blendet Elemente mit der Klasse continuesFade wiederholend (anhand der CSS-Eigenschaft Opacity) ein und aus.

Wir haben damit den Schein einiger Designelemente in Bewegung versetzt.

[Psi]

moo_img_hover

Das Bild eines <img>-Elements mit der Klasse hover wird beim Mouseover durch das Over-Bild ersetzt.
Das Over-Bild wird automatisch vorausgeladen und muss im gleichen Ordner wie das Originalbild liegen.
Zusätzlich muss es den Suffix _over tragen.

Bsp:
Originalbild: tl_files/bilder/meinBild.jpg
Over-Bild: tl_files/bilder/meinBild_over.jpg

[Psi]

moo_removeImageFloatOnMobile

Entfernt das floating und padding von Bildern im #main Container sofern die Fensterbreite 767px unterschreitet.
Zusätzlich wird das Bild unter dem Text positioniert.

Nützlich um Bilder auf kleinen mobilen Endgeräten nicht im Textfluss darzustellen.

[Psi]

greyscalehover

Bilder mit der Klasse grey werden in Graustufen dargestellt. Beim Mouseover fadet das Bild zur farbigen Variante.

[Psi]

moo_rotary

Bilder mit der Klasse rotary werden beim laden der Seite hereingezoomt. Im Template sind einige weitere Effekt auf Basis von CSS3-transform auskommentiert, diese werden leider von nur wenigen Browsern unterstützt. Kann ein Browser kein CSS3-transform bleibt der Effekt aus und das Bild wird sofort in voller Größe dargestellt.

Benötigt Element.getPrefixed.js und Fx.Parsers.Transform.js
von https://github.com/tbela99/Fx.css

[Psi]

moo_slidenav

Slidet die Unternavigation (ul.level_2) der Navigation mit der ID #mainNav beim laden der Seite nach unten ein.
Demo: http://www.4show.de

[Babelfisch]

moo_floatingtips

Hier noch ein weiterer Tooltip, der sich in allen Belangen an die eigenen Bedürfnisse anpassen lässt:

Seite: http://mootools.net/forge/p/floatingtips
Demo: http://jsfiddle.net/SLvUz/3/
Docu: http://wiki.github.com/lorenzos/FloatingTips/docs

[Tim G]

Smooth Anchor Highlights/Hovers

Hi, schmeiss ich mal was dazu:

Die Funktion rasselt durch alle 'a' - Anchors, oder andere Elemente und vergibt die Eventlisteners mouseover und mouseleave.
Bei mouseover wird, wenn via css-psydo :hover vergeben schnell der neue Wert gespeichert, auch der Ausgangswert und von diesem zum :hover getweent.
Damit ist es möglich einen weichen Farbtween ganz einfach mit CSS steuern zu lassen, ohne die Werte in JS ablegen zu müssen.

Grüße,
Tim