Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 496 Vote(s) - 3.55 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Detect div scroll jquery

#1
I want to detect div scroll. What this code does is detect the whole window scroll:

$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multipal ajax loads
var total_groups = <?php echo $total_groups; ?>; //total record group(s)

$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

$(window).scroll(function() { //detect page scroll

if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{

if(track_load <= total_groups && loading==false) //there's more data to load
{
loading = true; //prevent further ajax loading
$('.animation_image').show(); //show loading image

//load data from the server using a HTTP POST request
$.post('autoload_process.php',{'group_no': track_load}, function(data){

$("#results").append(data); //append received data into the element

//hide loading image
$('.animation_image').hide(); //hide loading image once data is received

track_load++; //loaded group increment
loading = false;

}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide loading image
loading = false;

});

}
}
});
});

Here is my HTML code.

<div id="scrollingbox">
<ol id="results">
</ol>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>
</div>

I used the div ID but it outputs nothing instead of two.
Reply

#2
Not sure, but you can just reference the div by id, class, etc in the scroll() function:

Here is a simple jsfiddle:

[To see links please register here]


$(".box").scroll(function() { //.box is the class of the div
$("span").css( "display", "inline" ).fadeOut( "slow" );
});


Updated:

[To see links please register here]


$("span").hide();

$(".box").scroll(function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$("span").show();
} else {
$("span").hide();
}
});
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through