Documentation

Updates

Version 1.61 (2009-07-16):
- First Public Source Code Release Version !
- Insert several IE8 Fixes also for the Eventhandling
- Improve some parts to get a better performance
- Add Comments to most of the Parts
- Change "ByRei_jScroller2.cache.refreshtime" to "ByRei_jScroller2.config.refreshtime"
- Optimize each Part to get a better performance and a smaller packed Javascript

Webpage (2008-09-15):
- General HMTL CSS Optimazation
- Add new and check old Examples
- Fix a copy and past error (don't copy and past without check the result) ^^°

Version 1.5 (2008-05-15):
- Add Freature to add, alter and remove jScroller2 Elements after the Page was loaded
- General Documentation overwork
- Code Improvments
- Code Optimization

Version 1.4 (2008-05-15):
- Code Improvements
- Code Optimization
- SourceCode JSLint strict

Version 1.35 (2008-03-26):
- Better Event Handling for sub objects
- Add dynamic Content Support
- The Refresh Interval can now easy changed

Version 1.3 (2008-03-24):
- Reduce Loop's and If's
- Add Alternate Function
- Code Optimization

Version 1.2:
- Fix small Bug with multiple Classnames for Endless Scroller
- Add Delay Function
- Add possibility to turn of Windows Leave Event
- Changed Interval Time to 150ms

Version 1.1:
- Stop and Start Feature when Mouse is over the Scroller
- Improve Class Name handling to support multiple Class Names
- fixed W3C Issues
- fixed Safari Bug with overflow: auto;

Version 1.0:
- Next Release Version from jScroller
- Endless Scrolling
- Multiple Scrolling on one Page at the same Time
- Better Timing, less Resource
- Small Code Improvements
- Simple activated and add over class-name

What is jScroller2

jScroller2 is the improved Version from jScroller http://jscroller.markusbordihn.de which don't need any additional JavaScript like jQuery.
jQuery is a great JavaScript library, but i have so much request for a stand alone Version and other Feature so i decided to recode the complete Scroller and so it is named jScroller2.
jScroller2 scroll Content on a Web page for e.g: Links, Text, DIVs and so on.
Example: AnimeArchive.de

Features of jScroller2

- It is W3C compatible
- Display also a Content with deactivate JavaScript
- Works on different Browser also under Mac OS
- Pause the Scroller when the Screen is left
- Scroll every Content
- Dynamic Content Support (innerHTML, appendChild)
- No additional Javascript Coding is needed
- Endless Scrolling
- Multiple Scrolling on one Page at the same Time
- Better Timing, less Resource
- Simple activated and add over class-name
- Alternative Stop and Start Scoller on Mouseover and Mouseout
- Alternate Scrolling

License and Copyright

* Copyright (c) 2008 Markus Bordihn (markusbordihn.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.

Installation

Please take a look at the example Page, simple copy the jScroller2 JavaScript and CSS to your webpage.
Include both in your Webpage and edit additional CSS Styles.
Its is the best to put this in the <head>.... </head> content in you web page, because it will load faster and allow the browser to do a better caching.
jScroller2 will be include over class names so the following class names are possible.

Set direction over Class names

The standard Class names for normal Scrolling are for the different directions are:

jscroller2_down
jscroller2_up
jscroller2_left
jscroller2_right

For endless Scrolling you need a second DIVs and additional Class names:

jscroller2_down_endless
jscroller2_up_endless
jscroller2_left_endless
jscroller2_right_endless

Features and additional Class names:

jscroller2_speed-[speed 0 to 1000]
jscroller2_delay-[delay in sec.]
jscroller2_mousemove
jscroller2_ignoreleave
jscroller2_alternate
jscroller2_dynamic

Example with Endless Scrolling

For and endless Scroller you need to split your Content into 2 Parts, but it doesn't matter if one content is bigger as the other content.
After you split your content, you put the content in 2 DIVs the main div will be defined as scroller as normal.
But the additional DIV will get the class jscroller2_up_endless e.g: for an up scroller and so you have an endless scroller.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
 <div class="jscroller2_up_endless">   
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Set Speed

The Speed can be set simple over class="...jscroller2_speed-20" for a speed with 20.
Please keep in mind there is a small algorithm behind this, the lowest value is 1.
But because of some Limitation of the Internet Explorer its make no different in Internet Explorer when you choose 1 or 10.
Its has only an effect on Firefox and other Browser besides the Internet Explorer.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Set Delay

You have also the possibility to start the Scrollers on different Times over class="...jscroller2_delay-5" this will delay the start for 5 seconds.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20 jscroller2_delay-5">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Set Autostop for Mouseover and Mouseout

When you want the Scroller can stop when the User has his mouse over the Scroller and start again when the User move the Mouse off the Scroller.
This can be simple enabled over class="...jscroller2_mousemove", very easy isn't it ?

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20 jscroller2_mousemove">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Turn of Window Leave Events

You can also turnoff the Feature when a User leave the window and the scroller Stops.
When you dont wont the Scroller to stop when a User leave the Browser Window simple add jscroller2_ignoreleave to one Scroller.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20 jscroller2_ignoreleave">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Alternate Scrolling

The Alternate Scrolling move the content bounce back and forth.
Because it is not reasonable to used this feature together with the endless scroller feature this only works for normal scrollers.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20 jscroller2_alternate">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World. 
 </div>
</div>

Dynamic Content Support

When you have a large Content with a lot of images or when you change the Content over innerHMTL/appendChild you can simple tell this the Scroller over jscroller2_dynamic.
At this simple to the class and also the dynamic Content should be no Problem.

Simple Example

<div id="test2">
 <div class="jscroller2_up jscroller2_speed-20 jscroller2_alternate jscroller2_dynamic">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>

Change Refreshtime

From Version 1.35 until Version 1.5 you can simple changed the Refresh Time over ByRei_jScroller2.cache.refreshtime = ...;
With Version 1.6 and higher you can simple changed the Refresh Time over ByRei_jScroller2.config.refreshtime = ...;
Please keep in mind to insert this JavaScript Code after the jScroler2 Script was loaded.
A value below 100 is not recommended because this will increase the CPU Load for the Script.

Simple Example

<rel="stylesheet" type="text/css" href="jscroller2-1.0.css">
<script type="text/javascript" src="jscroller2-1.35.js"></script>

<script type="text/javascript">
 ByRei_jScroller2.config.refreshtime = 150;
</script>

Add, Alter and Remove jScroller2 after Pageload

In some case it could be needed to change the direction or add jScroller2 after the page load.
There are 2 commands which allow you to add, alter and to remove a jScroller2 Div.

Add or Alter a jScroller2 Element

For adding or for altering is only one command avalible, because jScroller2 check first if an object exists and when yes its update the information.
When the Object is not existing jScroller2 will add this Object.
To add or alter you need the command ByRei_jScroller2.add([Object],[Direction]);.

Directions:

left
right
up
down

Example

<div id="test2">
 <div id="scroller" class="jscroller2_up jscroller2_speed-20">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>
...
<script type="text/javascript">
 ByRei_jScroller2.add(document.getElementById('scroller'),'down');
</script>

Remove a jScroller2 Element

All jScroller2 Elements are store in a Array named ByRei_jScroller2.obj you can search the Element manual and changed the values or simple used the command for this with ByRei_jScroller2.remove([Object]);.
Please keep in mind this will only remove the jScroller2 Event not the Object / Div itself.

Example

<div id="test2">
 <div id="scroller" class="jscroller2_up jscroller2_speed-20">
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
  123456789 Hello World. Hello World. Hello World.
 </div>
</div>
...
<script type="text/javascript">
 ByRei_jScroller2.remove(document.getElementById('scroller'));
</script>

What other things to say

Please keep in mind to set the surrounding div to "overflow: auto" to display the content also to user with no JavaScript enabled.

I hope you have fun with it ;)

Greetings,
- Markus B.

jScroller2

the next Generation Autoscroller by Markus Bordihn

Documentation

Updates

What is jScroller2

Features of jScroller2

License and Copyright

Installation

Set direction over Class names

Example with Endless Scrolling

Set Speed

Set Delay

Set Autostop for Mouseover and Mouseout

Turn of Window Leave Events

Alternate Scrolling

Dynamic Content Support

Change Refreshtime

Add, Alter and Remove jScroller2 after Pageload

Add or Alter a jScroller2 Element

Remove a jScroller2 Element

What other things to say