MooTools

Schatten

Ich habe etwas mit Schatten herumexperimentiert und, in der einfachsten Version, ein in allen vielen Browsern annehmbares Ergebnis erzielt:

Mac: Safari 3, Opera, Firefox
Win: Safari, Opera, Firefox, IE7 (im IE6 sieht es irgendwie nicht schön aus)

Meine Klasse erzeugt dynamische Schatten um rechteckige Webinhalte wie DIVs oder Bilder. Dafür werden mit JavaScript einfach viele weitere Container mit abfallender Hintergrund-Transparenz hinter das Objekt gezeichnet. Wichtig ist dabei nur, dass die Maße (Breite und Höhe) der Elemente mit CSS gesetzt werden. Man kann dann noch eine CSS-Klasse angeben um z.B. Einfluss auf die Schattenfarbe zu nehmen.

Hier ein Beispiel (Beispiel 2).

Download bei eSteak.net

Scrolling

Ich habe auch etwas mit einem schöneren Ersatz für die normalen Scrollbalken herumgespielt.
Details gibt es auf der Demoseite.

Download bei eSteak.net

Galerie (und v2 für MooTools 1.2)

Eine kleine Bildergalerie mit Thumbnails, Paging usw.
Zur Demo
(v2)

v1 für MooTools 1.11 Download bei eSteak.net

v2 für MooTools 1.2 Download

Galerie-AddOn

Damit auch per JavaScript dynamisch neue Bilder hinzufügen kann, habe ich noch eine kleine Erweiterung (v2) für die JSGallery gebaut.

Darauf aufbauend gibt es außerdem Support für Flickr (v2) und SimpleViewer (v2).

Über Fehlermeldungen und Verbesserungsvorschläge würde ich mich freuen!
Ansonsten viel Spaß damit.

Wer meine Arbeit unterstützen möchte, kann mir gerne etwas spenden oder von meiner Wunschliste bestellen 🙂

10 Antworten zu “MooTools”

  1. Der Start meiner Spielwiese | A+media dev-Blog sagt:

    […] MooTools […]

  2. Anpassbare Scrollbalken mit MooTools | A+media dev-Blog sagt:

    […] MooTools […]

  3. zakwer sagt:

    Hi Grundi… like this:

    current.setStyles({
    position: ‚absolute‘,
    top: 0,
    left: 0,
    margin: 0,
    padding: 0,
    height: current.getCoordinates().height,
    width: current.getCoordinates().width
    });

    … if u dinamically get height and width you can resize the shadow without any css specifications 🙂
    so the user can have a div with a shadow and a dinamic height.

    congratulations for your work 🙂

    zak

  4. Yannis sagt:

    heyyo,
    Superscroller! Hat mir den Tag gerettet.
    Nur eine kurze Frage:
    Wie kann ich bei onload ihn auf eine besondere Position vorscrollen lassen?
    entweder in px oder mit einem Anker.
    Geht das überhaupt?

    Grüsse, beste, Dank, besten,
    y

  5. Grundi sagt:

    Hi Yannis.

    Ja, das geht. Mit der Methode refresh(). Der kannst du eine Zahl mitgeben die 0<= x <= Höhe des Containers sein muss. Du musst also im Onload das Control erzeugen und dann myScrollControl.refresh(10); aufrufen um 10 Pixel nach unten zu scrollen. Es sollte außerdem gehen, wenn du scrollUp() und scrollDown() aufrufst. Da must du dann eine positive Zahl reinwerfen, damit er in die Richtung der Methode scrollt. Das wäre quasi die Alternative wenn du nur relative Sprünge machen willst. refresh() springt ja zur absoluten Angabe. Hoffe das hilft dir erstmal. Viele Grüße, Michael

  6. Internetagentur sagt:

    Sehr schöne Scrollbalken kann man hiermit erstellen …. gefällt mir wirklich sehr gut und ist auch sehr brauchbar für ein schöneres Gesamt-Layout.

  7. Marco sagt:

    Hi, there’s a problem with JSGallery_simpleviewer and JS2Gallery_simpleviewer.
    They do not work with IE7 (i haven’t tested ie8), giving a javascript error.
    The problem is in the of parsing the xml file:
    ‚firstchild.attributes.imagepath.textcontent‘ is null

  8. Internetagentur sagt:

    Mootools sind einfach super cool.

  9. redesign sagt:

    firstChild.attributes.imagePath.textContent is null – the same error in IE8

  10. Gustav sagt:

    Hallo,
    Die moo-gallery2 ist nicht mehr zugänglich auf eSteak.net
    Gibt es nochh eine andere Möglichkeit das runterzuladen?

Einen Kommentar schreiben