Is there a way to autoload a new page when the user reaches the bottom of a page?
eg: a user is browsing a.php When the user scrolls down to the bottom of the page a.php, the new page, say b.php loads automatically without refreshing the page (the url in the address bar also changes to b.php)
eg this page: http://timesofindia.indiatimes.com/city/shimla/Uttarakhand-dissent-made-Congress-call-HP-meeting/articleshow/51679032.cms
When you scroll to the bottom of the article, the new article is loaded and also the url of page in the address bar changes to the new article's url
It is possible with PHP + jQuery + AJAX but it's not as easy as you might think if you need to care about SEO. Take a look at what Google says about SEO-friendly infinite-scrolling. Take a look at John Muller's demo. More about it in this SO topic.
Plugins that'll help you start:
jScroll
ScrollMagic
Infinite AJAX Scroll (paid)
jQuery Endless Scroll (abandoned)
Infinite Scroll (abandoned)
PS. Remember that Infinite Scrolling is NOT for every website!
Related
Is there a way to load whole new URL / page inside my site element so that you can interact with that page without refreshing my page? It's not a problem if it initially has to load with page refresh.
jQuery.load()?
jQuery.ajax()?
All I could find online was loading parts of your own site and there was no info about using that loaded page without refresing your own page. Example:
jQuery(document).ready(function() {
jQuery("#dynamic").load("single.php");
});
I've previously loaded new pages inside modal but I need it inside div or anything else without "overlay".
I think you are trying to inject content from another domain.
that means you want a part of your page load another domains content.
this page demonstrates the issue very clearly. take a look there and read the answers carefully.
I have a classic php controller that gets the page name from the url and displays that page under my header section where my slideshow lives.Every time a press a link the slideshow restarts from the fisrt photo again or its killed while sliding and image.I know that the cause of that is that everytime time a link is given to the browser all the page is beeing proccesed again .
I know a few ways to go arround the problem using Ajax but the only problem with that is that the url will not change because it will be Async..I want to keep my url so my visitors are able to share the links they want.
An example site is at http://sounds.beatport.com where you press a sample to play , it loads it at the top and then you can browse thru the styles drop down menu changing links but yet the sample keeps playing..
So what i want to achive is having a div with my slideshow plugin keep playing at the top of my site without restarting while the visitors browse thru the site;
My website is setup like: when the page loads, a jQuery animation -- in the template -- is played which, on completion, further makes an Ajax call to fetch the content of the page. Now, I want to deploy hashbang like http://com-address/#!page and I need to retain the animation at the page load as well. But I assume the problem with this setup is; when the web-crawler visits the page, it doesn't wait for the animation to complete and make the Ajax call. It requires the state of the page with the loaded content (which, in my case is acquired after the animation is completed).
Given the above scenario, which way is better:
Change the entire flow and load the page content preemptively and hide it
till the animation is played.
Only when the hash-bang or _escaped_fragment is found in the URL:
a. follow step 1.
b. load the page with the content without animation.
My assumption about the web-crawler is incorrect & let the
current flow as it is.
Any heads-up advice?
EDIT
#kdzwinel, thanks for the tip about text-browsers!
On the second thought, I'll go with the option 2(a) because when the crawler visits the resource with fragmented URL, it should get the full resultant content on the page. And if the user navigates directly to the fragmented URL, the user-experience with animation would be intact too (by removing the content on the dynamic content fragment between the page load and the animation starts).
Also for all the other scenarios, we would continue the old flow (animate then fetch via Ajax) because we don't want to refresh the page since the user is already visiting the website and trying to navigate smoothly/seamlessly using anchors with fragmented URL (binding their click events to begin animation).
Web crawlers don't execute javascript (webmaster guidelines -
If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.
), if you wan't your content indexed go with option #1. Load the content when page is opened and if browser supports javascript - hide the content and show the animation.
So, I have a HTML page with links to video files on my server. What I need is, when someone clicks on the video links, a script should start loading up the advert from Google Adsense.
And after 10 seconds, it should be automatically redirected to the video file.
How can I do this?
Thanks
I'm sure that goes against the crazy adsense TOS. Read them again before getting banned.
Isn't that illegal?
You need to change the link to the video with a simple text (in ) and add
the "onClick" attribute which will activate a JS function.
<div onClick="javascript:showAdvertAndRedirect('http://www.video.com/id/23233')">Click to see the video</div>
The js function will show the ad (by changing another div's innerHTML)
and will also run a timer of 10 seconds (actually a delay) , eventually will redirect
the visitor to the mentioned url.
I am working on an iframe based Facebook applicaton. I am able to use FB.Canvas.setAutoResize(); to let the iframe "stretch" the page so there's no scroll bar for the iframe. The page may be 2-3 page-length in height. I can scroll down the page using the windows scroll bar. The issue is when I am at the bottom of the page and I click a link inside the frame, the content in the frame loads but I am still at the bottom of the page. Is there a way to set it so that when the link inside the frame is clicked, the outer page will scroll back up to the top of the page so you can see the content of the frame at the top?
Mike
The best solution I've found is to make sure any links below the fold target '_top' and href 'apps.facebook.com/appname/?whatever'. In essense, you're reloading the FB chrome on every click.
This has the added benefit of sending new access_tokens more often.
UPDATE: Facebook announced today that this now works:
FB.Canvas.scrollTo(0,0);