i need a jquery plugin where i want to load the module by default as HTML and upon clicking more link it should load the rest of the content via AJAX and then previous button should be enabled.
Currently when i google i can get lot of plugin which just load either via AJAX or Animation [by hidding the rest of the content]. But for performance issue i don't want to load all the content at one shot and then animation. So i want to load the 5 li's and upon clickiing "More" it should start loading the remaining content but it should also animation.
Could someone help me on this?
-- Bala
My advice to you would be to customize the jCarousel according to your needs. Specifically, when you render the page initially you can include the initial 5 elements of your carousel. Then, in the carousel's onchange event, once you reach the last slide you can use AJAX to pull in the additional images.
Depending on your needs, using jCarousel driven by a flat JavaScript array you could save some load time as the image URLs would be rendered in the original markup, but not downloaded by the browser until they are added to the visible portion of the carousel. No AJAX required. Here's a demo.
Related
I have a site with about 10 pages. On each page its the same layout and just the image changes. Is it possible (EG with HTML or AJAX) to animate the image change when you navigate to a new page?
I want the appearance to be as close to a normal jQuery slider as possible:
http://jquery.malsup.com/cycle2/demo/prevnext.php
I haven't used the Cycle 2 plugin as I need each page to have a separate URL. The Cycle 2 plug in does have bookmark-able slides but they use fragment identifiers for each 'page' which social media sharing widgets sometimes ignore. So mysite.com/#page3 is shared as mysite.com, meaning the first not third slide is linked to.
The social media sharing widgets also use meta data from the page which doesn't change per slide as its still the same page.
You can use CSS3 page transitions, remain on one page and just manipulate the URL as you need to. See for example: Change the URL in the browser without loading the new page using JavaScript
Here's a good answer to your question using HTML5 Transitions:
HTML 5 page transitions
Hope this helps!
The business web application that I need to build for our company will use an accordion menu (such as the jQuery UI accordion).
I would like to use link jQuery click events to the accordion menu and load the content dynamically with the ajax .load shorthand.
Currently I'm dealing with an internal conversation where someone mentions that Ajax is slower than a regular browser request.
Now my question is: is that true, taken into account that:
The loading time of the accordion-content should be faster (all scripts / css / accordion / header loaded only once at the beginning);
The Ajax request does not influence the performance of any server actions;
Should I really use a browser request - and will it really be faster?
It seems very un-intuitive, using an accordion to use it as a static element that is just displayed on every page refresh.
I built a prototype before, using Ajax Load to load div containers with html and javascript, and it loaded as fast as a normal browser request would.
As for an answer, an ajax request is indeed smaller than a regular request for a page.
You have a few options where you could - pre-fetch the data, store this in an array or object and load it onclick of the slider,
or simply use ajax, this however will create another request which, if you have alot of users could potentially slow down your website.
pre-loading data into your html in hidden divs, or via a js.php directly into an array / object would be the most efficient way depending on the size of the contents.
Do know that ajax loaded content is not indexed by search engines and will be less SEO friendly.
I'll admit that I'm pretty new web development (only been coding for about a year) and especially green when it comes to JS / jQuery.
A specific web page I've built loads different data based on hovering over certain categories: country clubs, resorts, hotels, etc. When I built the site on my local machine, the javascript function was super quick. However, on the live site, it has a long delay before the data swap happens.
The URL is: http://preferredparkingsolutions.com/client_list.html
Which links to a javascript function at: http://preferredparkingsolutions.com/scripts/clientHover.js
Which replaces the display div (#client_list) by pulling data from a text file.
Is there a better / faster way of doing this?
Yes, this could be optimised by loading the content in up-front and caching it. Currently you are doing a HTTP request each for each and every hover - even if the user has hovered over that element before, since the AJAX responses aren't being cached. Doing this would be your quickest win.
However, I can't see any case at all for having the content live externally. Is there any reason you're against having the content physically in the page and just using show/hide methods? There's various benefits to this - SEO, for one thing, since Google will find the content.
this is the external page you are loading http://preferredparkingsolutions.com/client_list.inc.html and the content looks little and looks like its a static page then why not just load every thing upfront and then just hide and show div's ? as Utkanos suggested you will aslo have a SEO benifit and also its HTTP request each for each and every hover. if you still want to load it externally lost load it once and cache it and use the cached version to hide and show divs.
I mean without requiring to refresh the whole page, Is it possible to load a part of html code through Ajax into the same division.
eg. If the user clicks on the PROFILE anchor (not having href) the anchor should generate request-object and load the content corresponding to PROFILE in the division below it??
Similarly if he clicks SETTINGS it should load settings details in the same division which was used to load the profile.
Yes you can do this. After you do the ajax call, once you get the response, you can bind it to the div. For this set some id to the div, do the document.getElementById('id').innerHTML = 'Your html response'.
Try exploring jQuery.
Hope this helps.
My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...
Solutions I didn't like and why;
Load only the content div with ajax: google won't see any content, meaning the site will never be found, or only the parts which are retrieved by ajax, which arent't full pages at all
show the transitional effect, then after that 'redirect' the user to the designated page (capture the click event of a elements): effect is pretty much the same as just linking to another page, eg. user will still see a page being reloaded
I thought of one possible solution:
When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.
At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.
My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?
Thanks for your thoughts on this!
Short answer: I would not recommend loading an entire page in this manner.
Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:
Support for the Back/Forward
button. You'll need a URI # scheme
to solve.
The Browser must parse
the entire page through AJAX.
This'll slow things down. E.g. if
you load a block of HTML into the
browser, then replace the DOM with
it, only then will any scripts, CSS
or images contained therein begin
downloading.
Memory - the
browser's not changing pages. Over
time (depending on the browser), I'd
expect the memory usage to increase.
Accessibility. Screen readers
will need to be notified whenever
the page content is updated. Might
not be a concern for you but worth
mentioning.
Caching. Browser
would not know which page to cache
(beyond the initial load).
Separation of concerns - your View
is essentially broken into
server-side pieces to render the
page's content along with the static
HTML for the page framework and
lastly the JS to combined the server
piece with the browser piece.
This'll make maintenance over time
problematic and complex.
Integration with other components -
you're already seeing problems with
Google Analytics. You may encounter
issues with other components related
to the timing of when the DOM is
constructed.
Whether it's worth it for the page transition effect is your call but I hope I've answered your question.
you can have AJAX and SEO: Google's proposal .
i think you can learn something from Gmail's design.
This may be a bit strange, but I have an idea for this.
Prepare your pages to load with an 'ifarme' GET parameter.
When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'
Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.
Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase
The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.
This is just a sketch of it, but I'm sure it can be made right.
EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.
Example script:
$.fn.initLinks = function() {
$("a",this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.post(href,"ajax=1",function(data) {
$("#content").html(data).initLinks();
// transition to normal phase ...
});
return false;
});
};
$(function() {
$("body").initLinks();
});
Google analytics can track javascript events as if they are pageviews- check here for implementation:
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en-GB&answer=55521