Fixed Div using MooTools 1.2

admin — Sat, 21 Nov 2009 14:59:28 +0000

Newer browsers (such as Firefox or Internet Explorer 7) support position:fixed CSS option to pin something to particular window place. However page layout will be ruined if it is not supported by the browser. To solve the issue you have to create a javascript that tries to use position:fixed and if fixed positioning isn’t available, moves the DIV with position:absolute. MooTools 1.2 provides a component to create fixed elements, which is called Element.pin located in the more section.

Here is the MooTools part:

window.addEvent('domready', function() {
$('fixed-menu').pin();
});

The fixed div menu

<div id="fixed-menu"><p>fixed</p></div>

The position of the div has to be aboslute

#fixed-menu {
position:absolute;
left:10px;
top:10px;
}

Ajax Request Using MooTools 1.2

admin — Fri, 20 Nov 2009 17:23:58 +0000

Ajax has become a very important part of the modern web and that won’t change in the near future. The MooTools Framework has made Ajax so simple that even a newbie developer can get their dynamic pages working in no time.

The xhtml part looks like this:

<p>
<a id="start" href="#">Click here</a>
to start Ajax request
</p>
<div id="log">
<p>Waiting...</p>
</div>

Since version 1.2 you must create an instance of the Request class. We provide our request with the method get (post is certainly provided too), the URL, optional data information, and optional onRequest and onComplete event handlers.

And that’s how you made it with the old mootools version 1.1.. but we don’t use that anymore

$('start').addEvent('click', function(e) {
e = new Event(e).stop();
var url = "ajax.php";
new Ajax(url, {method: 'get',update: $('log')
}).request();
});

simra » MooTools

Fixed Div using MooTools 1.2

Ajax Request Using MooTools 1.2