The issue I am having involves two objects which are supposed to have a function bound to them once the page loads.
One of the objects is a widget loading via a script. The widget is eventually placed in the div. The other object is pure html, which works as expected.
I am assuming this is an issue with the order the objects are loading, but I can't seem to come to a solid conclusion since my script to build the div is in the head (so it should load first?), followed by the html, and finally the script at the bottom of my document. So if this is all true, the object should be loaded before the final $(document).ready function runs, but the bind does not seem to be applied to the generated div.
Any help would be greatly appreciated and will receive a fast response! (I promise!!!)
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script> //(In Head)
<div>
<span /> Object to be loaded via JS
</div>
<div class="widget">
<ul class="hs">
<li>
<div>
<span /> Object loaded via HTML
</div>
</li>
</ul>
</div>
jQuery(function ($) {
$.fn.hScroll = function (amount) {
amount = amount || 120;
$(this).bind("DOMMouseScroll mousewheel", function (event) {
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $(this).scrollLeft();
position += direction > 0 ? -amount : amount;
$(this).scrollLeft(position);
event.preventDefault();
})
};
});
$(document).ready(function () {
$('.hs').hScroll(60); // You can pass (optionally) scrolling amount
});
EDIT I've created a new version of the code which includes almost everything.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Events Scroll</title>
<style>
.widget {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
--gutter: 20px;
padding-left: 50px;
padding-right: 50px;
}
.widget > * {
grid-column: 2 / -2;
}
.widget > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 0px;
grid-template-rows: 285px;
grid-auto-flow: column;
grid-auto-columns: 200px;
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
width: 10px;
}
ul {
list-style: none;
padding: 0;
}
.widget {
width: 100%;
height: 100%;
}
.hs > li,
.event {
transform: scale(.96);
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(240, 240, 240);
border-radius: 8px;
border: solid 1px gray;
background-repeat: no-repeat;
height: 285px;
background-size: 200px 200px;
}
</style>
</head>
<body>
<div class="lwcw" data-options="id=3&format=html"></div>
<div class="widget">
<ul class="hs full no-scrollbar" id="scroll">
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
</ul>
</div>
<script>
$('.widget').on("DOMMouseScroll mousewheel", '#scroll', function (event) {
amount = 60
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $('#scroll').scrollLeft();
position += direction > 0 ? -amount : amount;
$('#scroll').scrollLeft(position);
event.preventDefault();
});
</script>
</body>
</html>
