Why is my in-viewport JavaScript code not functioning properly?
When the Click to move button is clicked, the cat image will slide correctly.
However, when implementing the following code:
if($("#testtest").is(":in-viewport"))
{
alert("hhh");
}
To detect when the element with id="testtest" is visible in the viewport and trigger an alert message, nothing seems to happen. How can I fix this issue?
Here is the HTML code snippet:
<div style="cursor: pointer;" id="move-left" onclick="left_fn(-422)">
Click to move
</div>
<div style=" width: 500px; overflow: hidden; ">
<ul style=" width: 2000em; transition: transform 200ms ease-in-out; transform: translate3d(0px, 0px, 0px); margin-left: -10px; padding: 0;" id="cat-ul">
<li style=" display: inline-table; ">
<img src="http://i.imgur.com/w3abdeV.jpg">
</li>
(additional image list items here)
<li id="testtest" style="width: 1px; display: inline-table;">
</li>
</ul>
</div>
<script>
function left_fn(value) {
if($("#testtest").is(":in-viewport"))
{
alert("hhh");
}
document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)";
var x = (value + 422);
var y = (value - 422);
document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')')
}
</script>