Infinitescroll how much is limit on pages element - javascript

I would like to ask about infinitescrolling, example facebook news feed but also a normal wordpress blog which integrate infinitescrolling.
How much elements can support browser on 1 single page before crashing?
I mean, after many scrolling, the page have a lot of posts, I suppose can't show millions posts. How much post a browser can handle?
So if I want implement infinitescrolling, after severall loading, I should think to add a paging for load new page, instaed of appending.
thanks!!

Related

Missing elements (Facebook Like button) when using Ajax pagination

I'm trying to help a good friend out with his site. I did not make this site so I'm diving into the deep, I am also new with WP. He wants a new audio player and Ajax pagination.
So far I did everything manually. It's a rough start though. I just load the next page with Ajax and fetch a div from that page.
My problem is: all posts contain a Facebook Like button and a Tweet button at the bottom. Now when I load the next page of posts (the div), those buttons disappear. I guess it has to do with plugins that are being loaded when the page itself is loaded. It is also missing the number of comments. These are Facebook comments also. To be honest I have no idea how to fix this...
Edit: Ok, I'm pretty sure I somehow need to reload that plugin in the Javascript chain... is that possible?
You can check it out at
Is there a better way? Am I actually doing it right? Is there a plugin that makes this easier? Again, I did not make this site and it's my first time using WP. I have no idea where to find the page settings (which might contain the max posts per page etc.)
Thanks in advance, I hope I am clear, if not, please say.
What you need to do is refresh the Facebook plugins after loading dynamic content with Ajax. Here's a snippet of code I used on a project:
// Run this on your Ajax callback
try{
// This code reloads the Facebook plugins
FB.XFBML.parse();
}
catch(ex){
// Something went wrong
}
The code requires you to load the Facebook API (duh!).

What is the best practice to use JSP and Ajax to load data?

I am a front-end developer who knows little JSP. I am working on a project that is building a CMS. This particular part I need advice is for slideshow data. In the JSP I am loading each slide and then injecting data with ajax. However it seems to be loading slowly, especially slideshows with more than 100 slides. It is also breaking with a lot of slides/HTML structure seems to break.
Each slide's data is loading with it's own endpoint by taking it's ID. In addition, each slide has a edit button that calls the slide's endpoint again to load a form, which also seems to load a bit slow. I was seeking what the best way to go about including this data with ajax. I was thinking something like infinite scroll - specifically http://www.responsivewebmobile.com/app/webroot/rwm_infinite_scroll/. However, what is the best way of organizing this and loading the data? Any advice is greatly appreciated.
Use Single page scrolling.We can load only one page at that time by loading data from Ajax dynamically.
Refer this
http://pagescroller.com/
http://alvarotrigo.com/fullPage/
While clicking page up or page down or slider ,we can load the content of next page using Ajax with id

Using Lightbox for the whole web site

I was wondering if using Lightbox all over the site would be a smart idea.
We are developing an eCommerce site and the idea is to keep the user on the main page all the time and show all the content (Product Page, About us etc) in a Lightbox way.
I understand that in order to use Lightbox you'll need Prototype/JavaScript which are widely supported at most browsers, I'm also aware that Ligthbox on mobile is not really fun but we are going to create a mobile version anyhow, A few Qs:
Do you think Lightbox might be heavy somehow? will it reduce site performance?
Do you think there are going to be big compability issues?
Any other thoughts why that not such a good idea? Again, the main idea is to keep the user at the main page while he can browse 'less important'.
Thanks in advance.
I think it's not a good idea to use lightbox massively to show relevant content for many reason
Accessibility: you cannot rely only on javascript to access the information so you need to put much more effort to develop with progressive enhancement. How if I navigate products through the browser history?
SEO: have you thought how to make your products retrievable by search engines? To make dynamic content indexable you will need again more extra effort. Consider also the possibility of being penalized for hidden contents on the page.
Usability: How would you deal with multiple devices and screen resolution? What if you show the image product in a lightbox and then your customer ask to also show the zoom images in a lightbox too? Will you open nested lightbox?
Social Network : "like" and "+1" are common functions on almost every modern e-commerce: but these actions can be performed only on a single URL, so if your products are not associated to a specific url (1 to 1 relation) you won't be able to share a specific item.
So, It's better to avoid all these complications
Use instead lightbox for giving alerts, show modal window and tell the user about the result of some server operation (e.g. Login/logout messages, alert the end of stock for an item during checkout...) and, in general, everywhere it's better not to completely change or break the navigation flow (e.g. registration, checkout,...), but definitely avoid to organize the entire site in lightboxes.
If you are developing an e-commerce site, then its not a good idea to use lightbox style ajax for loading all pages, because then search engines will not be able to index your products and display to people on search results.
In the past, I've used Fancybox over Lightbox mainly because I found it to be more flexible for my needs.
I too have created a online store using Fancybox with embedded popups to give the user more information on a popup.
What I would say is that to ensure page performance is not hindered, do not render a Fancybox popup through a hidden div on the page. If the hidden div contains a lot of images and content, this will cause some overhead.
The way I've used Fancybox is by loading an external page as its content source:
$("#product-info").fancybox({
titleShow : false,
width: 500,
height: 600,
autoDimensions: false,
overlayOpacity: 0.6,
href: 'product-info.aspx?ID=9' // External page source
});
I think just use a Fancybox/lightbox with caution. Only add basic product content. Keep the detailed for the product page itself. This will help Google searches (as other people have commented).
I agree with all of F.Calderan's points except maybe the last. I think there is a common use case in the "Quick View" seen on many clothing sites that could work for you. It provides a similar experience to the one you describe while not replacing all the benefits of having multiple pages.
See Old Navy for an example.

Refresh Page Without Screen Going Blank?

I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?
Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.
You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/

How do I handle a large amount of user comments being displayed in a long list down a page using JQuery?

I'm wondering if doing this along in JQuery would be stable enough? or if it would need to be done in ruby/rails first?
Either way I don't want a butt load of messages being loaded when a user enters the page where they're displayed. What I want is limit results to a specific amount then either have the page load more results when a user scrolls down or have them click a "load more" button similar to how it's done on both facebook and googleplus.
Currently I have comments scrolling down my page for miles and would like to use jQuery to take control of this. I'm guessing since each comment is stored in a div / class I could use this as a way of recognising what a comment is.
Anyway trying to figure out the best way to approach this I'd really appreciate some advice and maybe links to some good tutorials on how to pull this off.
I agree with the Ohgodwhy's comment - use will_paginate in Rails.
However, I'd also look at how to do scroll-down pagination, rather than page number links, depending on your design. I like Ryan Bates's screencast on this topic: http://railscasts.com/episodes/174-pagination-with-ajax
He also has a video for doing it without will_paginate: http://railscasts.com/episodes/114-endless-page (the newer, revised version of this requires a subscription).

Categories

Resources