My page layout has several group of divs repeating like
<div--1>
<div--2>
<div--3>
<div--4>
Tthis structure repeats over several times. I would like to hide the contents of div--4 to be hidden untill the user scrolls to that element. How can we achieve that functionality?
I found a plugin that works with images like that(http://www.appelsiini.net/projects/lazyload)
This code will show and hide the divs based on the mouse position. Not sure how to detect a particular div is on the screen currently or not.
<html>
<head>
<title>Show/Hide Divs</title>
<script type="text/javascript">
function showMyContents(control)
{
control.children["myContents"].style.display = 'inline';
}
function hideMyContents(control)
{
control.children["myContents"].style.display = 'none';
}
</script>
</head>
<body>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 1
<div style="display:none" id="myContents">My Contents1</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 2
<div style="display:none" id="myContents">My Contents2</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 3
<div style="display:none" id="myContents">My Contents3</div>
</div>
</body>
</html>