Uikithemes Uikithemes - 1 month ago 7
HTML Question

About some functionality on jQuery Load More for html

When i'm searching for Load More form html i found it here on stackoverflow but is very simple and i want some fonctionality to edit jQuery.
the idea is showing 5 posts by click on load more but before showing i want to add loading.gif image that mean load posts.
and when no left posts on blog i want to replace "Load More" text by "No more Posts" with different class="no-more" to edit it from css because i don't want this alert, so please can someone tell me how?

$(function(){
$("div").slice(0, 10).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
alert("No more divs"); // alert if there are none left
}
});
});


that is demo :
http://jsfiddle.net/purmou/bEdfX/

Answer

i'm succesful to add this code for change "Load More" with "No More Posts" replace :

alert("No more divs"); // alert if there are none left

by:

$(".load-more").html('<div class="no-more"><a href="#"><i class="icon-cancel"></i>  No More Posts</a></div>') // if there are none left 

And is woking fine :) Now only i want to add loading.gif when posts is loading?