View Full Version : [DHTML] Scroller (yet another one)

03-04-2008, 02:06 PM

Seb: that's me :)
Originally I had to find/write a scroller for work, but after looking at a few examples and realised that there was no way I was going to find the one scroller that had all the features I wanted, I worked out it'd be easier to create my own. So here it is :)

This scroller is a sort of compilation, it won't bring anything new to your current scrollers, and in fact, if you have a working one, there's no point replacing it. What it does bring however, is ease of use for non-programmers maybe, or for programmers who don't have time to waste and want a quick result.
As I said it's a compilation, which means, even though I am the author, it has been greatly inspired by code and features I found in other scrollers on this site, I did not invent anything, which is also why I'm now posting it, I feel I owe the community ;)
Its main features would be:
- Displays items 1 by 1, or not,
- Scrolls any direction,
- Remembers its last position before postback, or not,
- Pauses on items, or not.

I thought the best to show you what it can do is to set up a few simple examples you can check out for yourself, so here there are:
- example1 (http://www.b00n.com/Scroller/SimpleVersion/example1.htm)
- example1_customised (http://www.b00n.com/Scroller/SimpleVersion/example1_customised.htm)
- example2 (http://www.b00n.com/Scroller/SimpleVersion/example2.htm)
- example3 (http://www.b00n.com/Scroller/SimpleVersion/example3.htm)
- example4 (http://www.b00n.com/Scroller/SimpleVersion/example4.htm)

The scroller is devided in 3 files:
- Utils, utilities such as GetCookie, GetObject or AddEvent that don't really have anything to do with the scroller object itself.
- ScrollerManager, responsible for creating and saving scrollers, originally the idea of using a manager was to be able to save the position of all the scrollers into 1 cookie only, but i'll let you guys implement that if you feel like it ;) at this moment it's still sort of usefull if you have more than one scroller on the page, it holds a collection of all the instantiated scrollers.
- Scroller, the actual object :)

a) Download the 3 files and link them in your page (I haven't actually tried to see if the order makes any difference):

<script type="text/javascript" src="Utils.js"></script>
<script type="text/javascript" src="ScrollerManager.js"></script>
<script type="text/javascript" src="Scroller.js"></script>
b) Instantiate a ScrollerManager object, the actual name of the variable MUST be "ScrollerManager":

var ScrollerManager = new ScrollerManager();
c) Create scroller objects using the ScrollerManager's CreateScroller method:

var sebscroller = ScrollerManager.CreateScroller("sebscroller");
d) Set your scroller's properties and add items:

sebscroller.Width = 100;
sebscroller.Height = 100;

e) Call the scroller's Render method to render the scroller where you want:

<script language="javascript" type="text/javascript">sebscroller.Render();</script>


Width: Integer: Width of the scroller (pixels).
Height: Integer: Height of the scroller (pixels).
BorderWidth: Integer: Width of the scroller's border (pixels, use 0 for no border).
BorderStyle: String: Style of the scroller's border (none, dotted, dashed, dashed, double, groove, ridge, inset, window-inset or outset).
BorderColour: String: Colour of the scroller's border (#FF0000 or Red).
BackColour: String: Colour of the scroller's background (#FF0000 or Red).
TextHorizontalAlignment: String: Horizontal alignment of each of the scroller's items (left, right, center, justify).
TextVerticalAlignment: String: Vertical alignment of each of the scroller's items (middle, baseline, bottom, top).
DisplayItemsOneByOne: Boolean: Defines whether the scroller should only display one item at a time.
Direction: String: Direction of the scroller ("<" = right to left; "^" = bottom to top; ">" = left to right; "v" = top to bottom).
Speed: Integer: Scroller speed (milliseconds).
PersistPosition: Boolean: Defines whether the scroller should remember its last position.
PauseOnMouseOver: Boolean: Defines whether the scroller should stop scrolling when the mouseOver event is triggered.
PauseOnItems: Boolean: Defines whether the scroller should pause on each item.
PauseLength: Integer: Amount of time the scroller should pause on each item (milliseconds).
AutoStart: Boolean: Defines whether the scroller should start scrolling automatically.
Items: Collection: Array of items.
HasBeenRendered: Boolean: Returns a boolean that defines whether the control has already been rendered.
GetScrollPosition(): String: Depending on the direction of the scroller, returns a string representing the left, top, right or bottom style property of the scrolling area of the scroller.
SetScrollPosition(value): String: Depending on the direction of the scroller, sets the left, top, right or bottom style property of the scrolling area of the scroller.


AddItem(itemHtml): Adds an item to the scroller; itemHtml should be a string.
RemoveItem(itemIndex): Removes an item from the scroller; itemIndex is the index of the item within the collection.
Render(): Renders the control.

03-04-2008, 10:39 PM
very good. simple for the beginner with many features.