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
myLayer2
tuk nishto niama da se prikachi.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
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! :)







