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.

As great as Google Analytics is, it does not track ajax request out-of-the-box. But don’t fear, tracking Ajax calls with Google Analytics is easier than you think. I’m not going to go over how to set up Google’s tracking code on your site, I’m going to assume you’ve already got analytics up and running.

Method 1

The fast and dirty way

First off, I’m going to assume you’re using some sort of JavaScript framework. I prefer MooTools, but this method should work with any framework. Every framework’s Ajax request methods have a built in “successful request” callback. This method is usually and appropriately called onSuccess. This callback method means that your request has completed and returned a successful response. You’re probably already familiar with Google Analytic’s pageTracker._trackPageview(); code, since you have it in every page you are already tracking. That method also takes an optional string argument, usually the name of the page you are tracking. By default that argument is the current page that the code is on. We’re going to use that optional argument in our onSuccess callback to track our request. Here’s a simplified version of the Ajax request code from the contact form on this site using MooTools 1.2.

this.set('send', {
   onSuccess: function(response){
      //a successful request
   },
 
   onFailure: function(response){
      //a failed request
   }
});
this.send();

For this particular example we want to track a successful contact form submittal using a unique string that will show up in our analytics page. I decided to use “/contactFormSubmitted”. This is the name of the “page” that will show up in Google Analytics. You can use the actual page name that the request is submitted to or any identifier you want. So lets add the code to our success callback

this.set('send', {
   onSuccess: function(response){
      //a successful request
      pageTracker._trackPageview('/contactFormSubmitted');
   },
 
   onFailure: function(response){
      //a failed request
   }
});
this.send();

Now anytime someone successfully fills out and submits the contact form on my site, i’ll see it show up in the content section on Google Analytics, as seen here.

I know, the numbers are overwhelming, but the point is, my Ajax request is being correctly tracked.

Method 2

Extending the Request Class to automatically track the requested url

So another way to do this would be to extend the Request class itself and have it track the URL automatically after a successful request. Once again, this is specific to MooTools 1.2. What i want to do is overwrite the default Request.onSuccess method with our new functionality while maintaining the original functionality. This method eliminates the need to add the tracking code to every single success callback in you code base. Very useful for retrofitting large sites with lots of Ajax calls or just getting free functionality.

To implement, simply add the following lines somewhere in your JavaScript file. Just make sure the file you’re adding it to is embedded after MooTools.

Request.implement({
   onSuccess: function() {
      //google pageview code
      pageTracker._trackPageview(this.options.url);
      //default onSuccess code
      this.fireEvent('complete', arguments).fireEvent('success', arguments).callChain();
   }
});

This overwrites the default onSuccess method for the Request Class, keeping the original functionality in tact but adding the tracking code for every Ajax call in your application. The URL of the request will show up on your analytics page.