Example Dynamic Content
The Dynamic Content Support can simple activated over jscroller2_dynamic.
You need this Feature when you Content changed the size or when you insert data in the content over innerHTML or appendChild.
When you load a load of Images into your page, you need also this Feature, because it could be that some images have a delay and so after the images are loaded the content is bigger.
To insert Content in this example, simple press "Test 1" or/and "Test 2".
The Dynamic Content Support works for all Scrollers also for the endless Scroller.
small Text
aaaaaaaaaaAAAAAAAAAAAA
bbbbbbbbbbbbBBBBBBBBBBBB
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>
...
<div id="scroller_container1">
<div class="jscroller2_left jscroller2_speed-60 jscroller2_alternate jscroller2_ignoreleave jscroller2_dynamic" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;"> ... </div>
</div>
<div id="scroller_container2">
<div class="jscroller2_left jscroller2_speed-70 jscroller2_ignoreleave jscroller2_dynamic" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;"> ... </div>
<div class="jscroller2_left_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;"> ... </div>
</div>
CSS Code
/* Scroller Box */
#scroller_container1, #scroller_container2 {
width: 600px;
height: 60px;
overflow: auto;
}
/* Scoller Box */
/* CSS Hack Safari */
#dummy {;# }
#scroller_container1, #scroller_container2, #scroller_container3, #scroller_container4 {
overflow: auto;
}