+ Start a Discussion
padma sree 6padma sree 6 

Need autoscroll option in visualforce page

Hi Team,

I need help in auto scroll in visualforce page. Actually i have tried like this http://jsfiddle.net/e8oxc71r/2/. But it didn't work properly.

<apex:page >
      <apex:form >
          <div id="box" class="timeline container" style="overflow:scroll; width:100%; height:300px;">
          Bacon ipsum dolor amet flank sausage salami, ball tip tail shoulder capicola pork loin chicken bacon cupim chuck andouille filet mignon. Frankfurter tongue doner boudin swine tenderloin, ground round leberkas hamburger beef strip steak cow jowl. Fatback salami tri-tip, pastrami cow short loin strip steak jerky. Jerky pancetta ribeye ball tip drumstick capicola bresaola boudin sirloin shank swine ham hock turducken. Strip steak pork chop turkey meatball pancetta pork shankle sirloin meatloaf pork loin cupim biltong. Picanha t-bone ham beef ribs, salami short loin pork jowl tongue ham hock boudin. Shoulder cupim shankle short ribs, bresaola capicola sirloin. Hamburger turkey turducken strip steak brisket kielbasa chicken pig ham hock. Pork salami doner short ribs landjaeger brisket capicola sausage pastrami corned beef tenderloin. Corned beef kevin bresaola pork tongue. Strip steak ribeye tenderloin leberkas brisket tongue hamburger cow andouille salami flank. Tenderloin pig kielbasa shoulder, pork corned beef bresaola chuck fatback. Doner tail meatball meatloaf corned beef. Sausage t-bone biltong chuck drumstick tail tenderloin cow. Hamburger alcatra strip steak jerky ham turducken drumstick meatball venison ball tip ribeye pastrami picanha jowl. Short ribs chuck filet mignon ham hock short loin tongue jowl, ball tip pork loin turkey strip steak swine corned beef venison tail. Chicken tri-tip ribeye, turducken beef ribs pork belly rump sirloin. Tenderloin strip steak swine sirloin turducken tongue pork loin kevin beef frankfurter kielbasa filet mignon jerky t-bone spare ribs. Shoulder pork belly frankfurter shank prosciutto fatback pig ball tip rump jerky landjaeger ribeye t-bone tongue. Corned beef andouille chicken, kevin t-bone turducken ribeye short ribs biltong tongue tri-tip drumstick leberkas sirloin cupim. Turducken short ribs boudin, cupim kevin short loin corned beef shankle sirloin ham hock salami. Pork belly chuck corned beef, andouille tri-tip bacon capicola short ribs shoulder short loin frankfurter alcatra tail t-bone ball tip. Chicken jowl spare ribs strip steak, t-bone pancetta turducken cupim doner cow ball tip boudin ham fatback. Strip steak shankle ground round kevin, swine pastrami landjaeger alcatra. Andouille salami pork loin flank pork chop, biltong short loin chicken kielbasa turducken. Pork jowl kielbasa tail. Turkey flank shank, rump venison meatloaf swine short ribs porchetta sausage. Chuck tongue corned beef chicken short ribs. Meatball flank alcatra, kielbasa jowl cow meatloaf corned beef shankle turducken brisket doner turkey. Turducken landjaeger boudin filet mignon fatback hamburger. Swine rump turducken ham hock, pork chop leberkas frankfurter short ribs fatback porchetta ground round.
          </div>
          
          

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).on('load', function() {
// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if (!isPaused) {
        var pos = element.scrollTop();
        var offset = 1 * direction;
        element.scrollTop(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollHeight - element.scrollTop() == element.outerHeight()) || (element.scrollTop() <= 0)) {
            direction *= -1;
        }
    }

}, 100);

$('#box').hover(

function () {
    isPaused = true;
}, function () {
    isPaused = false;
});
});//]]> 

</script>
         
      </apex:form>
</apex:page>

Please help me in this.

Thanks in advance.
Padmasree.

 
Best Answer chosen by padma sree 6
sslodhi87sslodhi87
Hi Padmasree,

Please make the height 300px to 100px.. then it will work

Thanks

All Answers

sslodhi87sslodhi87

Hi Padma,

You have to give full path of jquery or need to download and upload in static resources.

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

This is the full path to access the jquery.

Please let me know if this works for you

Thanks,

padma sree 6padma sree 6
Hi sslodhi87, 

I have used the same path in my code but it didn't work.

<apex:page >
      <apex:form >
          <div id="box" class="timeline container" style="overflow:scroll; width:100%; height:300px;">
          Bacon ipsum dolor amet flank sausage salami, ball tip tail shoulder capicola pork loin chicken bacon cupim chuck andouille filet mignon. Frankfurter tongue doner boudin swine tenderloin, ground round leberkas hamburger beef strip steak cow jowl. Fatback salami tri-tip, pastrami cow short loin strip steak jerky. Jerky pancetta ribeye ball tip drumstick capicola bresaola boudin sirloin shank swine ham hock turducken. Strip steak pork chop turkey meatball pancetta pork shankle sirloin meatloaf pork loin cupim biltong. Picanha t-bone ham beef ribs, salami short loin pork jowl tongue ham hock boudin. Shoulder cupim shankle short ribs, bresaola capicola sirloin. Hamburger turkey turducken strip steak brisket kielbasa chicken pig ham hock. Pork salami doner short ribs landjaeger brisket capicola sausage pastrami corned beef tenderloin. Corned beef kevin bresaola pork tongue. Strip steak ribeye tenderloin leberkas brisket tongue hamburger cow andouille salami flank. Tenderloin pig kielbasa shoulder, pork corned beef bresaola chuck fatback. Doner tail meatball meatloaf corned beef. Sausage t-bone biltong chuck drumstick tail tenderloin cow. Hamburger alcatra strip steak jerky ham turducken drumstick meatball venison ball tip ribeye pastrami picanha jowl. Short ribs chuck filet mignon ham hock short loin tongue jowl, ball tip pork loin turkey strip steak swine corned beef venison tail. Chicken tri-tip ribeye, turducken beef ribs pork belly rump sirloin. Tenderloin strip steak swine sirloin turducken tongue pork loin kevin beef frankfurter kielbasa filet mignon jerky t-bone spare ribs. Shoulder pork belly frankfurter shank prosciutto fatback pig ball tip rump jerky landjaeger ribeye t-bone tongue. Corned beef andouille chicken, kevin t-bone turducken ribeye short ribs biltong tongue tri-tip drumstick leberkas sirloin cupim. Turducken short ribs boudin, cupim kevin short loin corned beef shankle sirloin ham hock salami. Pork belly chuck corned beef, andouille tri-tip bacon capicola short ribs shoulder short loin frankfurter alcatra tail t-bone ball tip. Chicken jowl spare ribs strip steak, t-bone pancetta turducken cupim doner cow ball tip boudin ham fatback. Strip steak shankle ground round kevin, swine pastrami landjaeger alcatra. Andouille salami pork loin flank pork chop, biltong short loin chicken kielbasa turducken. Pork jowl kielbasa tail. Turkey flank shank, rump venison meatloaf swine short ribs porchetta sausage. Chuck tongue corned beef chicken short ribs. Meatball flank alcatra, kielbasa jowl cow meatloaf corned beef shankle turducken brisket doner turkey. Turducken landjaeger boudin filet mignon fatback hamburger. Swine rump turducken ham hock, pork chop leberkas frankfurter short ribs fatback porchetta ground round.
          </div>
          
          

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).on('load', function() {
// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if (!isPaused) {
        var pos = element.scrollTop();
        var offset = 1 * direction;
        element.scrollTop(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollHeight - element.scrollTop() == element.outerHeight()) || (element.scrollTop() <= 0)) {
            direction *= -1;
        }
    }

}, 100);

$('#box').hover(

function () {
    isPaused = true;
}, function () {
    isPaused = false;
});
});//]]> 

</script>
         
      </apex:form>
</apex:page>

Thanks,
Padmasree
sslodhi87sslodhi87
<apex:page >
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
      <apex:form >

          <div id="box" class="timeline container" style="overflow:scroll; width:100%; height:300px;">
          Bacon ipsum dolor amet flank sausage salami, ball tip tail shoulder capicola pork loin chicken bacon cupim chuck andouille filet mignon. Frankfurter tongue doner boudin swine tenderloin, ground round leberkas hamburger beef strip steak cow jowl. Fatback salami tri-tip, pastrami cow short loin strip steak jerky. Jerky pancetta ribeye ball tip drumstick capicola bresaola boudin sirloin shank swine ham hock turducken. Strip steak pork chop turkey meatball pancetta pork shankle sirloin meatloaf pork loin cupim biltong. Picanha t-bone ham beef ribs, salami short loin pork jowl tongue ham hock boudin. Shoulder cupim shankle short ribs, bresaola capicola sirloin. Hamburger turkey turducken strip steak brisket kielbasa chicken pig ham hock. Pork salami doner short ribs landjaeger brisket capicola sausage pastrami corned beef tenderloin. Corned beef kevin bresaola pork tongue. Strip steak ribeye tenderloin leberkas brisket tongue hamburger cow andouille salami flank. Tenderloin pig kielbasa shoulder, pork corned beef bresaola chuck fatback. Doner tail meatball meatloaf corned beef. Sausage t-bone biltong chuck drumstick tail tenderloin cow. Hamburger alcatra strip steak jerky ham turducken drumstick meatball venison ball tip ribeye pastrami picanha jowl. Short ribs chuck filet mignon ham hock short loin tongue jowl, ball tip pork loin turkey strip steak swine corned beef venison tail. Chicken tri-tip ribeye, turducken beef ribs pork belly rump sirloin. Tenderloin strip steak swine sirloin turducken tongue pork loin kevin beef frankfurter kielbasa filet mignon jerky t-bone spare ribs. Shoulder pork belly frankfurter shank prosciutto fatback pig ball tip rump jerky landjaeger ribeye t-bone tongue. Corned beef andouille chicken, kevin t-bone turducken ribeye short ribs biltong tongue tri-tip drumstick leberkas sirloin cupim. Turducken short ribs boudin, cupim kevin short loin corned beef shankle sirloin ham hock salami. Pork belly chuck corned beef, andouille tri-tip bacon capicola short ribs shoulder short loin frankfurter alcatra tail t-bone ball tip. Chicken jowl spare ribs strip steak, t-bone pancetta turducken cupim doner cow ball tip boudin ham fatback. Strip steak shankle ground round kevin, swine pastrami landjaeger alcatra. Andouille salami pork loin flank pork chop, biltong short loin chicken kielbasa turducken. Pork jowl kielbasa tail. Turkey flank shank, rump venison meatloaf swine short ribs porchetta sausage. Chuck tongue corned beef chicken short ribs. Meatball flank alcatra, kielbasa jowl cow meatloaf corned beef shankle turducken brisket doner turkey. Turducken landjaeger boudin filet mignon fatback hamburger. Swine rump turducken ham hock, pork chop leberkas frankfurter short ribs fatback porchetta ground round.
          </div>
          
          


<script type="text/javascript">
//<![CDATA[
$(window).on('load', function() {
// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if (!isPaused) {
        var pos = element.scrollTop();
        var offset = 1 * direction;
        element.scrollTop(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollHeight - element.scrollTop() == element.outerHeight()) || (element.scrollTop() <= 0)) {
            direction *= -1;
        }
    }

}, 100);

$('#box').hover(

function () {
    isPaused = true;
}, function () {
    isPaused = false;
});
});//]]> 

</script>
         
      </apex:form>
</apex:page>

Please check this code.

Thanks
padma sree 6padma sree 6
Hi sslodhi87, 

I have tried but it didn't work.

Thanks,
Padmasree.
sslodhi87sslodhi87
Hi Padmasree,

Please make the height 300px to 100px.. then it will work

Thanks
This was selected as the best answer
padma sree 6padma sree 6
Hi sslodhi87,

Thank you so much it is working.

Thanks,
Padmasree.
sslodhi87sslodhi87
cool. you are welcome