I have a div which contains a series of design projects. When the user scrolls to the bottom of the page, the javascript detects this and loads new page content into that div.
You can see the website at
http://www.jb-design.me/marchupdate/
The problem I have is that the new content just pauses then loads below. With no feedback for the user that new content is being loaded etc.
What I would like is a div to appear between the current content and the new content (Where the 'spacer' div normally is on my website. And display a loading gif/png. Which would fade out once the new content has loaded. The new content would then appear below fading in...?
Is this possible at all?
I have tried to implement a 'var pageLoadisloaded' but to no use.
I am literally a newbie and have been trailing the web for a solution for the past couple of days and now I thought I would just ask for help!
Thank you in advance
Javascript code below...
alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
After you set the alreadyloading variable to true, append a bit of html to the end of the div#newcontent which contains an image that indicates that new content is being loading. Use $(window).ScrollTop() to scroll further down to ensure that this is visible. When the content arrives via Ajax, you can remove the little piece of code you added, and append the new stuff.
Alternatively, use 3 div tags as follows:
1) The already loaded content is kept in the first division.
2) When the scroll-bar reaches the bottom, your function is triggered, which calls a jQuery FadeIn effect for the second division which contains the loading image. Scroll down a bit using the aforementioned function to ensure that it is visible.
3) When the content arrives, put it in the third div and then call a simultaneous FadeIn effect for that, and FadeOut effect for the second division.
4) Once the effect is complete, append the contents of the third division to the first one, and reset the third one.
What if you were to have a fixed div to the bottom of the page, and when you were in the conditional to load a new page - you fade it in, and when the new content has been loaded in - you fade it out?
Additional assistance
You could try something like this to check if more pages are available - set this up to run after the first ajax - perhaps in the success part of the function:
var url = "page"+nextpage+".html";
$.ajax({
url: url,
type:'HEAD',
error:
function(){
// No more pages exist - remove loading
$('#loading').remove();
},
success:
function(){
// Good to load another page
}
});
Where I found this:
http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06
Related
I have an infinate scrolling function that loads data via ajax. I would like to load the next set of data or at least, images in advance - preload the next page of content.
I have tried adding .load instead of .ajax - but it still seems to load the data directly not from a 'cached' version.
Any ideas appreciated.
jQuery(document).ready(function($) {
var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
var ready = true; //Assign the flag here
var processing;
$(window).data('ajaxready', true).scroll(function() {
if ($(window).data('ajaxready') == false) return;
if ($(window).scrollTop() == ($(document).height() - $(window).height())){
$(window).data('ajaxready', false);
if (count > total){
return false;
}else{
loadArticle(count);
}
count++;
}
});
function loadArticle(pageNumber){
$('a#inifiniteLoader').show('fast');
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$('a#inifiniteLoader').hide('1000');
$(".newsfeed").append(html); // This will be the div where our content will be loaded
console.log('fire');
//stop multiple firing
$(window).data('ajaxready', true);
}
});
return false;
}
});
First I should say what is infinite scroll:
Traditionally, the user would have to click on next page or previous page to visit older post content. However, recently there is
a new trend started by popular sites (such as facebook and twitter) in
which they automatically load the next page content once the user hits
the bottom of the post. This technique has proven to show an increase
in time spent on page by the user because the new content loads
automatically.
How to Add Infinite Scroll in WordPress
First thing you need to do is install and activate the Infinite Scroll plugin.
Upon activation, a new menu option will be added under your settings
tab called Infinite Scroll. On almost 90% of the blog sites, this
should work without changing a single setting. However, if you have a
relatively custom designed blog, then you will need to adjust the
“Selectors”. Go the plugin’s setting page and click on the selectors
tab.
plugin
Documentation 1
documentation 2
I'm trying ajax (and to a degree a lot of js) for the first time so I'm not sure what I'm doing wrong.
The goal is that a series of thumbnails in a sidebar will change the content of a centrally located div when selected. The link currently looks like this:
<img src="images/thumbs/elon-scissors-logo.jpg" onclick="reloadMiddleWith('about','about','test')"/>
When clicked it runs the below function and changes the background and calls a php source.
function reloadMiddleWith(theme, page, content) {
var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
$('#live-area').addClass(theme);
$.ajax({
url: new_url,
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#area-loader').html(data);
});
}
I tested that and it worked fine when it was just the background and the new php page, but rather than making 50 pages to call in (and not even trying arrays or databases at the moment for lack of proper understanding) I thought I would just make 1 or 2 new page that repeat the same container style and just call the one I want to display by id tag. Currently when I try it, it just changes the background but does not change the php content.
The jQuery itself has a handy function jQuery(...).load, using it jQuery would handle all the necessary points:
function reloadMiddleWith(theme, page, content) {
var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
$('#live-area').addClass(theme);
jQuery("#area-loader").load(new_url);
}
for more information check documentation page out.
I have an HTML page with multiple divs. Each div having a section of its own. My requirement is to load the page initially with all the sections. Then to autoscroll the page so that the first div section has its header fixed and contents scrolling. At the end of its contents the second sections header takes up first section headers place and now contents for section 2 scrolls. Then the third sections header takes place of second header and contents for section 3 auto scrolls and so on. At the end of all section it again starts with section 1. Can anybody help me as to how to accomplish this?
Below is my code link,
http://pastebin.com/EAYtsWAT
I am using jsscroller for automatic content scrolling. I am able to scroll the contents but I dont know how to Keep header Activity1 fixed than scroll its contents, then remove that header and replace it with Activity2 header, scroll its contents and so on.
After doing some housekeeping on the code that you provided (and moving it to jsfiddle) here's something that (I think) does what you want.
The jscroller functionality is relatively limited, so I had to apply some tweaks to get it together:
function SectionManager(){
this.currentSection = null;
this.sections = $("#content .section");
this.numSections = this.sections.length;
this.transition = function (current){
//SCROLLER CODE STARTS HERE....
$jScroller.config.refresh = 100;
// Add Scroller Object
$jScroller.config.obj = [];
$jScroller.add(
"#content .section.active .activityTbl",
"#content .section.active .activityTbl > table",
"up",
3
);
// Start Autoscroller
$jScroller.start();
$jScroller.cache.init = true;
//SCROLLER CODE ENDS HERE....
};
this.callback = function (){
this.currentSection = (this.currentSection != null)
? (this.currentSection + 1) % this.numSections
: 0
;
$("#content .section").removeClass("active");
$("#content .section:eq(" + this.currentSection + ")").addClass("active");
this.transition();
}
this.run = function(){
this.callback();
};
}
manager = new SectionManager();
manager.run();
Notably also, I had to overwrite the $jScroller.scroll function to contain an asynchronous callback to fire when the end is reached: This will trigger the manager's callback function and shift the scrolling functionality to the next section.
Edit: See the jsfiddle for details
It sounds like you could use Scrollorama. You can pin and unpin stuff depending on scroll, while other elements (content) scroll normally.
I've made a loading "animation.gif" for my dynamic website. This is the code I used from jquery, to show and hide the spinner:
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
http://docs.jquery.com/Ajax_Events
My Problem:
The website has different contents (like flash, images, text etc.). So some parts of the website take longer to load then others. But the duration of loading animation is always the same(its too fast). When I load a content with a flash(4mb) and html text, the spinner hides way too fast, and the content is still loading. The same with HQ images..
I could use a min delay, like:
$("#this").delay(600).fadeOut("slow");
But I dont think this is a good solution at all.
How is it possible not to hide the loading-spinner, until the whole content is loaded?
What you can is create a list of flags for all of the slow loading elements in your page.
Then start listening to each of the elements load event ( You can do it with flash as well ).
Each time an element is loaded raise its flag.
Have a interval run in the background that watch this list, once all of list items are raised, remove the loading-spinner.
You can also try this:
var iv = setInterval(function () {
if (document.all["theObject"].readyState == 4) {
clearInterval(iv)
alert("Object loaded (maybe).")
}
}, 100)
taken from : http://www.webdeveloper.com/forum/showthread.php?160792-lt-object-onload,
by Orc Scorcher
From the very page you linked to, just bind to ajaxStart and ajaxStop instead, which have the required logic built-in and only fire for the first AJAX request in any group, and when the last AJAX request completes.
Alternatively, you can use your own counter to figure out how many AJAX requests are outstanding:
(function(sel) {
var count = 0;
$(sel).bind("ajaxSend", function() {
if (count++ === 0) {
$(this).show();
}
}).bind("ajaxComplete", function() {
if (--count === 0) {
$(this).hide();
}
});
})('#loading');
Ok I tried out this one (Fiddle Here) and hope is what you're looking for.
Basically:
give each element you want the loader to wait for a .content class
dynamically set content src with your jQuery/AJAX whatever
bind $('.content') elements to a .load() event
when .load() is fired increment a counter, if the counter equals the .length of $('.content') selector then hide the loading gif
From jQuery Site about .load() event :
This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
So it should work fine with your lazy content.
Hope it helps!
I populate many parts of my website using
$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);
Where /some/api/call.php returns a built list, div, or some other HTML structure to place directly into my target div. The internet has been running slow lately and I've noticed that the time between a button click (which kicks off these API calls) and the div populating is several seconds. Is there an easy way to globally wrap all the load calls so that a div containing "Loading..." is displayed before the call is even made and hidden once the API call is complete.
I can not simply put the code to hide the div into the callBackToBindClickEventsToNewDiv as some load events have different call backs. I would have to copy the code into each function which is ugly and defeats the purpose. I want the flow of any .load to go as follows:
1) dispplayLoadingDiv()
2) Execute API call
3) Hide loading div
4) do callback function.
The loading div must be hidden first as the callback contains some animations to bring the newly loaded div in nicely.
EDIT:
Expanding on jacktheripper's answer:
var ajaxFlag;
$(document).ajaxStart(function(){
ajaxFlag = true;
setTimeout(function (e) {
if(ajaxFlag) {
hideAllDivs();
enableDivs(['loading']);
}
}, 500);
}).ajaxStop(function(){
ajaxFlag = false;
var load = $("#loading");
load.css('visibility','hidden');
load.css('display','none');
load.data('isOn',false);
});
This way loading is only displayed if the page takes more than 500 MS to load. I found the loading flying in and out real fast made things kind of choppy for fast page loads.
Use the following jQuery:
$(document).ajaxStart(function(){
$('#loader').show();
}).ajaxStop(function(){
$('#loader').hide();
});
Where you have an element called #loader that contains what you want to show when an AJAX request is being performed. It could be a span with text, an image (eg a gif), or anything similar. The element should be initially set to display: none
You do not even need to call the function anywhere else.
Try this
$("#someButtonId").click(function(e){
e.preventDefault();
$("#theDivToPopulate").html("Loading...");
$.get("/some/api/call.php",function(data){
$("#theDivToPopulate").fadeOut(100,function(){
$("#theDivToPopulate").html(data).fadeIn(100,function(){
//Do your last call back after showing the content
});
});
});
});