Click here to Skip to main content
Click here to Skip to main content

Multi Block Fader, with Pause/Continue and Previous/Next Support

, 21 Mar 2009
Rate this:
Please Sign up or sign in to vote.
Save screen real estate with easy to use script. Fade photos, news items, etc. into the same location.

Introduction

This script allows to show a series of items in the one spot. For example, show a series of photos in a single image slot. Or a series of short news items. The items are faded in and out using a timer. A great way to present a lot of content using little screen real estate.

  • No need to know JavaScript. You only need to know HTML to use this script.
  • Time between fades, and length of fade are fully configurable.
  • Have as many groups of fading items as you like, each with their own fade times, etc.
  • Option to add Pause/Continue buttons or links, and Previous/Next buttons or links. Again, no JavaScript knowledge needed.
  • Click here to see the script being used on a web page.
  • Tested with Internet Explorer 7 and FireFox 3.

Requirements

  • You need to be able to write basic HTML to use this script. No knowledge of JavaScript needed.
  • Use any text editor you like.

Installation

  • Download the zip file with the source code, and unzip in a directory.
  • You'll find a number of *.html files with simple examples on how to use the script.
  • In the subdirectory js, you'll find file MultiBlockFader.js with the actual script.

How To Use

This assumes you have a web site with an existing *.html page, to which you want to add a number of items that will fade in and out on the same spot.

The file example-barebones.html that you found in the zip file has a very simple example illustrating the steps below:

  • Add the MultiBlockFader.js file to your web site. You could create a separate directory "js" and put the file there.
  • Load the script into your *.html file, by adding this line to the <head>...</head> section of your page:
    <head>
        ...
        <script type="text/javascript" src="js/MultiBlockFader.js"></script>
        ...
    </head>

    Note that this code assumes you put the script file in a sub directory js.

  • Now go to the spot within the body of your HTML file where you want to place the fading items, and place a container for the fading items, like so:
    <div class="MultiBlockFaderList(3000,1000,30)">
    </div>   
    

    About the numbers between the brackets:

    • First number is the time in between fades in milliseconds. So to make each item visible for 3 seconds, use 3 * 1000 = 3000.
    • Second number is the time that a fade takes in milliseconds. 500 (half a second) is a quick fade, 2000 (two seconds) is a slow fade.
    • Third number is the frames per second during the fade. 30 is a nice number here.

    DO NOT use spaces in the parameter list! MultiBlockFaderList(3000, 1000, 30) won't work. Instead, use MultiBlockFaderList(3000,1000,30)

  • Add the first item that will be faded in and out:
    <div class="MultiBlockFaderList(3000,1000,30)">
        <div class="MultiBlockFaderListElement">
            An image, text, or whatever html you want in your first element
        </div> 
    </div>

    Each element has to sit within a div tag, with class MultiBlockFaderListElement. That allows the script to find each individual item.

  • Add the rest of the items:
    <div class="MultiBlockFaderList(3000,1000,30)">
        <div class="MultiBlockFaderListElement">
            An image, text, or whatever html you want in your first element
        </div> 
    
        <div class="MultiBlockFaderListElement" style="display:none;">
            Second image, text, or whatever html you want in your second element
        </div> 
        
        <div class="MultiBlockFaderListElement" style="display:none;">
            Third image, text, or whatever html you want in your third element
        </div> 
    
        ...
    </div>

    Make sure to add the style="display:none;" to all items, except for the very first one. The script will make all items after the first one invisible when it starts up. However, if the page takes a long time to load or the visitor has a slow connection, there will be a time lag between the items being loaded and the script starting. The style="display:none;" ensures that the subsequent items won't be visible during that time lag.

    You can have as many items as you want. Each item can contain different HTML - so you can have just an image in one item, text in another, etc. If the items have different heights, the script will give each item the same height as the highest item. Make sure that each element sits in a div tag with class MultiBlockFaderListElement.

  • Done! Reload the page to see the effect.

Body Onload

You may be using an onload in the body tag, like this:

<body onload="...">

If that is the case, that will stop the script from starting. To fix this, add the following code at the end of your page, right before the </body> tag:

<script type="text/javascript">
MBF__Init();
</script>

</body> 

Add Pause/Continue Buttons

Normally, the items are faded in and out automatically by a timer. However, if a visitor sees an item they are interested in, they will want to pause the timer, so the item doesn't disappear while they are still looking at it.

Here is how to add Pause/Continue buttons:

<div class="MultiBlockFaderList(3000,1000,30)">

    ... div tags with class MultiBlockFaderListElement ...

    <input type="button" value="continue" class="MultiBlockFaderContinue" /> 

    <input type="button" value="pause" class="MultiBlockFaderPause" /> 
</div>

Simply create input tags for the Pause and Continue buttons. Give the Pause button the class MultiBlockFaderPause and the Continue button the class MultiBlockFaderContinue. This enables the script to recognize these buttons and give them the correct behaviour.

Be sure to put the buttons within the container - that is, the div tag with class MultiBlockFaderList(...). That way the script knows that the Pause and Continue apply to that container.

Note that the Pause and Continue buttons are never shown both at the same time. While the timer is running normally, only the Pause button is shown. When the visitor hits Pause, the Pause button disappears and the Continue button is shown.

A working example of all this is in file example-barebonesnav-button.html in the zip file.

Add Previous/Next Buttons

You may want to allow your visitors to go back to the last item, or to skip to the next item without waiting for the timer. Do this by adding Previous and Next buttons:

<div class="MultiBlockFaderList(3000,1000,30)">

    ... div tags with class MultiBlockFaderListElement ...

    <input type="button" value="previous" class="MultiBlockFaderPrevious" /> 

    <input type="button" value="next" class="MultiBlockFaderNext" /> 
</div>

The general idea is the same as with the Pause and Continue buttons. So the script can recognize your Previous and Next buttons, give the Previous button the class MultiBlockFaderPrevious and the Next button the class MultiBlockFaderNext.

And yes, you can have both Pause/Continue buttons and Previous/Next buttons in the one container:

 <div class="MultiBlockFaderList(3000,1000,30)">

    ... div tags with class MultiBlockFaderListElement ...

    <input type="button" value="continue" class="MultiBlockFaderContinue" /> 

    <input type="button" value="pause" class="MultiBlockFaderPause" /> 

    <input type="button" value="previous" class="MultiBlockFaderPrevious" /> 

    <input type="button" value="next" class="MultiBlockFaderNext" /> 
</div>

When you combine Previous/Next with Pause/Continue, then when a visitor clicks the Previous or Next button, the timer is automatically paused. To restart the timer, the visitor can click the Continue button. The reasoning here is that if a visitor clicks Previous, they are really interested in the last item, so don't want to be wisked away automatically by the timer. And if they click Next, they probably prefer to skip ahead without waiting for the timer.

Use Links Instead of Buttons

If you prefer to use links instead of buttons, simply use <a ... > tags instead of <input type="button" ... > tags. Use the same class names as with buttons. So it will look like this:

 <div class="MultiBlockFaderList(3000,1000,30)">

    ... div tags with class MultiBlockFaderListElement ...

    <a href="#" class="MultiBlockFaderContinue">continue</a>

    <a href="#" class="MultiBlockFaderPause">pause</a> 

    <a href="#" class="MultiBlockFaderPrevious">previous</a> 

    <a href="#" class="MultiBlockFaderNext">next</a>
</div>

History

  • 22nd March, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Matt Perdeck
Web Developer
Australia Australia
Twitter: @MattPerdeck
Blog: mattperdeck.com
Current project: JSNLog JavaScript Logging Package
 
Matt has over 6 years .NET and SQL Server development experience. Before getting into .Net, he worked on a number of systems, ranging from the largest ATM network in The Netherlands to embedded software in advanced Wide Area Networks and the largest ticketing web site in Australia. He has lived and worked in Australia, The Netherlands, Slovakia and Thailand.
 
He recently wrote a book, ASP.NET Performance Secrets (www.packtpub.com/asp-net-site-performance-secrets/book) in which he shows in clear and practical terms how to quickly find the biggest bottlenecks holding back the performance of your web site, and how to then remove those bottlenecks. The book deals with all environments affecting a web site - the web server, the database server and the browser.
 
Matt currently lives in Sydney, Australia. After 2 years at Readify, he now works at the global professional services company PwC. His current contract ends at 29 June 2014.
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionCould i add image from the database? PinmemberSubin Alex25-Mar-09 19:26 
QuestionOne suggestion. PinmemberShevchenko722-Mar-09 1:32 
AnswerRe: One suggestion. Pinmemberumlautbastards16-Apr-09 16:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 22 Mar 2009
Article Copyright 2009 by Matt Perdeck
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid