Documentation
Updates
The jScroller Plugin project was stopped, when you need more Feature and can't code them by your own please take a look at the jScroller2 Project ( http://jscroller2.markusbordihn.de/ )
jScroller2 is a standalone Version so you don't need jQuery for this project.
Version 0.4:
- Better Timing and use the full power of jQuery, no workarround anymore
- Pause the Scroller on mouseover and start it again on mouseout
- Multiple Scroller are now possible
- Very easy to implement over some JavaScript commands
Thanks to Nimrod Yonatan Ben-Nes for a usability improvement and to reminde me to release a better version of jScroller.
Version 0.3:
- Add dynamic DIV support and other crossbrowser changes
Thanks to Daniel Marino ( http://IamDanielMarino.com ) for the Testpage and the idea about this.
Version 0.2:
- First Release Version
- Fix small Bugs
What is jScroller
jScroller is a Plugin for jQuery to scroll Content on a Webpage for e.g: Links, Text, DIVs and so on.
Examples: Example Page
Features of jScroller
- It is W3C compatible
- Display also a Content with deactivated JavaScript
- Works on different Browser also under Mac OS
- Pause the Scroller when the Screen is left
- Scroll every Content
- Multiple Scroller on the same Page
- Very easy to implement over some JavaScript commands
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 (Version 0.4 and higher)
Simple copy jQuery and the jScroller Plugin into your webpage and include both into the Webpage.
Adjust your CSS as you need and now you can add the Autoscroller over $jScroller.add(...)
...
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Example add
$jScroller.add("#box1_container","#box1","down",1,1);
// Start Scroller
$jScroller.start();
}
</script>
<div id="box1_container">
<div id="box1">
[Content]
</div>
</div>
...
Configuration (Version 0.4 and higher)
You can change every direct in the Sourcecode, but when you only need to adjust the Refreshrate or the Defaultevent you can do this over Variables.
Adjust Refreshrate
To adjust the refreshrate you can change the variable "$jScroller.config.refresh", please change this after you load the jScroller Plugin Script and before you start the scroller !
...
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$jScroller.config.refresh = 100; // Refreshrate 100ms
</script>
...
Disable Default Events
By default the Autoscroller will stop when you leave the window or the document and start again when you access the window or document again.
In some cases it could be that you want to stop the Scroller with these Default Events, so you can turn them off over "$jScroller.cache.init".
...
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$jScroller.cache.init = true; // Turn off default Events
</script>
...
Functions (Version 0.4 and higher)
Version 0.4 of jScroller supports some Function to help you to setup the autoscroller and start or stop it.
$jScroller.add(...)
With "$jScroller.add(...)" you add an Element to autoscroll, please keep in mind that you also need to start jScroller that something happend.
Options: $jScroller.add( [Container DIV ID with #], [Content DIV ID with #], [Direction: "up", "down", "left" or "right"], [Speed from 1 is default, 2 is faster], [Optional: Start and Stop Scroller on Mouseover / Mouseout] ); Example: <div id="box1_container"> <div id="box1"> [Content] </div> </div> <script type="text/javascript"> $(document).ready(function(){ // Example add without Start and Stop Scroller on Mouseover / Mouseout $jScroller.add("#box1_container","#box1","down",1); // Example add with Start and Stop Scroller on Mouseover / Mouseout $jScroller.add("#box1_container","#box1","down",1,true); // Start Scroller $jScroller.start(); } </script>
$jScroller.start() / $jScroller.stop()
"$jScroller.start()" simple start the Autocroller and when it needed you can stop the Autoscroller with "$jScroller.stop()".
Please keep in mind you should turn off the Default Events so really stop the Autoscroller with "$jScroller.stop()".
Example:
...
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Example add
$jScroller.add("#box1_container","#box1","down",1,1);
// Turn off default Events
$jScroller.cache.init = true;
// Start Scroller
$jScroller.start();
}
</script>
<p>
<span onclick="$jScroller.stop()"> Stop </span> | <span onclick="$jScroller.start()"> Start </span>
</p>
<div id="box1_container">
<div id="box1">
[Content]
</div>
</div>
...
Installation (Version 0.3 and below)
Please take a look at the example Page, simple copy jQuery.js, jScroller.js to your webpage.
Include both in your Webpage insert the CSS Style and set up in the jScroller.js the direction.
this.defaults = {
scroller: {
interval: 0,
refresh: 200, // Refresh Time in ms
direction: "down", // down,right,left,up
speed: 1,
id: "#scroller",
cont_id: "#scroller_container",
...
}
}
interval: 0 - Dont touch !
refresh: 200 - scroll every 200ms
direction: "down" - Set the Scroll Direction
speed: 1 - Set how many Pixel should be scroll
id: - The Name of the Inner Scroller DIV (Content)
cont_id: - The Name of the Outer Scroller DIV
... - Dont need to be touched
What other things to say
I hope you have fun with it ;)
Greetings,
- Markus B.