Web-MA Dynamic news scroller DOM and CSS compatible

Current Version: 1.3.1 released on 03/28/2008

Let your news scroll without flash or java objects and upload it with an external XML file.


This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

The GNU license to which this software is referering is available at: http://www.gnu.org/licenses/gpl.txt

If you want, you can add a link to www.web-ma.com, making it easy for others to recognize the author of this script.


Why my own scroller?

The idea to develop this scroller is nothing exceptional. I don't want to re-invent the heat water, but surfing on the web for a news scroller Css compatible able to load news' elements from an external file was giving me zero results. At least until now that I've developed my own scroller.
Technically the news scroller are not a good idea. Their usage has been introduced by the end of 90ies web design's years, so they aren't so young. They annoying attention seeker, they may confus user ...
So there good reasons why News Scroller shouldn't be used, but customers love them, and when you try to convince them to change idea ... their reply is always the same: I like it.
Ok, since I surrendered to the idea that customer's word comes always before of mine, here it is my script.

Why use this scroller?

Well, there are no good reasons ... I said it before, but if you like a free script, please go ahead and download it.

Using the scroller?

The scroller is composed by three parts: a demo page, a CSS file and the javascript file.

Your HTML needs just a reference to the CSS file to do some make-up to the scroller ...

	 <style type="text/css">@import "newsScrollerDom.css";></style>
	
an element with the ID "news" that contain the unordered list tag UL.

	 <div id="news"><ul id="list"></ul></div>
	
A reference to the external javascript file.

	 <script src="newsScrollerDom.js" type="text/javascript"></script>
	
Obviously there should be available also an XML file, in the path specified into the JS' variable.
Just after loading the page, the script will automatically load the external file, add the li elements, one for each entry in the file, then start to scroll them. That's easy.
Some variables are available in the JS to let you customize the behaviour of the scroller.

Customizing the scroller?

Here it is the list of the variable that you can change without affect the script. Any change outside these variables will result in crashes, so do it at your own risk.

	var startPos = 120;	// initial position
	var speed = 30; // Speed of scroller higher number = slower scroller
	var cssClass = 'JS'; // class to add when JS is available
	var stopMessage = 'Stop scrolling'; // Message to stop scroller
	var stopperID = 'newsStopper'; // ID of the generated paragraph
	var newsID = 'news'; // ID of the news box
	var enableStopper = false;
	var xmlDocFile = "newsScrollerDom.xml";
	var useXml = true;
	var fixedNews = true;
	var JSImageOnClickFunction = "alert('%PH%');"; // %PH% is the image placeholder;
	

There isn't one property more important than another. Everyone has its own mean, but those one on which I want to focus are the last three.

1) Changing the boolean variable enableStopper to true, the script will also add a paragraph with a link allowing the visitor to stop the scroller and show all the elements immediately.
In this case the scroller will start to use the CSS beauties provided by the standard ul and li HTML tag.

2) xmlDocFile contains the relative path of the XML file that will be loaded during the startup. Wrong name or position will result in an empty scroller. Please note that the path should be relative to the HTML file not to the script file that could be located anywhere.

3) useXml variable instruct the script to use the external XML file or an internal variable called elements. This is a one-dimensional array that contains elements grouped by three. Have a look at the code for better understanding.

Some notes

The scroller has been tested with recent and DOM - CSS compatible browser like:
* Firefox 1.5 and superior;
* Internet Explorer 6.0 and superior;
* Opera 8.0 and superior;

It's appreciated to know the compatibility with other browsers also on different OS like Windows which I use to work.

The XML file' structure

	
	<element>
		<anchorText>Test1</anchorText>
		<anchorLink></anchorLink>
		<description>This is the test number 1</description>
		<images>
			<imgName>logo.jpg</imgName>
			<imgName>logo1.jpg</imgName>
			[...n]
		</images>		
	</element>	
	
	

Examples

This demo shows you the script working with an external XML file.

This demo shows you the script working with the internal array.

Back to Open Source Utility list.



Copyright © 2006 - 2008 http://www.web-ma.com. All rights reserved.