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
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
