serialSroll - How do I scroll an inner div?

Question

This is a test page I've put up: http://02ce746.netsolhost.com/tst/a.htm

I am trying to auto-scroll the DIV upon page load. I've tried so many different combinations in script.js that I am about to give up. Anyone could help?

score 0 · Answer 1 · answered Aug 21 '09 at 09:12

0

try enclosing your script in $(document).ready(){}

$(document).ready( function(){
 $('div.scrollcontainer').serialScroll({interval:'1',axis:'y'});
});

answered Aug 21 '09 at 09:12

stefita

1,785
2
20
35

score 0 · Answer 2 · answered Aug 21 '09 at 09:17

0

You just need to set force = true, which will force an initial scroll event:

$(document).ready( function(){
    $('div.scrollcontainer').serialScroll({force:true});
});

answered Aug 21 '09 at 09:17

kayteen

777
1
8
22

score 0 · Accepted Answer · answered Aug 21 '09 at 09:54

0

From the plugin site:

This plugin allows you to easily animate any series of elements, by sequentially scrolling them.

I think the plugin scrolls through a set of elements and you have only on element in your container. May be you should separate the text in paragraphs...

answered Aug 21 '09 at 09:54

stefita

1,785
2
20
35

..tried this - no luck. PS: I've updated the site with the new code, so you could inspect it in Firefox/Firebug. – Aug 21 '09 at 10:15
new code says: **missing } after property list** $('div.scroll').serialScroll({target:...'axis:'y',items:'p', interval:'1'}); (in script.js) – TheVillageIdiot Aug 21 '09 at 10:21
I added in the css styles "overflow:inherit;" in the container class and it works for this code $(function(){ $('div.scroll').serialScroll({target: "div.scrollcontainer", items: 'p', force: true, interval:'1', axis:'y'}); }); – stefita Aug 21 '09 at 10:36

score 0 · Answer 4 · answered Aug 21 '09 at 10:40

Please have a look at this, it works:

<style type="text/css">
._container{clear:left;height:120px;margin:10px 0 0 10px;  overflow:hidden;
        position:relative;width:220px;}
ul{height:1011px;width:1820px;background-color:#5B739C;list-style-image:none;
        list-style-position:outside;list-style-type:none;margin:0;padding:0;}
li{background-color:#DDDDDD;border:1px solid black;font-weight:bolder;
       height:100px;padding:50px;position:relative;text-align:center;width:200px;
        list-style-image:none;list-style-position:outside;
        list-style-type:none;margin:0;}
</style>

<div id="container" class="_container">
  <ul>
     <li><p>0</p></li> <li><p>1</p></li> <li><p>2</p></li> <li><p>3</p></li> 
     <li><p>4</p></li> <li><p>5</p></li> <li><p>6</p></li> <li><p>7</p></li> 
     <li><p>7</p></li> <li><p>8</p></li> <li><p>9</p></li> <li><p>10</p></li>
     <li><p>11</p></li> <li><p>12</p></li> <li><p>13</p></li> <li><p>14</p></li>
 </ul>
</div>

 <script type="text/javascript">
 $(document).ready(function(){
   $("div#container").serialScroll({items:'li',  duration:2000,  
                        force:true,  axis:'y',  easing:'linear',
         lazy:true, interval:1,  step:1 }); 
 });
 </script>

serialSroll - How do I scroll an inner div?

4 Answers4