- 206.420.2394
- Contact Us
-
Chat
- |
- Client Login
Welcome to day 23 of 30 days of Mootools 1.2 tutorials. If you haven’t already, be sure to check out the rest of our mootools series. Continuing with our tutorials about the Fx plugins, we are going to take a look at Fx.Slide. This plugin lets you display content by sliding it into view. It is very simple to use and makes a great addition to your UI toolkit.
Like all the other classes we have looked at, the first thing you need to do is initiate a new instance of the Fx.Slide class and apply it to an element.
First, lets set up our html for the slide element.
<div id="slide_element" class="slide">Here is some content to slide.</div>
And our css doesn’t need to be anything fancy.
.slide { margin: 20px 0; padding: 10px; width: 200px; background-color: #DAF7B4; }
Finally, we initiate a new instance of Fx.Slide and pass it our element variable.
var slideElement = $('slide_element'); var slideVar = new Fx.Slide(slideElement, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' //Fx Options transition: 'sine:in', duration: 300, //Fx Events onStart: function(){ $('start').highlight("#EBCC22"); } });
Since Fx.Slide is an extension of Fx, you can use any of the Fx options and events, but Fx.Slide does come with a set of options itself.
There are only two Fx.Slide options, ‘mode’ and ‘wrapper.’ Frankly, I have never found myself using ‘wrapper’ (I have never come across the need), but ‘mode’ is what determines whether you want to slide horizontally or vertically.
Mode gives you two choices, ‘vertical’ or ‘horizontal’. Vertical reveals from top to bottom and horizontal reveals from left to right. There are no options to go from bottom to top or from right to left, tho I understand that hacking the class itself to accomplish this is relatively simple. In my opinion, it’s an option I would like to see standard, and if anyone has hacked the class to allow this options, please drop us a note.
By default, Fx.Slide throws a wrapper around your slide element, giving it ‘overflow’: ‘hidden’. Wrapper allows you to set another element as the wrapper. Like I said above, I am not clear on where this would come in handy and would be interested to hear any thoughts (thanks to horseweapon at mooforum.net for helping me clear this up).
Fx.Slide also features many methods for showing and hiding your element.
As the name implies, this method will fire the start event and reveal your element.
Slides your element back to the hidden state.
This will either slide the element in or out, depending on its current state. Very useful method to add to click events.
This will hide the element without a slide effect.
This will show the element without a slide effect
Each of the methods above also accept ‘mode’ as an optional parameter, letting you override anything set in the options.
slideVar.slideIn('horizontal');
The Fx.Slide class also provides some handy shortcuts for adding the effect to an element.
Instead of initiating a new class, you can create a new instance if you ’set’ slide on an element.
slideElement.set('slide');
You can even set options with the shortcut:
slideElement.set('slide', {duration: 1250});
Once the slide is .set(), you can initiate it with the .slide() method.
slideElement.slide('in');
.slide will accept:
…each corresponding to the methods above.
That pretty much covers the basics. The example below uses most of what we learned above, displays a few different types of slides, and provides some indicator divs so you can watch the events.
First, set up the html.
<div id="start" class="ind">Start</div> <div id="cancel" class="ind">Cancel</div> <div id="complete" class="ind">Complete</div> <br /><br /> <button id="openA">open A</button> <button id="closeA">close A</button> <div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div> <button id="openB">open B</button> <button id="closeB">close B</button> <div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain'"</div> <button id="openC">toggle C</button> <div id="slideC" class="slide">Here is some content - C</div> <button id="openD">toggle D</button> <div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div> <button id="openE">toggle E</button> <div id="slide_wrap"> <div id="slideE" class="slide">Here is some content - E</div> </div>
Now, our css. We can keep it pretty simple.
.ind { width: 200px; padding: 10px; background-color: #87AEE1; font-weight: bold; border-bottom: 1px solid white; } .slide { margin: 20px 0; padding: 10px; width: 200px; background-color: #DAF7B4; } #slide_wrap { padding: 30px; background-color: #D47000; }
Finally, our mootools javascript:
window.addEvent('domready', function() { //EXAMPLE A var slideElement = $('slideA'); var slideVar = new Fx.Slide(slideElement, { //Fx.Slide Options mode: 'horizontal', //default is 'vertical' //wrapper: this.element, //default is this.element //Fx Options link: 'cancel', transition: 'elastic:out', duration: 'long', //Fx Events onStart: function(){ $('start').highlight("#EBCC22"); }, onCancel: function(){ $('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22"); } }).hide().show().hide(); //note, .hide and .show do not fire events $('openA').addEvent('click', function(){ slideVar.slideIn(); }); $('closeA').addEvent('click', function(){ slideVar.slideOut(); }); //EXAMPLE B var slideElementB = $('slideB'); var slideVarB = new Fx.Slide(slideElementB, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' //Fx Options //notice how chaining lets you click multiple time //then mouse away and the effects will keep going //for every click link: 'chain', //Fx Events onStart: function(){ $('start').highlight("#EBCC22"); }, onCancel: function(){ $('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22"); } }); $('openB').addEvent('click', function(){ slideVarB.slideIn(); }); $('closeB').addEvent('click', function(){ slideVarB.slideOut(); }); //EXAMPLE C var slideElementC = $('slideC'); var slideVarC = new Fx.Slide(slideElementC, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' //wrapper: this.element, //default is this.element //Fx Options //link: 'cancel', transition: 'sine:in', duration: 300, //Fx Events onStart: function(){ $('start').highlight("#EBCC22"); }, onCancel: function(){ $('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22"); } }).hide(); $('openC').addEvent('click', function(){ slideVarC.toggle(); }); $('slideD').slide('hide'); $('openD').addEvent('click', function(){ $('slideD').slide('toggle'); }); //EXAMPLE C var slideElementE = $('slideE'); var slideWrap = $('slide_wrap'); var slideVarE = new Fx.Slide(slideElementE, { //Fx.Slide Options //mode: 'vertical', //default is 'vertical' wrapper: slideWrap //default is this.element }).hide(); $('openE').addEvent('click', function(){ slideVarE.toggle(); }); });
Fx.Slide is a versatile and incredibly useful plugin. To learn more, check out the Fx.Slide docs, the Fx.Morph and Fx docs.
Also, be sure to check our tutorials on Fx.Morph and the Fx options and events.
Along with everything you need to get started.
Will post a link once it is published
I wanted to get this one in before we got away from the basics, as its such a commonly used plugin. As always, hope you find this useful and let us know if you have any questions, comments or suggestions.
