When you search for images on the Bing search engine, the result is displayed like this:
http://www.bing.com/images/search?q=stack+overflow
Notice how you can keep scrolling and scrolling and there is not "normal" paging.
My question is: How do they do this? I can see there is some ajax/javascript events happening, but the code is not easy to read. I especially would like to know how they know when an "empty box" is inside the users view port.
After some searching and reading I found this very good site:
http://www.infinite-scroll.com/
It includes downloadable WordPress and jQuery -plugins and also explains pros/cons of using "Infinite scroll/autopagerize/unpaginate/endless pages"
Sample pseudo/jQuery code to load more data when user has scrolled all the way to the bottom:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
loadMoreRows();
}
});
Here's an article about that technology :
Eliminate paging results by using JavaScript (ala DZone) : Using Javascript, prototype and PHP.
This feature is often called "infinite scrolling". Searching for infinite scroll javascript turns up a number of articles/posts on how to do this. Some of the more interesting ones:
Implementing infinite scrolling with jQuery
infinite-scroll.com
Continuous scrolling pattern using JavaScript and ASP.NET
Today I found a jQuery plugin that does the same scroll as Bing/Live Search:
http://blog.yctin.com/archives/jquery-plugins-ajaxscroll/
It was designed to remove the need for Next/Previous buttons.
Related
Since its related to AJAX technology so I thought this is the best place to ask.
I am displaying 5 articles at a time to the user on my website and when he clicks 'Next' I load the next 5 articles using AJAX without loading the entire page.The result is that he always stays at the same page .
One of my friend told me that website ranking depends on number of page views and I think this obviously reduce my page views.
Should I not use AJAX then?
(This might be a stupid question but I seriously have no idea about ranking and SEO so please help)
By loading your content dynamically Google will not see the entire page. Only the part that is loaded. So, if Google rank is important for you it's better to not use an infinity loader.
Actually it is not a good idea to navigate page using AJAX. Consider a scenario,
display 5 articles first then by clicking Next button, next 5 items will load and so on... by using this the page will not become Search engine friendly.
in this case search engine can't locate your contents exactly and will crawl only initial contents.
but with some efforts you can make ajax navigation search engine friendly.. see example here.
Currently the scheme of loading content of page dynamically is not a good idea for SEO friendly web page but try considering other ajax page navigation schemes that might help the page to make dynamic as well as search engine friendly.
some suggested ajax navigation schemes are listed below,
http://nickjohnson.com/b/how-to-make-ajax-search-engine-friendly-seo
http://ajax.rswebanalytics.com/
http://www.symatix.co.uk/articles/ajax/search-engine-friendly-ajax-navigation
I'm looking for leads on how to implement a (search-)result browser without using paging. But more like how twitter/facebook do it.
At first only 10 or so results need to be displayed but when scrolling down, more results (if any) should be added asynchronously. I've found examples with a [more] button at the end but I would like the browser to automatically fetch more when the bottom of the pane is reached.
I'm having trouble finding the right examples. Probably because I don't know what keywords to google on...
Hope you can help me out in the right direction!
Kind regards,
Paul
I advise you read following article regarding this subject:
Infinite Scroll in ASP.NET MVC
There is also a sample application available here.
Refer to the Replace paging with jQuery and subsonic continuous scrolling method blog post.
Have a look at the following pages:
On Scroll down how to make ajax call and get the respone data
create-a-dynamic-scrolling-content-box-using-ajax
I believe that should help you!
I am creating a website with a rather lengthy medical questionnaire. The users/patients need to be able to hover or click on a medical term and see the definition.
What are ways to accomplish this in RoR? There are similar plugins for WordPress, but I haven't found any in Rails.
My idea is have a Term model, that has attributes "word" and a "definition". Then in my layouts, I have to somehow scan the page and output the definition.
There are multiple approaches. I use jquery-tooltip. I'm in the same boat, instead of medical forms in my case it's insurance forms.
I checked out a few different approaches. I really like the tooltip feature coming soon to jquery-ui 1.9. Until it's officially released, I'm using jquery-tooltip.
They both work the same, give an element a title:
<div id='q12', title='This is number 12'>
What is this?
</div>
Then
$('#q12').tooltip
If the only reason you ever give your elements a Title is to create a tooltip, then you can just use something like:
$("[title]").tooltip({ position: "center left", predelay:500 });
Then every element with a title defined will show your stylized tooltip when the element is hovered over.
Why not use Twitter's Bootstrap framework.
Modal
These can be customized with images and any other content that you need.
Tooltips
Mainly for small snippets of text.
Medical Term
Popovers
Can contain more information then tooltips, but not as versatile as a Modal.
You can find more information on using it in Rails 3.0/3.2 here.
I'm building a single page ad-free portfolio-type website using jquery Isotope. I would like to track how often each project (Isotope element - div with text and a slideshow in it) will be clicked to be able to compare project popularity. Can this be done with Google Analytics? Is that the best tool for that purpose or are there simpler/better/other ones? The provider provides a tool called Webalizer, but that does not allow me to hook up each project element. Google Analytics gives me only information regarding the entire site, not its parts. Thanks for any advice...
EDIT I'm reasonably good with jquery, maybe there's a simple programmatic solution?
This works, placed in the click function assigned to all items (in my case a click function assigned to a div inside the items); now, one can Google track which Isotope .item (e.g. project, image or slideshow, etc.) is more popular than others. Maybe this helps others...
var clicked = $(this).parent().data('item');
//console.log(clicked); to see if an item's data attribute gets read
_gaq.push(['_trackEvent', 'Item', 'Viewed', clicked, null, false]);
//_trackEvent(category (Event Name), action (Event Type), opt_label (Event Label), opt_value, opt_noninteraction) synopsis differs in google's guide and Google Analytics Tracking Code Debugger console output
I'm trying to find tutorials or code to allow users to customise their page, just like twitter ,wordpress and tumblr do.
Could someone tell me what technology their using?
i'm a .net developer, but maybe they're using jquery?
Any help would be great.
Thanks
You can use javascript to change style sheets and the DOM
Question is a bit broad. To change the page you simply need to manipulate the DOM or change the CSS associated with the page's elements. This can be done any number of ways. E.g. you could write out a new CSS class dynamically, you could add new elements to the DOM itself or you could modify the existing attributes of the page. e.g. to set the background of the page you can do something like:
(assuming JQuery)
$("body").css('background-image','url(path/to/image)');
Hope that helps,
-fs