I'm using jQuery to implement a so-called 'infinite scroll' effect on my webiste. Its currently working fine, but I have a concern. That is, although the database row is over, if the scroll bar reaches downward, it continues to grab data, which is, in this case, data that doesn't exist. What I want is, once the database row ends, it should not get data even if the scroll bar reaches down.
<script type="text/javascript">
$(document).ready(function () {
var message_count = <? php echo $message_count; ?> ;
var loaded_messages = 0;
function last_msg_funtion() {
$('div#more_button').html('<img src="./assets/img/loader.gif">');
loaded_messages += 10;
$.get("/flick/load_more_message/" + loaded_messages, function (data) {
$("#load_more_message").append(data);
});
if (loaded_messages >= message_count - 10) {
$("#more_button").hide();
//alert('hide');
}
};
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
last_msg_funtion();
}
});
});
</script>
Make a check before calling for more data (instead of just hiding the button)
function last_msg_funtion() {
if (loaded_messages < message_count) { // ADDED THIS CHECK
$('div#more_button').html('<img src="./assets/img/loader.gif">');
loaded_messages += 10;
$.get("/flick/load_more_message/" + loaded_messages, function (data) {
$("#load_more_message").append(data);
});
if (loaded_messages >= message_count - 10) {
$("#more_button").hide();
//alert('hide');
}
}
};
I think you can try this
$(window).scroll(function(){
if(loaded_messages < message_count)
{
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
}
});
Related
hi am having a problem with infinite scroll functionality, when all the contents have been displayed it still continues to scroll (strange behavior). i am looking for a way to stop the infinite scroll when all contents are displayed
here is my code
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;
$('#results').load("<?php echo base_url() ?>admin/csr_transactions/get_products",
{'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {
});
$('#load_more').click(function(){
load_more(total_record, total_groups);
});
function load_more(total_record, total_groups) {
if(total_record <= total_groups)
{
$('.loader_image').show();
$.post('<?php echo site_url() ?>admin/csr_transactions/get_products',{'group_no': total_record},
function(data)
{
if (data != "") {
$("#results").append(data);
$('.loader_image').hide();
total_record++;
}
});
}
}
});
</script>`
this is my simple test code for lazy load
http://codepen.io/kevkev/pen/bVVGdE
it works so far .. but the thing is that hidden images in an onclick function for buttons etc. doesnt work!
(watch through my code and scroll to end and push the button)
you can see in the network feedback that it already had load the images.
i could figure out that the problem is "display:none"
.pop {
display:none;
z-index:99;
position:absolute;
width:100%;
height:auto;
background:inherit;
}
Because display: none; elements are unknown in position. And the lazyloader doesn't know, when and if you change this. Therefore it decides to eager load it. If you want a lazyloader that automatically detects this use https://github.com/aFarkas/lazysizes/.
As alternative I would recommend justlazy, because it's more lightweight and don't uses jQuery.
1. Define placeholder (similar to that what you have done):
<span data-src="path/to/image" data-alt="alt" data-title="title"
class="placeholder">
</span>
2. Initialize lazy loading after your button click:
$(document).ready(function () {
$("#art").click(function () {
$("#art_pop").fadeIn(300);
Justlazy.registerLazyLoadByClass("placeholder", {
// image will be loaded if it is 300 pixels
// below the lower display border
threshold: 300
});
});
// other code ..
});
thanks guys! but I also got a working solution on this:
http://codepen.io/kevkev/full/meebpQ/
$(document).ready(function () {
$("#art").click(function () {
$("#art_pop").fadeIn(300);
});
$(".pop > span, .pop").click(function () {
$(".pop").fadeOut(600);
});
});
;(function($) {
$.fn.unveil = function(threshold, callback) {
var $w = $(window),
th = threshold || 0,
retina = window.devicePixelRatio > 1,
attrib = retina? "data-src-retina" : "data-src",
images = this,
loaded;
this.one("unveil", function() {
var source = this.getAttribute(attrib);
source = source || this.getAttribute("data-src");
if (source) {
this.setAttribute("src", source);
if (typeof callback === "function") callback.call(this);
}
});
function unveil() {
var inview = images.filter(function() {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger("unveil");
images = images.not(loaded);
}
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
unveil();
return this;
};
})(window.jQuery || window.Zepto);
/* OWN JAVASCRIPT */
$(document).ready(function() {
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
});
I wrote my first scriptaculous script to create a slideshow between some div element :
var SlideShow = Class.create({
initialize:function(element, delayStart){
this.element = element;
this.delayStart = delayStart;
this.slides = this.element.childElements();
this.numberOfSlides = this.slides.size();
this.numberActiveSlide = 1;
this.start_slideshow();
},
start_slideshow: function()
{
this.switch_slides.delay(this.delayStart);
},
switch_slides: function()
{
this.slides[this.numberActiveSlide].fade();
if (this.numberActiveSlide == this.numberOfSlides) { this.numberActiveSlide = 1; } else { this.numberActiveSlide = this.numberActiveSlide + 1; }
Effect.Appear.delay(this.slides[this.numberActiveSlide], 850);
this.switch_slides.delay(this.delay + 850);
}
});
document.observe("dom:loaded", function(){
var slideshows = $$('div.slideshow');
slideshows.each(
function(slideshow) {
s = new SlideShow(slideshow, 2);
});
});
But I always get this error and It's been hours I can't figure it out where my problem is!
Undefined is not an object (evaluating this.slides[this.numberActiveSlide]);
Thanks you !
Nick
99% sure it's a context issue. Make sure you bind your function calls so that this is retained throughout your code.
Debug what this is in switch_slides: it should be the same thing as this in start_slideshow. If it's not, bind your call to switch_slides to your instance:
start_slideshow: function()
{
this.switch_slides.bind(this).delay(this.delayStart);
},
You'll probably have to do the same in switch_slides where it calls itself.
Having problem with prototype ajax and setTimeout. Here is my code shortened:
//new ajax request
....onComplete: function (transport) { //json as this -> array[$i].something
var json = transport.responseJSON;
var $i = 0;
window.setTimeout(function () {
SLOW();
},
500); //display every json[$i] with custom delay
function SLOW() {
$i++;
if (json[$i].something !== null) { //insert in proper div id in the html document
window.setTimeout(function () {
$('document_div' + json[$i].something).innerHTML = json[$i].something_to_display;
},
500);
window.setTimeout(function () {
$('document_div' + json[$i].something).innerHTML = json[$i].something_to_display;
},
1000);...window.setTimeout(function () {
SLOW();
},
500);
} else {
//stop and continue
}
Getting this error: json[$i] is undefined.
EDIT: looks like i'm getting this error on second timeout, the first one changes the div correctly.
Done.
Solution was to re-var json again before using it in setTimeout.
var json_something = json[$i].something; //and so on...
var json_something_to_display = json[$i].something_to_display
window.setTimeout(function() { $('document_div'+json_something).innerHTML = json_something_to_display; }, 500);
Can somebody explain why this is needed? Why varing json is not enough and it disapears somewhere after one window.setTimeout function?
Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}