MooTools - Fx.Slide

Fx.Slides is an option that lets you display the content by sliding into view. It is very simple but enhances the look of your UI.

Let us discuss about creating and initializing an Fx.Slide, its options, and methods.

First, we will initialize the Fx.Slide class with a user-defined instance. For that, we have to create and select an HTML element. After that, we will apply CSS to these elements. Finally, we will initiate a new instance of Fx.Slide with our element variable.

Fx.Slide Options

There are only two Fx.Slide options — mode and wrapper.

Mode

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.

Wrapper

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 Methods

Fx.Slide also features many methods for showing and hiding your element.

slideIn()

As the name implies, this method will fire the start event and reveal your element.

slideOut()

Slides your element back to the hidden state.

toggle()

This will either slide the element in or out, depending on its current state. Very useful method to add to click events.

hide()

This will hide the element without a slide effect.

show()

This will show the element without a slide effect.

Fx.Slide Shortcuts

The Fx.Slide class also provides some handy shortcuts for adding effects to an element.

set(‘slide’)

Instead of initiating a new class, you can create a new instance if you ’set’ slide on an element.

Syntax

slideElement.set('slide');

setting options

You can even set options with the shortcut −

Syntax

slideElement.set('slide', {duration: 1250});

slide()

Once the slide is .set(), you can initiate it with the .slide() method.

Syntax

slideElement.slide('in');

.slide will accept −

  • ‘in’
  • ‘out’
  • ‘toggle’
  • ’show’
  • ‘hide’

…each corresponding to the methods above.

Example

Let us take an example that explains about Fx.Slide. Take a look into the following code.

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         .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: #F9E79F;
         }
         #slide_wrap {
            padding: 30px;
            background-color: #D47000;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            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'
               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();
            });
         });
      </script>
   </head>

   <body>
      <div id = "start" class = "ind">Start</div>
      <div id = "cancel" class = "ind">Cancel</div>
      <div id = "complete" class = "ind">Complete</div>
 
      <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>
         
   </body>
</html>

Output

Click on the buttons — openA, closeA, openB, and closeB. Observe the changes, effect, and event notification on the indicators.

Advertisements