I have the code that should scroll the div repeatedly from top to bottom back to top, but the auto-scroll does not scroll all the way down, it leaves a few items below.
Questions: 1) How can I make it scroll all the way down and up 2) How to set the scrolling duration depending on the number of items in the div in order to avoid too fast or too slow scrolling. So it would scroll at the normal speed depending on the number of div's items.
Here is the full code and here is the link to my app: https://script.google.com/macros/s/AKfycby4jMUrDqW8HLev0HkWt36XCdtpjuSXsv2-yThkXSzA5fusfXw/exec
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h2>Machine Status</h2>
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col1">
<h1 id="readyLine">Ready Line, <?= getCountReadyLine() ?> items</h1>
<div class="item1" id="item1">
<? var options = getReadyLine()
for (var i = 0; i < options.length; i++) { ?>
<p><?= options[i] ?></p>
<? } ?>
</div>
</div>
<div class="col-sm-3 col2">
<h1 id="priorityLine">Priority Line</h1>
<div class="item2" id="item2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-3 col3">
<h1>Column 3</h1>
<div class="item3" id="item3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-3 col4">
<h1>Column 4</h1>
<div class="item4" id="item4">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function () {
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight();
});
var outerHeight2 = 0;
$("#item2").children().each(function() {
outerHeight2 += $(this).outerHeight();
})
$("#item1").animate({
scrollTop: outerHeight1
}, 30000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 50000);
}, 3000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: outerHeight1
}, 30000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 30000);
}, 4000);
}, 4000);
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
}, 8000);
var outerHeight = 0;
var totalHeight = $("#item1").children().each(function() {
outerHeight += $(this).outerHeight();
});
console.log($(".col1").width());
console.log($("#item1").width());
});
</script>
</body>
</html>
And this is the code that returns data to HTML file for the divs.
function doGet() {
var html = HtmlService.createTemplateFromFile('html').evaluate()
.setTitle('Ch4 Contact Me')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
var ss = SpreadsheetApp.openById("spreadsheet-id");
var sheetMAT = ss.getSheetByName("Sheet3");
var data = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 1, 4).getValues();
var temp1 = [];
var temp2 = '';
var dataReadyLine = [];
function getReadyLine() {
var rawData = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 2, 4).getValues();
for (var i=0; i<rawData.length; i++) {
if (rawData[i][3] === "A Ready Line") {
temp2 = ' ' + data[i][0];
temp1.push(data[i][1], temp2);
dataReadyLine.push(temp1);
temp1 = [];
temp2 = '';
}
}
return dataReadyLine;
}
function getCountReadyLine() {
var rawData = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 2, 4).getValues();
var count = 0;
for (var i=0; i<rawData.length; i++) {
if (rawData[i][3] === "A Ready Line") {
count += 1;
}
}
return count;
}
