I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a browser, but fails to execute correctly when the application runs on a node server.
Attempts to troubleshoot include ensuring that jQuery is properly included and wrapping the main code that controls the scroller in a $(window).on("load") function. Many similar posts I've researched suggest this might be the issue. Additionally, I verified that the server is loading the external file, confirmed by console logs showing up without any errors. Checking the chrome console reveals the required images and external script are being loaded onto the page. Further investigation by logging values inside the external function indicates that the resources are accessible, so perhaps it's a synchronization issue with jQuery + node? Any assistance would be greatly appreciated.
The jQuery
$(window).on("load", function () {
$(function () {
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function () {
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
var controller = { curSpeed: 0, fullSpeed: 1 };
var $controller = $(controller);
var tweenToNewSpeed = function (newSpeed, duration) {
if (duration === undefined) {
duration = 600;
$controller.stop().animate({ curSpeed: newSpeed }, duration);
}
};
var doScroll = function () {
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW * 2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
console.log("foo");
console.log(scrollerContent);
});
});
Server File
var express = require("express");
var db = require("./models/company.js");
var app = express();
var PORT = process.env.PORT || 8080;
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static( __dirname + "/public"));
require("./routes/htmlRoutes.js")(app);
require("./routes/apiRoutes.js")(app);
db.sequelize.sync({ force: false }).then(function() {
app.listen(PORT, function () {
console.log("App listening on PORT: " + PORT);
});
})
module.exports = app;
Related CSS
#scroller {
position: relative;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#scroller ul {
padding: 0;
margin: 0;
position: relative;
}
#scroller li {
padding: 0;
margin: 0;
list-style-type: none;
position: absolute;
margin-left: 1%;
margin-right: 1%;
}
relevant code from index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/index.css">
<title>RepoMan</title>
</head>
...
<!--AD Space-->
<div id="scroller" style="width: 1110px; height: 75px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<!-- Define photos here -->
<li><img class="ad-img" src="assets/images/sidebar/sm-allied.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-baja.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-bigtime.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-det.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-dyn.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-ken.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-locating.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-minuteman.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-nams.jpeg" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rec.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-recmng.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-repfl.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rsig.gif" /></li>
</ul>
</div>
</div>
...
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
package.json
{
"name": "UW2",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jquery": "^3.4.1",
"mysql2": "^1.7.0",
"nodemon": "^1.19.4",
"sequelize": "^5.21.1"
}
}