asked on

Loading divs during onscroll

I am trying to figure out a way to load divs with content using ajax (ie 6 & 7 only) when the user scrolls up or down. The idea is that the user will select an item from a point in a table of contents, and only that data will load (which works). But we are trying to make requests back to the server for more information if the user scrolls up or down. When a div comes into view, it will make a small request back to the server for the data to load. The issue we have is wireless bandwidth, and we don't want to load the entire page because the pages are quite large. Something like the following (ref id7); only fire an even whenever *each div* comes into the browser window:

<body>
<div style="height:150px;" id="id1">
id1
</div>
<div style="height:150px;" id="id2">
id2
</div>
<div style="height:150px;" id="id3">
id3
</div>
<div style="height:150px;" id="id4">
id4
</div>
<div style="height:150px;" id="id5">
id5
</div>
<div style="height:150px;" id="id6">
id6
</div>
<div style="height:150px;" id="id7" onscroll="fireEvent()">
id7
</div>
<div style="height:150px;" id="id8">
id8
</div>
<div style="height:150px;" id="id9">
id9
</div>
<div style="height:150px;" id="id10">
id10
</div>
<div style="height:150px;" id="id11">
id11
</div>
<div style="height:150px;" id="id12">
id12
</div>
<div style="height:150px;" id="id13">
id13
</div>
<div style="height:150px;" id="id14">
id14
</div>
<div style="height:150px;" id="id15">
id15
</div>
<div style="height:150px;" id="id">
id16
</div>
</body>

Any ideas are appreciated.

SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

kmartin7

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

I'm glad I could help. Thanks for the grade, the points and the fun question.

bol