We Keep Coding

Javascript loading more content with AJAX problem

So I've been learning javascript for 2 months now and I decided to make a scroll thing where when you scroll the page you get more content (more paragraphs in div). I watched tutorial on youtube and did something like that but it doesn't work as i expected. At first it looks like it works but i noticed that i don't need to scroll down(or to scroll to bottom) to load more content but can go scroll up as well. To save you some time (if not interested in reading whole script) this is what i am checking (code near the end of the script):
$(window).scrollTop() + $(window).height() > $("#load_data").height()
Which is in Vanilla JS from my understanding this:
window.innerHeight + window.scrollY > document.querySelector('#load_div').offsetHeight
scrollTop() and scrollY should return(or set) value of pixels from the top of window(in this case) scrolled. Then we add inner height of window. Here is what i don't understand then, Shouldn't those 2 always be bigger then the divs height? So that explains why wherever i scroll it triggers. But how to set this up so it only triggers when i am at the bottom or near it? Here is full code (without php response part which only returns paragraph that got data from database):
<div id="load_data"></div>
<div id="load_data_message"></div>
</div>
<script>
$(document).ready(function(){
var limit = 8;
var start = 0;
var action = 'inactive';
function load_data(limit, start){
$.ajax({
url: 'infinitload.php',
method: 'POST',
data: {limit: limit, start: start},
cache: false,
success: function(data){
$('#load_data').append(data); //Appending data;
if(data == ''){
$('#load_data_message').html('<button>No results found</button>');
action = 'active';//if
}else{
$('#load_data_message').html('<button>Loading Content</button>');
action = 'inactive';
}//else
}//success
})//ajax
}//load_data()
//Loading for the first time
if(action == 'inactive'){
action = 'active';
load_data(limit, start);
}
$(window).scroll(function(){
if( $(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){
$('button:contains("Loading Content")').toggle();
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start);
}, 1500);
}
});
});//dom ready
</script>
</body>
UPDATE:
I tried code like this http://jsfiddle.net/nick_craver/gWD66/
which totally makes sense and it works in example there but not in my case. Confused. It's probably something else leading to my problem so i ll try to look into my code again. Thanks for all replies.

Try to replace
$("#load_data").height()
with
$("#load_data").offset().top

Problem is finally fixed. I forgot html DOCTYPE thing. Never got annoyed more :)

Scrolling Problem While Loading Data with AJAX

I am developing a website using PHP, MySQL, JavaScript (JQuery + Ajax), I used customer scroll function and scrollbars, the problem is that if I load data with ajax the scroll function generates hundreds of errors saying:"Uncaught TypeError: Cannot read property 'top' of undefined" from the scroll function which is:
function Scroll() {
var contentTop = [];
var contentBottom = [];
var winTop = $(window).scrollTop();
var rangeTop = 200;
var rangeBottom = 500;
$('.navbar-collapse').find('.scroll a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);//The error rises from this line
contentBottom.push($($(this).attr('href')).offset().top +
$($(this).attr('href')).height());
})
$.each(contentTop, function (i) {
if (winTop > contentTop[i] - rangeTop) {
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
}
})
}
and also the website starts blinking when I scroll to the end, I tried checking if the "contentTop.push($($(this).attr('href')).offset()" is not null, errors get disappear but web page still blinks at the end of the page.
If you can help, please share your answer, Thanks in Advance.

var winTop = $(window).scrollTop();. This line forces window to go to top of the page. This might be the cause for blinking effect.

infinity scroll: Load all data from database and scroll to show more

I am using infinity scroll in my project. First it will fetch few records from MySQL database and show on page. Once page scroll down it make ajax query to server and load more data.
Is it possible to fetch all data at once from mysql database in json format and then perform load more on client side. So, basically I want no ajax request to database.
Here is the code which is working fine if I make ajax request on page scroll.
flag = true;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
first = $('#first').val();
limit = $('#limit').val();
no_data = true;
if(flag && no_data){
flag = false;
$('#loader').show();
$.ajax({
url : 'ajax_html.php',
method: 'post',
data: {
start : first,
limit : limit
},
success: function( data ) {
flag = true;
$('#loader').hide();
if(data !=''){
first = parseInt($('#first').val());
limit = parseInt($('#limit').val());
$('#first').val( first+limit );
$('#timeline-conatiner').append( '<li class="year">'+year+'</li>');
$('#timeline-conatiner').append( data );
year--;
}else{
alert('No more data to show');
no_data = false;
}
},
error: function( data ){
flag = true;
$('#loader').hide();
no_data = false;
alert('Something went wrong, Please contact admin');
}
});
}
}
});

This is untested and just an example of the method, Sorry I don't have time for a full example but this should give you the idea.
//data cache
var cache = ['one','two', 'three' .....];
//current location in cache
var current = 0;
//ajax request object
var request;
if($(window).scrollTop() + $(window).height() == $(document).height()){
var cache_total = cache.length;
//add next item to page & increase the current pointer
$('#timeline-conatiner').append( cache[current] );
++current;
if( current - cache.length < 50 ){
//if we only have 50 items not shown in cache pull next results with ajax and add to cache
if( !request ){
//also youll want to keep track if you have a pending request that hasn't returned yet, to prevent race conditions.
request = $.ajax( .... ).success( function( data ){
$.extend( cache, data ); //or push each if you like
}).always( function(){
request = false; //should be false on finish but just because.
});
} //end if request
//make sure to properly offset the data using the total in the cache to prevent pulling duplicates. eg SELECT ... LIMIT {cache.length}, 50
} // end if cached
} //end scroll
See the issue with what you have above is the user needs to wait for the ajax call to finish, which essentially turns it into a synchronous request ( like reloading the page ). You want to keep it asynchronous as ajax is intended to be. So instead of displaying the results of the ajax, you buffer them and keep some data you are not showing. Then on scroll show some buffered data and after that fill the cache back up.
Obviously this makes it much more complex to code, but the advantage is you don't need to pull a massive amount of data at one time and the user wont get the delay from halting on the ajax request. You'll have to balance the time the request takes with the amount of data in the cache so you always have some data in there. This depends on how much space data takes to render and how long the ajax query takes.

I would say you don't need infinity scroller (or whatever) at all to do what u want... but since u have it all nicely working and I suspect u might decide u want that 'lazy load' type functionality back at some point u could do the lazy thing...
Simply try playing around with the first and limit param values in your example...
Say...
first = 0 and
limit = some really big number...
I think u can set some values and force a single ajax call on page load very easily.

If all data has been retrieved and added to DOM, then following script may be helpful. First add hidden class to extra elements. Run this script after DOM is created.
$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
$(el).addClass("hidden"); // for extra elements
}
});
Add css for class hidden
.hidden {
display: none;
}
And check when scroll has reached the bottom of page to show more items.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) { // checks if scroll reached at bottom
var elements = $(".elements.hidden"); // fetch all hidden elements
elements.each(function (index, el) {
if (index < singleRowLimit) { // singleRowLimit - number of elements to show in one scroll
$(el).removeClass('hidden');
}
});
}
});
EDIT - without using CSS - hide/show
If all data has been retrieved and added to DOM, then following script may be helpful. First add hidden class to extra elements. Run this script after DOM is created.
$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
$(el).addClass("hidden").hide(); // for extra elements
}
});
And check when scroll has reached the bottom of page to show more items.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) { // checks if scroll reached at bottom
var elements = $(".elements.hidden"); // fetch all hidden elements
elements.each(function (index, el) {
if (index < singleRowLimit) { // singleRowLimit - number of elements to show in one scroll
$(el).removeClass('hidden').show();
}
});
}
});

Unable to Lazy load Images

Well I am unable to lazy load images for some reason. Here is the waterfall view of the tested site
Apparently I am using two lazy load scripts with lazy load script 1 which works but kills the lightbox plugin and also requires lots of tweaking using data-src and src and class="lazy-load" attributes. which I am using for non post related images.
But the main problem lies in the second script which requires Jquery but doesn't require any tweaking with the images. The script is called stalactite (via Github) which I am using like this
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript' />
<script href='http://googledrive.com/host/0B2xMFcMT-eLiV1owdlBMeklGc2M' type='text/javascript' />
<script type='text/javascript'>
$( 'body').stalactite({
loader: '<img/>' // The contents of the loader. Defaults to a dataURL animated gif.
});
</script>
You can find the link of the stalactite script in the above code and here is the documentation.
I don't know why it doesn't work ! Or am I executing it wrongly.
A solution to the problem will be very helpful. Many thanks in advance.

If you are tired of trying to use lazy load libraries and haven't managed to make all of it work, I can suggest you to create lazy load script on your own, or you can take a look at this code below.
By only using jQuery and without needing any other library, you can use this script to achieve the lazy load (I modified the codes from the original one that I used at work):
var doLazyLoad = true;
var lazyLoadCounter = 0;
var lazyLoadMax = 2; // Maximum number of lazy load done
// Button to indicate lazy load is loading,
// or when lazy load has reached its maximum number,
// this button load data manually.
// You can replace this with something like gif loading animation.
var $btnLoadMore = $("#btn-lazy-load-more");
// I use AJAX function to get the data on lazy load
var ajaxFn = function (enableScrollAnim = true) {
var loadingStr = 'Loading...',
idleStr = 'Load more',
ajaxUrl = 'http://www.example.com/posts',
ajaxHeaders = {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'},
ajaxData = {
start: $('.posts-wrapper .post').length
};
$btnLoadMore.text(loadingStr); // You can disable the button to prevent manual loading
return $.ajax({
url: ajaxUrl,
type: 'GET',
dataType: 'json',
data: ajaxData,
headers: ajaxHeaders,
// On success AJAX, append newly loaded data to lazy load container.
// Here in my example, the GET request returns data.view i.e. the content, and data.total i.e. total number of posts
success: function (data) {
var $newLoadedPosts = $(data.view),
nlsMarginBottom;
$('.posts-wrapper').append($newLoadedPosts);
$newLoadedPosts.css('display', 'none').fadeIn();
// Animate auto scroll to newly loaded content
if (enableScrollAnim) {
$('html, body').animate({
scrollTop: $newLoadedPosts.first().offset().top
});
}
if ($('.posts-wrapper .post').length < data.total) {
$btnLoadMore.text(idleStr); // If you disable the button, enable the button again here
} else {
// Remove the button when there's no more content to load.
// Determined by data.total
$btnLoadMore.remove();
}
},
error: function () {
$btnLoadMore.text(idleStr); // If you disable the button, enable the button again here
}
});
};
// Do the lazy load here
if ($btnLoadMore.length) {
$(window).scroll(function () {
var scrollOffset = (($btnLoadMore.offset().top - $(window).height()) + $btnLoadMore.height()) + 100;
var hasReachedOffset = $(window).scrollTop() >= scrollOffset;
var isLmsBtnExist = $btnLoadMore.length;
if (hasReachedOffset && lazyLoadCounter < lazyLoadMax && doLazyLoad && isLmsBtnExist) {
doLazyLoad = false;
ajaxFn(false).always(function () {
doLazyLoad = true;
lazyLoadCounter++;
});
}
});
}
$btnLoadMore.click(ajaxFn);
And here is the GIF demo image of my working code.
If you need any further explanation, just comment this answer and I will try to help you.

Jquery - Carasol build finished and would like advice on best practice / neatening up my code

I have been building my own carasol over the past few days.
My Jquery is based on tutorials on the web and also from help and advice from SO.
I am not a Jquery guru just an enthusiast and think my code is a little sloppy, hence the post.
here is a link to the working code: http://jsfiddle.net/JHqBA/2/ (updated link)
basically what happens is:
if someone hits the page with a # values in the url it will show the appropriate slide and example would be www.hello.com#two, this would slide to slide two
if someone clicks the numbers it will show the appropriate slide
next and prev also slide through the slides.
The question is, is there anything i could have wrote better as i know there is alot of duplicate code.
I understand its a big ask but it would help me learn a little more (i think my code is a little old school)
if anyone has any questions please feel free to ask and ill answer what it does or is supposed to do.
Sluap
--- Edit ----
I have made only one aniamtion function now which has got rid of alot of duplicate code.
I have yet to look into on function but will do soon.
I would like to know more about the create a new function, outside of the jQuery ready block as i cant get this working or quite understand how i can get it to work sorry
any more tips would be great ill carry on working on this project till i am happy with it.
also is there a better way to write:
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
Jquery full:
$(document).ready(function () {
//////////////////////////// INITAL SET UP /////////////////////////////////////////////
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
//set the initial not active state
$('#prev').attr("class", "not_active");
//////////////////////////// SLIDER /////////////////////////////////////////////
//Paging + Slider Function
rotate = function () {
var triggerID = $slideNumber - 1; //Get number of times to slide
var image_reelPosition = triggerID * divWidth; //Determines the distance the image reel needs to slide
//sets the active on the next and prev
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
//////////////////////////// SLIDER CALLS /////////////////////////////////////////////
//click on numbers
$(".paging a").click(function () {
$active = $(this); //Activate the clicked paging
$slideNumber = $active.attr("rel");
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
});
//click on next button
$('#next').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) + 1);
$slideNumber = slideNumber;
if ($slideNumber <= divSum) { //do not animate if on last slide
rotate(); //Trigger rotation immediately
};
return false; //Prevent browser jump to link anchor
}
});
//click on prev button
$('#prev').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) - 1);
$slideNumber = slideNumber;
if ($slideNumber >= 1) { //do not animate if on first slide
rotate(); //Trigger rotation immediately
};
}
return false; //Prevent browser jump to link anchor
});
//URL eg:www.hello.com#one
var hash = window.location.hash;
var map = {
one: 1,
two: 2,
three: 3,
four: 4
};
var hashValue = map[hash.substring(1)];
//animate if hashValue is not null
if (hashValue != null) {
$slideNumber = hashValue;
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
};
});

Question and answer has been moved over to https://codereview.stackexchange.com/questions/8634/jquery-carasol-build-finished-and-would-like-advice-on-best-practice-neateni/8635#8635
1) Separation of Concerns
Start by refactorring your code in to more granular functions.
You can read more about SoF at http://en.wikipedia.org/wiki/Separation_of_concerns
Update:
E.g. Instead of having your reel resizing code inline, put it in it's own function, like this:
function setImageReelWidth () {
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
}
This achieves 2 things:
a. First, it groups a block of code that is logically cohesive, removing it from the main code which results in a much cleaner code habitat.
b. It effectively gives a label to the code block via the function name that is descriptive of what it does, and therefore makes understanding of the code much simpler.
Later, you can also encapsulate the whole thing in it's own "class" (function) and you can move it into it's own js file.
2) The jQuery "on" function
Use the "on" function to attach your click events, rather than the "click" function.
http://api.jquery.com/on/
This has the added advantage of also binding it to future elements matching your selector, even though they do not exist yet.
3) The ready function
// I like the more succinct:
$(handler)
// Instead of:
$(document).ready(handler)
But you might like the more obvious syntax.
Those are just a few things to start with.
-- Update 1 --
Ok, StackOverflow is not really suited to a refactoring work in progress, but we'll make do. I think you should keep your original code block in your question, so that future readers can see where it started and how it systematically improved.
I would like to know more about the create a new function, outside of
the jQuery ready block as i cant get this working or quite understand
how i can get it to work sorry
I am not familiar with jsfiddle.net, but it looks cool and helpful, but might also be a bit confusing if you don't know what is going on. I am not sure I do :), but I think that script editor window results in a .js file that is automatically referenced by the html file.
So here is an example of a function defined outside of the ready block, but referenced from within.
function testFunction () {
alert ('it works');
}
$(document).ready(function () {
testFunction();
// ... other code
});
This should pop up an alert box that says, "it works" when the page is loaded.
You can try it for yourself.
Then, once you got that working, you can refactor other logically cohesive blocks of code into their own functions. Later you can wrap them all up into their own javascript 'class'. But we'll get to that.