Download the script and demo
View the demo
Download the MooTools framework

What does it do?

The basic premise is that you have a help message on one or more of your site’s pages which are incredibly useful the first few times the user visits that section. However, once the user understands how that page works, that once useful help message is now just in the way. So to solve this problem you might put a “Close this message” or “Hide this message” link in there so that your users can get it off their screen since it’s no longer needed. That’s where HideThisMessage comes in.

HideThisMessage finds all the elements with the className you specify, hides them (with or without a snazzy animation) when the user clicks on the link within that element with the className you specify, and remembers via cookies which elements should be shown and which should be hidden/removed. Each element needs its own unique id and the user must have cookies enabled.

Linking the required JavaScript files

You need to link the appropriate JavaScript files in the head of your document. HideThisMessage requires MooTools 1.2 or MooTools 1.11. I’ve created classes for both versions. It also requires the Hash.Cookie Plugin for MooTools which i’ve included in my download package for your convenience. Place the following lines before the closing head tag in the top of your document.

<script src="/path_to/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="/path_to/hidethismessage.min.js" type="text/javascript" charset="utf-8"></script>

Make sure you call the hidethismessage script AFTER mootols or it won’t work

Initializing HideThisMessage

Now you need to call the HideThisMessageclass passing to it the variables needed to get the plugin working. HideThisMessage takes 2 required and 1 optional arguments.

• elementClass: REQUIRED (String)(default: ‘hideWindow’) – The ClassName of the element that is to be hid.
• hideBtnClass: REQUIRED (String)(default: ‘hideWindowBtn’) – The ClassName of the link contained within elementClass that, when clicked, hides the window.
• animate: OPTIONAL (Boolean)(default: true) – Whether or not the window animates closed when the hideBtnClass link is clicked.

Now lets create a new instance of our HideThisMessage class.

         window.addEvent('domready', function(){
            var myMessageHider = new HideThisMessage({
               elementClass: 'hideWindow',   
               hideBtnClass: 'hideWindowBtn',
               animate: true                 
            });
         });

Public Methods

HideThisMessage only has 1 public method

• reset() Resets the hidden status of all hidden windows.

Download the script and demo
View the demo
Download the MooTools framework

Setting up your Markup

In order for the script to work you need to setup your document to mask out the elements you’re sliding. here’s a diagram of what I’m talking about:

Example markup:

      <div id="maskDiv">
         <div id="sliderContainer">
            <div class="sliderElement"><p>Element 1</p></div>
            <div class="sliderElement"><p>Element 2</p></div>
            <div class="sliderElement"><p>Element 3</p></div>
            <div class="sliderElement"><p>Element 4</p></div>
            <div class="sliderElement"><p>Element 5</p></div>
            <div class="sliderElement"><p>Element 6</p></div>
            <div class="sliderElement"><p>Element 7</p></div>
         </div>
         <a href="#" id="leftBtn">move left</a>
         <a href="#" id="rightBtn">move right</a>
      </div>

Example CSS:

#maskDiv{
   width: 300px;
   height: 200px;
   overflow: hidden;
}
#sliderContainer{
   height: 100px;
   margin-top: 50px;
}
.sliderElement{
   width: 70px;
   margin: 15px 15px;
   height: 70px;
   float: left;
}

Linking the required JavaScript files

Now that your document is setup correctly to use the ImageSlider, you need to link the appropriate javascript files in the head of your document. ImageSlider requires MooTools 1.2. Place the following lines before the closing head tag in the top of your document.

<script src="/path_to/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="/path_to/imageslider.min.js" type="text/javascript" charset="utf-8"></script>

Make sure that you call the ImageSlider script AFTER Mootools or it won’t work.

Initializing the ImageSlider

Now you need to call the ImageSlider class passing to it the variables needed to get the ImageSlider working. ImageSlider takes 5 required and 3 optional arguments.

• objToSlide: REQUIRED (String) – The id of the holder element that will be sliding.
• sliderElements: REQUIRED (String) – The type of elements contained within the slider can be any html element(div, p, a, span).
• numOfElementsToSlide: OPTIONAL (Number) – Number of elements to slide.
• numOfElementsShown: REQUIRED (Number) – Number of elements visible or unmasked
• leftBtn: REQUIRED (String) – The ID of the element that when clicked will slide your imageslider left.
• rightBtn: REQUIRED (String) – The ID of the element that when clicked will slide your imageslider right.
• easing: OPTIONAL (Function) – The type of easing to use on transition (more info on easing).
• onSlideComplete: OPTIONAL (Function) – Callback Function to fire once sliding is completed. returns index.

Now lets create a new ImageSlider using our markup example above:

window.addEvent('domready', function(){
  var mySlider = new ImageSlider({
      objToSlide: 'sliderContainer',
      sliderElements: 'div',
      numOfElementsToSlide: 2, 
      numOfElementsShown: 3, 
      leftBtn: 'leftBtn',
      rightBtn: 'rightBtn',
      onSlideComplete: function(index){
         //callback function stuff here
      }
   });
});

You’ll notice that I’m using the domready Event to instantiate our new ImageSlider. This is a custom MooTools Event which will execute when the DOM has loaded. To ensure that DOM elements exist when the code attempting to access them is executed, they should be placed within the ‘domready‘ event.

View the demo of our newly created ImageSlider.

Public Methods

ImageSlider only has 1 public method.

• slideTo(position:Number) This will slide to the position you specify where position is the number of the element you want to show up within the masked area.