05
Apr
Mootools is a great Javascript framework. Using it to achieve great effects couldn’t be easier.
With essentially no Javascript knowledge whatsoever you can use many of the effects in the library with ease. For instance the slider effect to switch the navigation on and off at the top of this page is done like this.
Firstly, head on over to Mootools and download yousrself the framework. To keep you code light on its feet you can choose to only download the bits you need and leave the rest. You will need the Core, obviously, Window.DomReady and Fx.Slide. Tick each component and then download the js file.
Place it in a suitable location on your website and then include it in the head of your website…
<script type="text/javascript" src="/js/mootools-release-1.11.js"></script>
Next you will need an event handler and some code to initiate the effect so place this after the above link…
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
The next thing you need to do is wrap some of your HTML content in some divs to mark the section you wish to scroll. Here’s an example…
<body>
<div id="top-panel">
<p>This is the content which will slide up and down</p>
</div>
<h5 id="toggle_slider><a href="#" id="toggle">Toggle effect</a></h5>
</body>
And the rest is done with CSS. For instance you may choose to style the H5 id above to remove the link text and replace with a suitable image. Whatever you choose the fact is it’s stupidly easy to use this effect and unless you get carried away it can really help the layout of your site.
If you want to load the page with the slider hidden, just add…
mySlide.hide();
before the event handler in your header, i.e….
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
If it’s too much effort transferring all this code yourself, or you just don’t get it… Just help yourself to the code below…