navigation

10 minutnoto "demo na maro"


myLayer

ot tuk, 2 links shte imat click event interception chrez selectors i event handlers:
$("myLayer").getElements("a.mailMe[href^=mailto:]")

Firefox config
Mail coda at dci dot uk dot net - not mailMe class
Mail coda at dci dot uk dot net - mailMe class
Mootools home page, mailMe class
coda@hush.ai - mailMe class

Drugo 10-min demo, mootools 1.11

relevant javascript

// load syntax highlighter script
new Asset.javascript("/ch/CodeHighlighter.js");
new Asset.javascript("/ch/javascript.js");

// code za MARO

// vsichki email links v div id=myLayer da prestanat da budat clikvani
// i da pokazvat dinamichen dialog vmesto tova
$("myLayer").getElements("a.mailMe[href^=mailto:]").addEvents({
    click: function(e) {
        // spirame mouse click-a
        var e = new Event(e).stop();

        // coordinatite na linka...
        var coords = this.getPosition();

        var myText = new Element("textarea", {
                            "id": "mailbody",
                            "rel": this.getText(),
                            "class": "myTextBoxes" // izmislen class... prosto example
            });

            myText.set({
                styles: {
                    padding: "2px",
                    opacity: .9,
                    border: "1px solid #000",
                    "border-left": "4px solid #444",
                    width: "300px",
                    height: "100px",
                    position: "absolute",
                    left: coords.x+40,
                    top: coords.y+26
                },
                value: "enter email body here and tab/click out to send!",
                events: {
                    focus: function() {
                        if (this.get("value") == "enter email body here and tab/click out to send!")
                           this.set("value", "");
                    },
                    blur: function() {
                        var message = $("mailbody").get("value");
                        if (message.clean().length == 0)
                            return false;

                        var myJax = new Request({
                            method: "post",
                            url: "demo.php",
                            onComplete: function() {
                                eval(this.response.text);
                            }
                        }).send("a=mail&body="+message.stripScripts());
                    } // end focus
                } // end events
            }).injectAfter(this);

        // sianka...
        var coords = myText.getPosition();
        var myshadow = new Element("div", {"id": "myshadow"});
            myshadow.set({
                styles: {
                    position: "absolute",
                    background: "#444",
                    width: "308px",
                    height: "105px",
                    "left": coords.x+4,
                    "top": coords.y+4,
                    "border": "1px solid #000"
                }
            }).injectBefore(myText).fade(.4);


    },
    mouseenter: function() {
        // prosto niakakuv event...
        this.set("tween");
        this.tween("letter-spacing", "1px");
    },
    mouseleave: function() {
        // pak event. naprimer, mouseenter and mouselave sudurjat fixes za IE i pogreshni window.event mouseout pri
        // mouseover na child element
        this.set("tween");
        this.tween("letter-spacing", "-1px");
    }
}).setStyles({"background": "#F1F2F4", "letter-spacing": "-1px"});

// END CODE ZA MARO! :)

project box



Firefox 2

home | clients | contact us | pantone selector | photo story photo gallery