Fixed Div using MooTools 1.2

Posted on: November 21st, 2009

Tags: addEvent, Element, pin, position fixed

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;
}

Posted in MooTools | Trackback Url

Latest Blog Entries

Archive

News

Facebook shares see modest debut
Facebook shares end a volatile first day of trading at $38.23, barely above the company's initial pricing, having initially jumped more than 10%.
Met Police to extract phone data
Mobile phone data of suspects in police custody is to be extracted and retained, regardless of whether charges are brought, the BBC has learned.
Silicon trick for next-gen memory
Researchers reveal details of a promising way to make a fundamentally different kind of computer memory chip.

Martin Fischer said:

Client and partner of simra.ch

Wir können Simon Schärer als kompetenter und zuverlässiger Programmierer höchst weiterempfehlen. Er ist nicht nur ein guter Programmierer, sondern auch ein ausgezeichneter Designer.
Danke Developer’s Island