1) CODE TITLE:
SebScroller
2) AUTHOR NAME/NOTES:
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
3) DESCRIPTION:
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.
4) EXAMPLES:
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
- example1_customised
- example2
- example3
- example4
5) INSTRUCTIONS:
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 itat 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):
b) Instantiate a ScrollerManager object, the actual name of the variable MUST be "ScrollerManager":HTML Code:<script type="text/javascript" src="Utils.js"></script> <script type="text/javascript" src="ScrollerManager.js"></script> <script type="text/javascript" src="Scroller.js"></script>
c) Create scroller objects using the ScrollerManager's CreateScroller method:Code:var ScrollerManager = new ScrollerManager();
d) Set your scroller's properties and add items:Code:var sebscroller = ScrollerManager.CreateScroller("sebscroller");
Code:sebscroller.Width = 100; sebscroller.Height = 100; . . .e) Call the scroller's Render method to render the scroller where you want:Code:sebscroller.AddItem("item1"); sebscroller.AddItem("item2"); sebscroller.AddItem("item3");
HTML Code:<script language="javascript" type="text/javascript">sebscroller.Render();</script>
5) MEMBERS
Properties:
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.
Methods:
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.





Reply With Quote

Bookmarks