Example of dynamic add a jScroller2 Object after the page load
This example dynamic create and DIV and add the jScroller2 Event after the page was loaded.
You can used the following command to add the jScroller2 Event:
ByRei_jScroller2.add([object],["left"|"right"|"top"|"down"]);
Please keep in mind when the Object already exists that it will be updated with the new direction.
When you add dynamic more option, you need to remove and then add the jScroller2 Event.
Please keep in mind that when you dont have any jScroller2 Object on the page you need to start the scroller over ByRei_jScroller2.start(); (only scroll, no Events) or with ByRei_jScroller2.init(); which also add special Events.
Click for testing
Add Scroller (left)
Add Scroller (right)
Test W3C Validation:
HTML Code
<link rel="stylesheet" type="text/css" href="jscroller2-1.0.css">
<script type="text/javascript" src="jscroller2-1.61.js"></script>
...
<a href="javascript:new_Scroller('left')"> Add Scroller (left) </a><br>
<a href="javascript:new_Scroller('right')"> Add Scroller (right) </a><br>
...
<div id="scrollers"></div>
JavaScript Code
<script type="text/javascript">
var ids=0;
function new_Scroller(direction) {
var scrollers = document.getElementById('scrollers');
if (scrollers) {
var
scroll_body = document.createElement('div'),
scroll = document.createElement('div');
scroll.id = "scrollTest" + ids ;
scroll_body.style.width = '600px';
scroll_body.style.height = '60px';
scroll.className = 'jscroller2-' + direction;
scroll.style.fontSize = scroll.style.lineHeight = '60px';
scroll.style.whiteSpace = 'nowrap';
scroll.style.margin = 0;
scroll.innerHTML = ids + ': This is a Test, in this Test you can see that the Scroller can Scroll Images ';
scroll_body.appendChild(scroll);
scrollers.appendChild(scroll_body);
// jScroller2 add Event
ByRei_jScroller2.add(scroll,direction);
ByRei_jScroller2.start(); // Simple Scrolling without Events
ids++;
}
}
</script>
CSS Code
/* Scroller Box */
#scroller_container {
width: 120px;
height: 200px;
overflow: hidden;
}
/* Scoller Box */
/* CSS Hack Safari */
#dummy {;# }
#scroller_container {
overflow: auto;
}