Toolbar Effects with the New MooTools More 1.2.1
The first release candidate of the MooTools More 1.2.1 package includes a ton of new features. Oddly enough, I wrote several packages almost identical to some of these about a year ago. It’s nice to see that I can now just use the pre-packaged versions.
One thing feature that I like to see in web applications is some sort of alert or toolbar at the bottom of the window that stays in place. In can pop in and out depending on whether it’s needed. With the new MooTools More package, it is easier than ever. Below is an example where we have a footer that goes across the entire width of the page. There is a button (called showhide) that causes the footer to pop in and out.
Here is the relevant HTML:
<style type="text/css">
<!--
body {
font: 20px/1.5em 'Lucida Grande', sans-serif;
margin: 0;
padding: 0;
}
#content {
margin: 15px 20% 15px 20%;
}
#footer {
width: 100%;
height: 75px;
border-top: 2px solid #008000;
background-color: #80ff80;
padding: 8px;
}
#showhide {
width: 100px;
border: 1px solid red;
background-color: #ff8080;
padding: 7px;
cursor: pointer;
}
-->
</style>
<body>
<div id="showhide">Toggle Footer</div>
<div id="content">
...
</div>
<div id="footer">My Footer</div>
</body>
The Javascript is shown here:
document.addEvent('domready', function() {
var footer = $('footer');
// Put the footer at the bottom of the window and pin it there
window.addEvent('resize', function() {
footer.unpin();
footer.position({'ignoreMargins':true,
'position':'topLeft',
'offset':{'x':0, 'y':window.getSize().y}});
footer.pin();
});
window.fireEvent('resize');
// Make sure the content of the page doesn't get covered by the footer
document.body.set('styles', {'margin-bottom':footer.getSize().y});
// Make the show/hide button toggle the display of the footer.
var showhide = $('showhide');
showhide.pin();
showhide.addEvent('click', function() {
$('footer').slide('toggle')
});
});
That’s all there is to it! The footer bar can be toggle by clicking on the showhide button and even when you scroll the footer stays attached to the bottom of the window.
