Delay on 6 seconds before start scroller again ( in div )

ultrabrify · November 7, 2016, 8:56pm

Hi friends, please, how to adapt a delay on 6 seconds before start the div scroller again ?
I need, end the scroll, go back to the start, and pause for 6 seconds before starting again ( automatic ) the scroller.

Thanks !

This script:

Auto-scrolling a DIV- 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Auto Scroller</title>
<style type='text/css'>
#MyDivName {
  overflow:auto;
  width:200px;
  height:100px;
}
</style>
<script language="javascript">
window.onload = function() {
  scrollDiv_init();
};
ScrollRate = 10;
function scrollDiv_init() {
  DivElmnt = document.getElementById('MyDivName');
  DivElmnt.onmouseover = pauseDiv;
  DivElmnt.onmouseout = resumeDiv;
  ReachedMaxScroll = false;
  DivElmnt.scrollTop = 0;
  PreviousScrollTop  = 0;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;
    ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
  }
  else {
    DivElmnt.scrollTop = PreviousScrollTop = 0;
    ReachedMaxScroll = false;
/*
    ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
*/
  }
}
function pauseDiv() {
  clearInterval(ScrollInterval);
}
function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
</head>
<body>
<div id="MyDivName">
11111 11111 11111<br>22222 22222 22222<br>text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text<br>Almost Last Row<br>text text text<br>Last Row
</div>
</body>
</html>

AllanP · November 7, 2016, 10:41pm

Modify the “else” statement in your scrollDiv() script like this:

else { 
    clearInterval(ScrollInterval);
    DivElmnt.scrollTop = PreviousScrollTop = 0;
    ReachedMaxScroll = false;
    setTimeout("resumeDiv()",6000);
  }

ultrabrify · November 8, 2016, 2:20am

Now works very well. Thank you very much !

ultrabrify · November 12, 2016, 6:17am

Please, It is possible to call a php variable in the code, I need to control the scroll speed and the delay by php, I made this change but it did not work:

<script language="javascript">
window.onload = function() {
  scrollDiv_init();
};
var ScrollRate = '<? echo $rate; ?>';
function scrollDiv_init() {
  DivElmnt = document.getElementById('scroll');
  DivElmnt.onmouseover = pauseDiv;
  DivElmnt.onmouseout = resumeDiv;
  ReachedMaxScroll = false;
  DivElmnt.scrollTop = 0;
  PreviousScrollTop  = 0;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;
    ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
  }
  

else { 
    clearInterval(ScrollInterval);
    DivElmnt.scrollTop = PreviousScrollTop = 0;
    ReachedMaxScroll = false;
    setTimeout("resumeDiv()",1000);
  }

/*
    ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
*/

}
function pauseDiv() {
  clearInterval(ScrollInterval);
}
function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>

PaulOB · November 12, 2016, 3:22pm

Try removing the single quotes.

ultrabrify · November 13, 2016, 3:04am

I did this, with single quotes, and not single quotes, but it does not work

Mittineague · November 13, 2016, 3:36am

For the PHP to work, the file needs to be “,php” and not “.html” (well, unless you have things configured for it) I’m assuming you know this but just in case.

Anyway, my guess is that “short tags” aren’t enabled. Try

var ScrollRate = '<?php echo $rate; ?>';

ultrabrify · November 13, 2016, 5:24am

Yes, PHP page, I know. But it does not work.
I have other variables that I capture via GET in other scripts. All other working. But in this case it is as if there is nothing in the ScrollRate item, it only recognizes a direct number. Weird.

Mittineague · November 13, 2016, 7:17am

If you look at the section of the page that has the JavaScript code in view-source it looks like an empty String?

var ScrollRate = '';

What does the PHP code that assigns the value to $rate look like?

m3g4p0p · November 13, 2016, 5:50pm

Just as a side note, you should never evaluate code like this without need – it’s both dangerous and slow. Instead, you can simply pass the function itself to the timeout like

setTimeout(resumeDiv, 1000);

You might have a look at the MDN page on eval() for details why such string representations should be avoided.

ultrabrify · November 14, 2016, 3:03am

I work with Joomla CMS, in Joomla’s structural logic I use an xml page for data entry, and GET on the PHP page to capture the data:

XML page:

<field name="rate" type="text" default="70" label="" description=""/>

PHP page:

$rate = $params->get('rate');

var ScrollRate = '<?php echo $rate; ?>';

It works at all, only in this case no, if is blank it is not passing the variable.

ultrabrify · November 14, 2016, 3:08am

This works perfectly for me:

setTimeout("resumeDiv()",1000);

``
But this one does not work:

setTimeout(resumeDiv, 1000);


The question is not this, but this:

var ScrollRate = ‘<? echo $rate; ?>’;


It does not work, does not get the variable. Any suggestion ?

Thanks

ultrabrify · November 15, 2016, 2:49am

Finally I found the solution, now it works 100% for me, in this syntax

var ScrollRate = “<?php echo $rate = $params->get('rate'); ?>”;

system · February 14, 2017, 9:49am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.