In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.
So first of all, I have put together a very simple layout for this example. Here's a screenshot and the HTML code we'll use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrapper">
<h1>ajax ... nettuts</h1>
<ul id="nav">
<li><a href="index.html">welcome</a></li>
<li><a href="about.html">about</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="terms.html">terms</a></li>
</ul>
<div id="content">
<h2>Welcome!</h2>
<p>Text</p>
</div>
<div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>
Step 1
First thing's first, go and download the latest stable release of jQuery and link to it in your document:
<script type="text/javascript" src="jQuery.js"></script>
One of the best things, in my opinion, about jQuery is it’s simplicity. We can achieve the functionality described above coupled with stunning effects in only a few lines of code.
First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded).
$(document).ready(function() {
// Stuff here
});
Step 2
So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page.
We want to target the links within the navigation menu and run a function when they are clicked:
$('#nav li a').click(function(){
// function here
});
Let's summarize what we want this function to do in event order:
- Remove current page content.
- Get new page content and append to content DIV.
We need to define what page to get the data from when a link is clicked on. All we have to do here is obtain the 'href' attribute of the clicked link and define that as the page to call the data from, plus we need to define whereabouts on the requested page to pull the data from - i.e. We don't want to pull ALL the data, just the data within the 'content' div, so:
var toLoad = $(this).attr('href')+' #content';
To illustrate what the above code does let's imagine the user clicks on the 'about' link which links to 'about.html' - in this situation this variable would be: 'about.html #content' - this is the variable which we'll request in the ajax call. First though, we need to create a nice effect for the current page content. Instead of making it just disappear we're going to use jQuery's 'hide' function like this:
$('#content').hide('fast',loadContent);
The above function 'hides' the #content div at a fast rate, and once that effect finished it then initiates the "loadContent" function (load the new content [via ajax]) - a function which we will define later (in step 4).
Step 3
Once the old content disappears with an awesome effect, we don't want to just leave the user wondering before the new content arrives (especially if they have a slow internet connection) so we'll create a little "loading" graphic so they know something is happening in the background:
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
Here is the CSS applied to the newly created #load div:
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
So, by default this 'load' span is set to display:none, but when the fadeIn function is initiated (in the code above) it will fade in to the top right hand corner of the site and show our animated GIF until it is faded out again.
Step 4
So far, when a user clicks on one of the links the following will happen:
- The current content disappears with a cool effect
- A loading message appears
Now, let's write that loadContent function which we called earlier:
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
The loadContent function calls the requested page, then, once that is done, calls the 'showNewContent' function:
function showNewContent() {
$('#content').show('normal',hideLoader);
}
This showNewContent function uses jQuery's show function (which is actually a very boring name for a very cool effect) to make the new (requested) content appear within the '#content' div. Once it has called the content it initiates the 'hideLoader' function:
function hideLoader() {
$('#load').fadeOut('normal');
}
We have to remember to "return false" at the end of our click function - this is so the browser does not navigate to the page
It should work perfectly now. You can see an example of it here: [LINK]
Here is the code so far:
$(document).ready(function() {
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Step 5
You could stop there but if you're concerned about usability (which you should be) it's important to do a little more work. The problem with our current solution is that it neglects the URL. What if a user wanted to link to one of the 'pages'? - There is no way for them to do it because the URL is always the same.
So, a better way to do this would be to use the 'hash' value in the URL to indicate what the user is viewing. So if the user is viewing the 'about' content then the URL could be: 'www.website.com/#about'. We only need to add one line of code to the 'click' function for the hash to be added to the URL whenever the user clicks on a navigation link:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
The code above basically changes the URL hash value to the value of the clicked link's 'href' attribute (minus the '.html' extension. So when a user clicks on the 'home' link (href=index.html) then the hash value will read '#index'.
Also, we want to make it possible for the user to type in the URL and get served the correct page. To do this we check the hash value when the page loads and change the content accordingly:
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
With this included here is all the javascript code required: (plus the jQuery library)
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Finished...
The great thing about this method is that's it's adaptable and can be applied to a site within minutes. It's fully unobtrusive and the website will work normally if the user has JS disabled.
View the Final Working Example
Download the HTML, JS, CSS & Images
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Mark Provan May 25th
Nice. Could really use this on my new project. Thanks alot.
( )Mark
Tuna May 25th
Awesome. Keep it coming, I love it.
( )Ben Griffiths May 25th
The final effect looks great, especially with such a small amount of code, thanks
( )Razvan May 25th
Excellent, thanks for the tut!
( )Fanou May 25th
Really nice effect ! Thx for the Tutorial !
But do you know how to do that with Mootools ?
( )Claudiu May 25th
great work! I love it!
( )Omkar May 25th
Wow thats brilliant!
( )ijajaja May 25th
Awesome!! Thanks for sharing !!!
( )Alvito Falcon May 25th
Nice. I can really use this on the next app i make …. will feature a link on my blog as well.
( )Robin May 25th
James,
Thanks much for the tutorial. Good example of the power of Jquery!
On another note… has anyone built something like this and ran it through Google Analytics to see if it tracks the clicks to the individual page sections? If it doesn’t work, could be a big issue with clients.
( )Robin May 25th
Sorry to double post,
@James
Is there a way to make this step back through the section transitions when hitting the browser’s back button?
( )Dmitri May 25th
Great, however browser’s back button functionality gets broken when you use such trick. I guess it would be very nice to provide the fix in following tutorials.
( )D. Carreira May 25th
Thanks! I was looking for something like this a month ago…
Great tutorial!
David Carreira
( )Castor June 29th
adsda
( )makalu May 25th
it’s amazing! really cool
( )Shaein May 25th
Great work! Looks very nice!
There’s just this little thing..
When switching to another page the content doesn’t seem to change. And I’m using Opera 9.50 beta. That could be the reason :P.
Version:
9.50 beta
Build
9945
It did work on Fx beta 3 and IE7 though.
( )James May 25th
Thank you for all the kind comments!
@Robin -
Very important issue raised. If this functionality was ever integrated into a real-life project you’d have to seriously consider the usability of the website. The tutorial allows bookmarking (with the hash vaues) but doesn’t cater for the BACK button.
There are various solutions available on the web although I didn’t think of it as necessary to include them in this tutorial seeing as it was more of an introduction…
If you’re interested then have a look here:
- http://dev2dev.bea.com/pub/a/2006/01/ajax-back-button.html
- http://www.isolani.co.uk/blog/javascript/FixingTheBackButtonThatAjaxBroke
As far as I can see, it seems to be about manipulating the browser history object.
And that’s a good question about Google Analytics, if they don’t yet offer it maybe it would be something for them to consider for the future.
@Fanou -
I’m sure it could be achieved with mooTools, - Have a look at the ajax class - http://docs.mootools.net/Remote/Ajax.js#Ajax
–
( )Medium May 25th
I once asked something like this to be made as a tutorial so thank you net tuts for this
@James
( )When i go and type #about or #portfolio it does not work. I tried in firefox 3 & IE 6.
It changes URL and content when i click on the nav buttons, but it does not load different content when i type the URL manualy. And this is a very big thing.
Peter Butler May 25th
Excellent tutorial and loads of help, thank you
( )Tony Mathew May 25th
Amazing effect, thanks for teaching us!
( )It will sure come useful when i finally decide to make a portfolio
Zé Miguel May 25th
Cool Tutorial! Tanx!
( )Can you tell me the font you used in the banner though? thanx
Patrick May 25th
The problem with this technique is that when you click on the back button of your Browser, nothing happens. Even though the effect looks great and is pretty cool, I do not see why one would implement this effect on a Website. But I have to admit, it looks cool.
( )Chris Coyier May 25th
Extremely nice, great work!
I did a site like this one, and it was suggested to me to use the jQuery History plugin, which restores the functionality of the “back” button in the browser which would be great for this tutorial.
( )mike May 25th
Interesting tutorial and a pretty cool effect but not very practical.
( )Using this you lose all your page titles, the ability to highlight the current page in the navigation menu, and, as Robin already pointed out, you may as well cancel your subscription to google analytics.
Having said that, it does give food for thought and with a lot of work suggests some interesting possibilities.
Peter May 25th
Overall a very nice effect, but I do perceive one flaw in this tutorial: the content should not “reappear” until the content of the new page is loaded. What happens when you click the link is that the previous page’s info reappears and then changes to the new content a second or so later. Is there a way to delay the content reappearing until it actually loads?
( )Shane May 25th
Interesting effect, but as a few people have pointed out, from a usability point of view, I don’t feel it’s best to theme an entire site around the effect.
That said, your tutorial is well written and is yet another example of jQuery in action. I’ve done similar stuff in the past, but have concentrated on smaller areas of content.
thanks
( )James May 25th
@Medium - That is because the page does not reload when you type a hash value in and the hash values are only checked upon page load. The hash values take effect when the page loads… So if you were to click this link it would take you to the #about page –> http://nettuts.s3.amazonaws.com/011_jQuerySite/sample/index.html#about
If you want to automatically and continually check the hash value you could add a timeout function to do that. (e.g. maybe check every 500 milisecs) - I have not tried this so I don’t know if it would work… Typing the hash value in seems to work in Safari3 - I havn’t tried any other browsers.
With little support available for Ajax apps across browsers you might feel uncomfortable using this solution for an entire site but it is still very useful for smaller widgets and inner content.
@mike - Changing the page title is possible and having active link styles on the nav menu is also possible. - I have not included them in this tutorial though because I didn’t want it to get too crowded
… The google analytics thing would be quite an issue and there are various other usability issues, but it still (like u said) is food for thought and hopefully this is a taster (no pun intended) of things to come in the future of the web.
@Shane - I think you’re right about it not being a perfect solution for an entire site. Like you pointed out, this effect is more suited to smaller areas of content.
( )Jaswinder Virdee May 25th
Cool, nice and simple site, if i were to use this i would have my different social profiles embedded in them or for simple data maybe to show off an app
( )Danny May 25th
This is really cool
( )Bruce Alrighty May 25th
Great tutorial.
I think the effect would better suited in a sidebar though, instead of the whole website.
( )shofr May 25th
I wonder how this would effect SEO. A spider would see each separate HTML file, which might not be ideal depending on the content.
( )Tony Mathew May 25th
When I add this script to a page as well as the ligthbox script they conflict and whichever script is first always seems to win.
( )Is there any way for this script to work in harmony with the lightbox script on the same page?
Louie May 25th
Wow I like this tutorial. Many thanks
( )Joefrey Mahusay May 25th
Great tut. Two thumbs up!
( )Snorri3D May 25th
nice tutorial
( )more AJAX related would be great
Andrew May 25th
Your tutorials on this and PSD Tuts are consistently awesome. Thanks!
( )x May 25th
Just pointing out some errors in the tutorial:
( )- The link is missing in Step 4 ( “It should work perfectly now. You can see an example of it here: [LINK]“)
- Code is not indented properly - the wrapper div in the first block, the big code blocks in step 4 and 5
- You should extract the file-name using regexp (or indexOf etc.) instead of just removing the last 5 chars:
href.replace(/(\..+?)?$/,”)
or
href.slice(0,href.indexOf(’.'))
.. What will happen if the href contains full path or links to a different domain (e.g. http://www.google.com/ )?
Adam May 25th
One of the BEST on this site so far! Great Stuff!
( )Eric Orr May 25th
Very cool effect.
( )Marko Novak May 26th
I don’t know if anyone mentioned this already, but with this method you disable browser back button. Which is in my opinion bad option. Other than that, it’s a very nice tutorial.
( )sinan May 26th
thank you.goog tutarial.
( )eod May 26th
cool, perfect for portfolio, thanks for sharing
( )James May 26th
THANKS FOR ALL THE COMMENTS!!!
I have had a go and using the jQuery history plugin (Thanks for the tip Chris Coyier!) I have made it possible to use the back button.
The new script (js.js) is actually shorter now, and you can get it here: http://www.qd-creative.co.uk/uploads/projects/ajaxtut/js.js
You need to download the history plugin for this to work: - http://www.mikage.to/jquery/jquery.history.js
So you should be linking to three scripts at the top of your document now:
I’ve tried this out on Firefox and Safari (seems to work very nicely) …
I haven’t updated the original tut files or the tutorial because it might just end up confusing people.
( )James May 26th
@Tony - Lightbox uses the prototype library which uses the same ($) function caller and so there is a “conflict” between jQuery and Prototype.
I’m sure there are other solutions available but this ( http://codingforums.com/showthread.php?t=120309 ) thread seems to offer some help. (POST#4 is probably what ur after)
( )jamal March 28th
dear james
( )how can i use this nice drob down ajax &query at any php mysql script.?
and i hope you help me to do that with my web site
i hope so
emichan April 1st
there’s also a jquery version of Lightbox which should eliminate this problem.
( )http://leandrovieira.com/projects/jquery/lightbox/
Ahmad Alfy May 26th
It looks cool!
but I’m worried about accessibility and seo stuff
I suggest it should be used within web apps … where users have to login to acess data
( )James May 26th
Just a note, I have created a fix to the various usability issues (like using the back button) - I have detailed the fix in a comment, but it is awaiting moderation… (because it has links in it I think)
( )Martin Sarsini May 26th
wow what a tutorial, very simple and effective to understand, I wish many people could explain things like you
( )and of course great effect, I like it also because it’s fully accessible. of course it’s a great thing for some kind of websites, or some areas of websites, very usable but it needs to be used in the right way and not just because it looks “cool”
linzprod May 26th
Hats off to you!
Nice tut. thanx a lot.
( )jd May 26th
Very nice tutorials! Many thanks!
( )BroOf May 26th
I love you
And i love JQuery :D! Thank you for posting this!
( )Miguel Pereira May 26th
This site is very good.
I have helped many times
MIGUEL PEREIRA
( )Tom May 26th
Great example, I’m glad to see that it works even with javascript disabled. Well done!
( )David May 26th
Nice, but two comments:
$(document).ready(function() {is not so clever to use unless you wrap it as a private function. Many other frameworks uses the $ sign and there will be conflicts. It’s much better and recommended to usejQuery(function($) {.Also, you break the important history features in the browser (back/forward buttons) by not bothering to take control of the browser history. It would be much cooler if you included history support (also good for bookmarking).
( )Evan May 26th
This is a very well done example. Things get far more complex when you content is more complex or could contain new content that needs javascript functionality but it is a good start.
The most recent beta versions of google analytics have added event tracking. I find they have come in very handy with pages of this style.
For example when a user clicks the about in the navigation element at the top you send an event out to google analytics to track that click on the about section. It tracks both unique and total events.You can do this around the same time you make the request for the new content. You still loose a bit of google analytics functionality but at least they now provide a better way to track this type of interaction.
( )Qw3rTy May 26th
I have a problem with this…
When I try to add other JS libraries they don’t work -.-’
sry for my english :X
( )JC May 26th
Very cool look, thanks
( )Nico May 27th
Slick! Thanks
( )Dennis Gaasbeek May 27th
Well written article, thanks James! Wow this site has learned me a lot, I visit it daily now eagerly awaiting new tutorials
I applied your fixes and now the back button works fine (verified in Firefox, IE6 and IE7). Only (minor) issue I have found is that when I download the example site I cannot link directly to the HTML files in my browser (e.g. portfolio.html) because it will just load the index.html file. Strange thing is, on the live example on this website it does work so I will look into it some more to see if you have applied some other fixes as well
( )JamesS May 27th
Building a whole site like this is not a good idea, but the technique certainly has its uses.
Putting the SEO, usability and accessibility drawbacks aside, you can get around the Google Analytics problem mentioned in a previous post by using separate virtual funnel paths for each link - just add something like this as an unobtrusive onclick event (the same as you would do for non-html documents/multimedia files):
var pageTracker = _gat._getTracker(”UA-12345-1″);
( )pageTracker._initData();
pageTracker._trackPageview(”/my/virtual/url”);
Christian Mejia May 27th
Yes! Real slick!
( )Lamin Barrow May 27th
Waaw.. that’s pretty cool. Thx for all your time and effort.
( )Zé Miguel May 27th
Just Noticed the WebSite doesn’t work in Opera =(
( )James May 27th
Thanks for the nice comments!!
@Ze Miguel - I think the script posted in comment-1498 works in opera. Let me know.
( )Link to comment: http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/#comment-1498
James May 28th
@JamesS - Thanks for the Google-Analaytics fix!!!
I don’t see this solution as an SEO issue like some of you have mentioned though - For example when Google crawls the site it will see each individual page (.e.g, about.html, index.html etc.). You could stick a Javascript redirect on all pages which redirect the user to the index page (if they have JS enabled) with the associated hash. So if they were on the about.html page they would be redirected to index.html#about …
The usability issue has been fixed with the history plugin for jQuery - see comment 1498 ….
With a bit of work I do think this could be an awesome solution for a small site! It’s better than using Flash in my opinion plus you get to use tonnes of animations…
( )aldomatic May 29th
Great stuff! - I will defenitley find use for this on future projects.
( )Robonoob May 29th
Neat!
However, it is not working on Opera. Same page always shows for all the button I clicked.
As for IE, the old content rolls down first and then the new content flashes out.
Anyway. This is a great tutorial.
( )Jason May 30th
James,
I have a quick question for you regarding your jquery syntax. I’m a real n00b so please don’t take offense. Why is it that for the .hide call (in the callback function) you don’t need the empty brackets? But for the .load call you need the empty brackets when calling the showNewContent callback function?
I can’t figure it out, thanks!
( )glo yniestra May 31st
It looks just great, soberb and elegant…..Thanks
( )Qbrushes May 31st
i need to try this out!
( )Jacob Gube June 1st
Anyone interested in using this but hate how asynchronous content-loading breaks the back button (since you’re really not navigating away from the URL when you load the content), check out this article that discusses this issue in brief and provides a solution:
“A Better Ajax Back Button Solution”
Basically, checking the url for the #hashValue at set intervals and load the appropriate content based on the URL value (if the content is not already loaded). It’s a psuedo-fix for the back button.
I’m not sure about how it’ll affect performance if you’re running this function every 0.5 seconds — I leave it up to you to check your web page performance with your favorite tool or method (I’d personally use Firebug to profile client-side processing times with and without the script).
Live demo can be found here.
( )Jacob Gube June 1st
@Qw3rTy - Might be a conflict with
$()shorthand notation. What other JS libraries are you using? Other libraries like Prototype JS uses$().Try doing something like:
var $j = jQuery.noConflict()then replacing all
$()’s with$j()’s.OR…
Just use the full name instead of the
( )$()shortcut - i.e.jQuery(selector).Will June 1st
This tut confuses me. I mean did you write that “js.js” script or did you find it on jQuery’s site? You never told us. I’m not a coder , but I’m trying to learn and “tutorials” like this don’t make it easy. Can any of you guys suggest some websites for someone who isn’t a coder to help them learn this stuff? It seems that a lot of the tuts here are assuming the everyone here knows how to code. hello? give us “lesser beginnings” some help please.
( )BrianH June 2nd
Is there anyway to get Flash to work with this? I tried to add a Flash content window to the main body of a test site using this technique, and when it gets linked to from one tab/button to another the Flash is treated as not even existing. ie the load effect doesn’t even drop down to accommodate for where Flash is.
( )jay June 3rd
How would I get this to work to open a php file? It’s fine using html documents but as soon as I try and load a php file, it doesn’t work…
( )Sean Vosler June 3rd
Help! Help!
Alrighty… so i think i’ve done everything correct! I may have the location of the #wrapper and the #content wrong, but It seems to make since to me where I have them… if anyone could help me I’d greatly appriciate it!
Its live at http://www.vezign.com/ {still under construction btw}
first one to solve gets a cookie!!
ps. the css file has the #load {
( )display: none;
position: absolute;
rightright: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
C June 3rd
Nice tutorial!
I have one question though. When I try this in Internet Explorer, when the animation loads a new page, the font changes to a weaker and less slick looking one…Does any one else have this problem? I’ve tried on multiple computers with multiple versions of IE, with no success. It works fine in Firefox though.
Thanks
( )John June 3rd
How can i make the nav bar extend to touch the content border? Thanks.
( )James June 3rd
@Sean Vosler - It seems you’re using them in the right place. I would suggest changing your script to the new (improved) one: http://www.qd-creative.co.uk/uploads/projects/ajaxtut/js.js - For this new script to work you’ll need to download the jQuery history plugin - available here: http://www.mikage.to/jquery/jquery.history.js and link to it in the HEAD of ur document…
@John - You’ll need to adjust the padding on “#wrapper”…
@Jay - Change this line:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
to THIS:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
Jay, I would suggest changing to the new script which solves various other issues.
@Jacob Gube - That setInterval solution won’t work… I originally tried something like that but for some reason it didn’t recognize that “window.hash” was changing. The best solution, I think, is to use one of the history scripts available. The jQuery history plugin seems sufficient: http://www.mikage.to/jquery/jquery_history.html
@Will - Check out Tizag.com … or Lynda.com …. or w3schools.com
( )Jan June 4th
It works fine for me, except in the Konqueror browser. The first page works, but then links look like this in Konqueror:
index.html##about
Notice the two “##”, there is one too much, and although the effects are working, the content will not be refreshed…
Maybe someone has a solution for this??
Thanks
Jan
( )John June 4th
Okay I made the nav bar extend to touch the content border. My new question is, How would you go about loading a php into this page?
( )Jan June 5th
Forget my last comment, it is a bug in konqueror
And i finally learned something: Ajax not for me
(Too unclean, too hackish imho, especially when using frameworks like jQuery… It is nice to play with, but not something i consider for a production site…)
( )Chad S June 5th
Hi all. I decided to experiment with using this technique for my personal homepage.
It looks like the #content div is preventing another jquery function from working properly: in my case, the fancybox lightbox.
Basically, if I put in a fancybox link outside of the #content div, the fancybox function works fine, but if I use it inside the #content div, it doesn’t work.
Any thoughts on how I can work around this?
To see what I mean, you can see it on my homepage, chadswaney.com
Any help would be appreciated@
( )Ben Tomas June 6th
I have the same problem as C…When I implemented this tutorial in Internet Explorer, when Ajax loaded the page, the text changed fonts to a weaker unspecified one. Even the demo here looks like that in Internet Explorer. Is there some solution to this? After all, these effects should be cross browser.
Thanks
( )James Baldwin June 7th
Excellent tutorial, and as said, impressive for the small amount of code.
Not sure how SEO friendly a system like this would be for a whole site, but I will definitely find a use for it on a smaller scale
Thanks again
( )brian June 8th
I’m modifying this template to fit my site; however, the fadeIn animation looks best against a dark background in IE6. Is this an IE6 specific bug, or is there a way to make it blend in with white backgrounds more smoothly? The loading animation also doesn’t play nice with IE6, so maybe it’s just specific to IE?
( )brian June 8th
Regarding the Cleartype bug in IE6, I was able to get around it by setting a background color for the and elements.
New request, however, is how to make hyperlinks within #content behave links links in the navbar. Thanks in advance!
( )Jason June 9th
James,
Just wanted to ask something that some of the other comments have touched upon and that is how to make content that has javascipt inside it load properly? In one of my ‘contents’ I want to have a Javascript gallery plugin. It works when I put it outside of the ‘content’ div but breaks when it goes inside it (where it’s supposed to be if I want the animation to work upon load).
I think the problem lies in the fact that the gallery app needs to called in the document ready part of jquery… any suggestions?
Thanks
( )emichan April 1st
I found a blog post here: http://www.waterfallweb.net/archives/2006/08/ahah-its-jquery/ that suggests that eventhandlers aren’t added to content loaded via the jquery .load function.
( )Brian June 10th
Love the script and tutorial James! Quick question, is it possible to make the transition a fade and y-axis scale only? Wanted to eliminate the x-axis scaling, just find what is controlling it.
Best and fantastic work!
( )Erich June 11th
change:
$(’#content’).hide(’fast’,loadContent);
to
$(’#content’).slideUp(’fast’,loadContent);
and then switch .show() with .slideDown().
( )James June 11th
The clearType problem in IE6 is apparently fixable by specfying a background color (I haven’t checked this though).
@Brian - The X-Axis animation is achieved by the “show()” function. You can create custom animations in jQuery using the “animate()” method. For example:
( )$('#content').animate({left:'+=200px'});- You can find more info on this here: docs.jquery.com/EffectsChris Coggan June 11th
Although i haven’t implemented it yet, this is looking very promising, even from an seo perspective. Will let you know how it pans out. Thanks for the fresh approach!
( )Brian June 11th
Awesome, thanks for the quick response and great work James!
( )Harry June 11th
Hey James- Appreciate the work you’ve put into this and answering the commenters. I have one snag. On my site here, http://stacytroke.com , I get a 400 bad request error when I click on the blog link in the navigation menu in my Firefox browser. all other links work fine except for the blog button. it’s supposed to take you to http://stacytroke.com/blog . Not to mention that it seems that the content starts to float further and further downwards as I continue to click on the nav menus. thouhts?
( )Brian June 12th
With Jason on this question… is it possible to call and run JS Lightbox or tooltips from the AJAX’d info loaded in the “content” div? I have the scripts for JS tooltips working on their individual pages, but as soon as they are loaded in the content div, it breaks. Thoughts anyone?
( )Kenny June 12th
I really like this idea and I’ve been trying to get it to work with an embedded flash movie, but it doesn’t take that from the source html page and put it in the main one. Should it work? Is there the capability for this to work and if so any hints (or better still solutions)
Kenny
( )David June 13th
Kenny,
I’m having the same problem. I can’t get it to load flash content correctly.
If anyone knows how to do this, I would appreciate the help as well.
Thanks!
( )David
Rohil June 15th
James…there is a big problem. There are is an extra div created each time a link is being created. I used this onone of my websites, and each time I load the same page, an extra div is created and since the div already has some padding, it is shifting more to the left since new padding is being applied. Use the Web Developer plugin to see the div order after every click and you will know.
This seems to be due to the .append staement used.
Please help.
( )Rohil
Rohil June 15th
Anyways, never mind. I bypassed the problem by removing the padding from #content and wrapping it in an external and div and then applying the appropriate styling. Thanks for the tut !!
( )zohaib June 15th
superb, fantastic
( )Patrick June 16th
[EDITOR'S NOTE: I have not checked Patrick's ZIP files, listed below. So publishing this comment is not an endorsement of these files. Use at your own risk.]
Drawing from suggestions in these comments, a friend of mine Andre and I repackaged a version of the final product of this tutorial to have the back button fixed, lightbox already included and working, and compatibility for php and wordpress. It can be downloaded at http://www.tigerofdoom.com/ajaxContent/ajaxContent.zip and http://andrebluehs.net/ajaxContent/ajaxContent.zip
It’s also live at both http://andrebluehs.net/ajaxContent/ and http://www.tigerofdoom.com/ajaxContent
Also, we had no trouble loading flash in the content div, though that’s not shown in our repack.
( )Rohil June 16th
I second Peter.
“Overall a very nice effect, but I do perceive one flaw in this tutorial: the content should not “reappear” until the content of the new page is loaded. What happens when you click the link is that the previous page’s info reappears and then changes to the new content a second or so later. Is there a way to delay the content reappearing until it actually loads?”
I have tried to remove this problem but not successful yet. Instead of hiding and showing contents, i am using fadeTo effect. But same problem.
Rohil
( )James June 16th
@Rohil - See my updated script
: http://www.qd-creative.co.uk/uploads/projects/ajaxtut/js.js
( )Rohil June 18th
hey James,
Although I had customized the script a lot, your new updated script is even better ! and got customized so easily as well. Kudos to you !
Btw, I had to make the website for the technical fest of our college, and I decided to use the technique shown here for the entire website since wanted to do something new. And see how things come out. Entire website is Ajaxified thanks to tutorial here by James and it works great when Javascript is turned off as well.
http://www.inno.co.in
Btw, jQuery is behaving very rough in Firefox 3. Not smooth at all. Any reasons ?
Thanks
( )Rohil
Raj June 19th
Thanx James for a nice tutorial
( )jellybean June 19th
Just curious how would one remove the sliding up effect and just a have a fade effect? I am a newbie and I can’t seem to find where the slide effect to remove it.
( )jellybean June 19th
oops disregard the comment above I spoke too soon. Great tutorial by the way I just found this site and I love it!
( )Benjamin David June 21st
Great tutorial, I’d love doing something similar with Mootools.
I made a script called Smooth Navigation. It auto creates a navigation panel through all your H1. You can customize it to offer smooth scroll between your anchors on your pages with a nice auto generated menu. Hope you’ll like it :
http://webdesignerthings.com/demos/smooth-navigation/
( )Robson June 23rd
This is a brilliant tutorial, and your doing an amazing job…
I would love some advice or an explanation on how to do active link styling!
Anyone any ideas??
( )James June 24th
@Robson - The best solution is normally to add a class of “active” to the active link and then write the styles in ur css…
( )Robson June 24th
yep, that’ll work, I just need to now write the jquery code to then change the class on click… i guess… any advice?
Also, another small issue I came across, and this I don’t think is to do with the tutorial…. but safari doesn’t honor and css that is applied directly to a div firefox does, as does opera, and even IE6, but any css in the content areas that is wirtten in CSs here is not seen by safari, on is seen… which is annoying, and one got or know of a fix…
Cheers!!
( )James June 25th
@Robson - Are you using my updated script? –> http://www.qd-creative.co.uk/uploads/projects/ajaxtut/js.js
( )Robson June 27th
Yep, using the updated script, only inline CSS ihonored by safari… embedded and external sheets are not loaded whn you reload the content… even thought the embedded css and the external css links are in the content area, and should therefore be being loaded.
And ever major browser but safari is honoring embedded css in the content area… I don’t think any were loading externals, but all honor inline styles… and I need to use embedded styles.
This is probably a browser bug, but Im really hoping that there is a fix!
Also still looking at the current item thing is anyone has an example of it done well!!
Cheers!!
(For the tutorial, and the follow up!!)
Robbie
( )Matt June 29th
This is an excellent tutorial, James. When tested online I find that sometimes there will a flash of the old content as the new content is being shown. Has anybody else noted this?
Thanks
Matt
( )Matt June 29th
Whoops! I missed a lot of the entries above, sorry. Thanks for the great script.
Matt
( )mike July 1st
this is great i love this but how would it be possible to use internal links. you know links that are inside the content area. and still have the same effect.
( )James July 5th
@Mike - You’d have to re-bind the click function on the callback of the effect to all anchors. ($(’a'))
( )mike July 5th
so i changed these
var href = $(’a').each(function(){
$(’a').click(function(){
after i did the animation still didn’t work.
also what would i have to change to make it so that i can call pages within a folder but still only have the page name ex: the about page would be in a folder called pages and i have to call it like this #pages/about.html but would like it like this #about.html
( )Cristian July 6th
Very nice tutorial,but there is one problem. After you click on a link and it loads a page you then have two div-tags with #content. Everything else works fine, except that i have two #content after loading a page.
( )dlv July 8th
Oh god, thanks!
I spend hour searching resources like this..i’ll try it right now !!! and launch later
Thanks…
( )a fan PSDtuts user who is starting to be nettuts fan too…
adeux!
Colin July 10th
Amazing tutorial man im using it in my current project, but im still a bit of a beginner, so i wanted to know how i would be able to load content to the website from a basic link on the content itself, both on text and images because i have used Fireworks HTML images with hotspots and i cant get the link in a new page =( please help me
super-sharp-shooter@hotmail.com
( )Colin July 10th
Okay ive solved my last problem but now i have another one. I want to be able to load content from links within the content itself. Ive managed to get the new content to load but then on the next page when the same link is clicked the content isnt loaded in the same window like it should do.
This is because the javascript only applys to elements in the original window and not the new content.
So my question is how can i make the javascript code work on the new content im loading rather than just page i started from?
( )Steve June 18th
I have Same problem, but dont know how to fix it
( )Please dot know someone how on it ?
JTR July 16th
Awesome! i already know a project where i can use this! thanks alot!
( )Robson July 16th
AnyOne gotten anywhere with styling the active link and having it change on click??? I’m trying with .addclass and .removeclass, but I’m not getting too far.
( )Robson July 16th
I got it, don’t worry!! Its pretty easy actually.
I tried to post the Jquery here, but wordpress is stripping most of the code out so it makes no sense… essentially you just combine .removeclass and .addclass to switch the class with an onclick event
Awesome tutorial and an awesome resource
Cheers
( )Reader July 22nd
Hi
Fantastic Tutorial, thank you.
But the same question as mike: Howto make hiligthing menu or different titles? Im not the best in html/css/js can u give me some expamples? :>
Thanks, Your Reader
( )Jared July 27th
@ James - Trying to get the animation to work when clicking on a link from within the #content div. I changed to
$(’a’).click(function(){
this DOES do the ajax thing but DOES not trigger the animations…as mike mentioned above - there was no answer, I assume Mike figured it out, but I haven’t been able to yet.. Any ideas?
Thanks in advance..
( )Jared July 27th
correction - the click function is not being called at all from interior content links… like the tag isn’t being recognized as part of the DOM since it was loaded via ajax. I’m no expert though so some of you will no doubt have the answer.
( )Ronny Jander July 28th
Its a great thing you did there! We are using it on our orphanage site (http://www.careforkidsfarm.com) and it works well, except for google translate, so I removed this function. If there is a way that it could work together,…perfect!
( )Thanks, very much!!
Chris July 28th
I put a vdeo player on the main page…when I navigate away from it and go back to the main page the video player isn’t there anymore. Any ideas on how to fix this?
( )Sarah August 10th
Just what I was looking for.
I have a bit of a problem customising it for the website I’m working on.
Can anyone point me to the right direction? James?
The website is: http://www.hyponetwork.de/index.php?id=wichtige-fragen#index.php?i
I suspect it has to do with:
…
if(hash) {
$(”#content-wrapper”).load(hash + “.html #content”,”,function(){
…
… else {
$(”#content-wrapper”).load(”index.html #content”); //default
}
…
I’m new to everything around javascript so excuse the ignorance
( )Can someone please help?
Thanks
Ben Griffin August 18th
Thanks for the tutorial - very well written and useful!
I have the functionality working perfectly as described, but I’m struggling with the next stage of my design. I think this relates to some of the above posts about making javascript work within the loaded content area…
I have a navigation panel on the left, with the various links loading content into the ‘content-wrapper’ div. However, within some of this content, I want to include a further level of navigation - i.e. links within the content div. I want these links to work in exactly the same way as the main navigation (i.e. changing the content, with animated transitions).
Is this possible? Since the jQuery library is loaded as part of the main page, not the ‘content’ section, I’m not sure how to proceed.
Anyone figured this out?
Thanks.
( )Ivan August 19th
Really Very Coll, Congratulations, only one more missing something for be perfect, the internal pages of css and includes accept. Js. someone has any solution to this problem because no script in Ajax or link css not run if they are not placed in the home.
if someone sober put the solution here please Thank you.
excuse my errors of translation into English
( )Ivan August 20th
Hello to All I was searching and found the solution to accept. Js in the pages included with Ajax using the function document.body.appendChild (objScript)
There is thus a function that reads the content of the document loaded looking for a js to the inclusion in the document this link -> http://forum.ievolutionweb.com/index.php?showtopic=1508
My problem is here …
Var text = ajax1.responseText;
extraiScript (text);
In this script I do not know what changes would be needed and where is the content to send to the variable text and make the atravez include the function.
Please if anyone knows the solution to solve this problem write here to further improve the script by James.
( )Ben Griffin August 21st
Following my post above, I have found a way to make internal links work using a handy plug-in called “liveQuery”, which you can find here: http://docs.jquery.com/Plugins/livequery
Any jQuery code that you write for your webpage will (by default) only be applied to elements of the page which are present when it first loads. Any stuff that is added to the page later (in this case, html code loaded into the “content wrapper”) will not inherit the functionality defined in your jQuery code. At least, that’s my basic understanding of the problem.
I don’t pretend to know exactly how the liveQuery plug-in works, but it seems to automatically “rebind” the jQuery code, so that the jQuery sees (and applies to) new content as well as the original page.
It certainly fixed my problem, and so far I’ve successfully tested my site on e6, ie7, firefox and safari.
There’s one other thing that might confuse beginners (it certainly had me scratching my head for a while!); Once you’ve referenced the plug-in in the head of your webpage, you must then modify the jQuery code for those event handlers that you want to apply to new content.
Say you want to trigger a function when a link is clicked, you’d normally write this:
$(”a”).click(function(){
…something…
});
Now, to apply this behavior to links within the dynamic content area, you must change the code to:
$(”a”).livequery(’click’,function(){
…something…
});
To me, that syntax looked a bit odd at first - why does the ‘click’ move inside the bracket? Then I discovered that the “normal” code in the first example above is actually common shorthand. It could equally be written as:
$(”a”).bind(’click’,function(){
…something…
});
And then it becomes clear that, to implement the magic livequery code, all you do is swap .bind for .livequery. You could probably view livequery as a kind of “smart bind”.
Of course, if you already write your code the long way (using bind), the syntax won’t confuse you like it did me.
I hope the above is of some help, and i apologise if i’ve made mistakes with terminology etc. - I’m still learning this stuff!
( )Ben Griffin August 21st
And for my next trick…
Has anyone figured out how to have 2 seperate “content boxes” on the page?
I want certain links to change the content in one box, and other links to change the content in the other box.
Hmmm…
( )Catsoup August 22nd
THX !!
( )Love this one…
Reader August 26th
Hi. Ben, thanks. but it wont work for me
this i insertet in my js file:
…
$(’#nav li a’).livequery(’click’,function(){
var hash = $(this).attr(’href’);
hash = hash.replace(/^.*#/, ”);
hash = hash.substr(0,hash.length-5);
$(’#content-wrapper’).hide(’fast’,function(){$.historyLoad(hash)});
$(’#load’).remove();
$(’#wrapper’).append(’LOADING…’);
$(’#load’).fadeIn(’normal’);
return false;
});
…
and this in my index.html
But it wont work
he load the other page complete but without animating 
( )Any idea? Thanks
James August 27th
Great Tut!
Is there anyway of using this effect to load the style sheet as well as the #content of other html pages?? (e.g. to fade in a different css background-colour for the ).
Can the main page inherit the css styles from the content being loaded? And thus fade in the styles from that content to the main page.
See where I’m going with this
??
( )Charles Scott August 27th
Great initiative by James but (Patrick comm #2856), (Andre and Patrick): They’ve got it right! all the way. Thanks a million!
( )Got one question: Is it possible to make the logo in the wrapper to respond to “href” in other words to be able to click and go somewhere else? I’ve tried to put the link in the .js but it didn’t work. Completely new to jQuery and JS and css.
I have tried Patrick’s and Andre solution and was amazing! everything worked, from the Go!
Janne September 2nd
James, what a fantastic tutorial this is. I have seen so many online and this may actually be the very first one that is usable for me. With the added backbutton feature you posted in the comments, and the Google Analytics solution, this may be the best solution for my current project. Thanks so much!
( )Windows Themes September 4th
Great tutorial, nice effect with some small amount of code. Definitely I will use this on my projects. Thanks
( )bob September 7th
Excellent tutorial, I was done with the similar effect of this item! Very grateful!
( )erno September 11th
Thank you. Excelent! I take it with me here:
http://teimagino.com/como-cargar-contenido-html-dinamicamente/
( )Anwar Vazquez September 11th
Nice effect, very useful. Thanks a lot.
( )Dannster September 16th
Hi guys the website is down with the latest code has anyone got a link to the new js.js file please?
Cheers
Dannst
( )Martin September 23rd
I’m having trouble with turning off the animations. What changes should I make to turn them off/set to zero?
( )Brad September 26th
Your updated script links are dead. Please update us with some new links. People are still very interested.
( )James October 2nd
For those of you want the updated script/’s please remove the “www” from the links. i.e. http://qd-creative.co.uk/uploads/projects/ajaxtut/js.js
( )Justin October 6th
Hi James, Why is it that:
Once I load the ajax page my other jquery functions don’t work?
( )They work if I go straight to the page, but not if the page loads via ajax. Please help. Thanks
angelnyo October 17th
Great, thanks.
( )Rodney October 19th
Simply brilliant. Very impressive.
( )mark377 October 20th
Hi
Just tried to implement your latest script on my machine and it’s working great in firefox 2, but not IE7 for some reason.
I am loading menu buttons via PHP/mysql into the page when a user clicks a button. When the page initially loads in IE7, you can see the menu appear very quickly, then disappear. From that point onward none of the links work either.
Has anyone seen any problems like this before?
Would appreciate any help, thanks.
( )Kieran October 20th
Hi James,
First of all thank you for such a great script and tutorial, it’s been immensely helpful. I was wondering if you had a second, you could help me with an issue I’m having with it. You can view the script in action here: http://www.kieranevans.com/portfolio.html
For some reason the content is not showing up at all in Firefox 2. I’m completely stumped! Has anyone experienced this before?
Also, in safari it seems like the loader fades out before the content is completely loaded.
I’m using the latest version of your script. Any help would be appreciated, thanks!
( )Kieran October 21st
I guess the biggest problem I’ve discovered with this is that images aren’t preloaded. So if you have an image(s) over 20k. Once the page loads with your nice animation, you still might have to wait for an image load after that.
( )mark377 October 21st
OK, disregard that last comment, seems it was just a css issue. On another note though, does anyone know how to change the script so that you could load content into 2 div’s at the same time?
Also, has anyone looked into the preload issue that Kieran mentioned? It just seems like a shame do do all those nice transitions when images aren’t loading properly…
( )James October 24th
@Justin,
Elements dynamically added to the DOM ( such as those from an Ajax request ) will need to have their events re-assigned. Think about it, when the page loads all your events have functions assigned to them but the new elements that are added then-onwards don’t have anything assigned to their events. You either need to assign them their events on callback (syntax:
$('elem').load(url,callback)) or you could used a plugin which keeps track of events and re-assigns as necessary on added elements: “LiveQuery” - http://brandonaaron.net/docs/livequery/@angelnyo, @Rodney, Thanks!
@Kieren, The *latest script should fix the image problem.
********************************************
LATEST SCRIPT: http://qd9.co.uk/nt/jquery/ajaxtut/js.js
LATEST DEMO: http://qd9.co.uk/nt/jquery/ajaxtut/
You need the jQuery history plugin to make the latest version work: http://www.mikage.to/jquery/jquery_history.html
********************************************
( )tammyG October 25th
Hi James,
Thanks for the tutorial, this helps a ton, but like the rest of us, I have a request.
‘I’m trying to not have the sliding up and down animation and would rather have the current content fade out and the new content fade in.
Could you be so kind and show me how this can be done?
( )Dave October 25th
Tammy, download Jame’s latest js file and replace slideUp with fadeOut and slideDown with fadeIn. That worked for me.
( )Global October 26th
Awesome Tut - found one bug though - you cannot add javascript inside the div container. I tried to add a javascript image slideshow and that didn’t work, i also tried embedding a flash swf file but even that uses javascript so embed it in the page….
( )James October 26th
@Global - yes that is an issue… There are various ways to overcome it though. I’m not sure of the actual code you’re using but normally re-initiating the JavaScript from the initial (homepage) page works quite well, although this may be out of scope for your flash content.
It’s more of a general problem with Ajax pagination than with this specific tutorial.
( )Justin October 27th
So how do we overcome this javascript problem? I’m also stuck in the same situation as global…
( )James November 1st
@Justin/Global - Email me links (via my website) to the pages which are giving you trouble. There should be some type of initiating line of code, - It’s probably best to just include the script on the homepage and then initiate when calling that specific page.
( )Pawel November 1st
Hi,
( )Great work, looks pretty cool. There is one thing - .hide and .show events are behaving like .slideUp/.slideDown. I wonder if it is possible to make them just ‘dissapear’ immediately. Thanks
Aaron November 2nd
Yeah!, this is very cool and I agree a small site would be perfect for this.
( )Very cool thanks,
Pawel November 2nd
Global, Justin:
You need to “re-search” whole DOM tree. Just reinitiate selectors you need.
Example for thickbox:
tb_init(’a.thickbox, area.thickbox, input.thickbox’);
It’s also good to add some timeout (to be sure that everything is loaded)
setTimeout(”tb_init(’a.thickbox, area.thickbox, input.thickbox’)”, 500);
( )setTimeout(”tb_init(’a.thickbox, area.thickbox, input.thickbox’)”, 2000);
Salutis November 3rd
This is cool. Thanks!
( )mike November 6th
Hey man, love this effect.
Just one quick question….
This site is for testing right now..but check out this page:
http://www.bootycampfitness.net/about/
Then click on the first “floating head” at the top left.
The new content is loading, but it’s putting in a space at the top of the conten after it’s loaded.
Any idea why??
( )Thanks
b November 9th
wow no diggs? Best tut on here ive seen…
( )Bno November 9th
why there might be problems using firefox 2.
if you load a page called mycontent.html but only want to get a part of it and use the id to specify it like this:
$(’#content’).load(’mycontent.html #content’,”,showNewContent());
pseudocode: targetid.load(site sourceid,,callback);
you will NOT replace the old ids content with the new content but inject it. you end up having twice the same id in your document. firefox 2 seems to be a bit more fanatic about how unique ids have to be than other browsers.
solution is easy, just dont to use same id for target and source.
$(’#content’).load(’mycontent.html #source,”,showNewContent());
( )sam November 9th
Hi there, great looking effect! just to let you know, the new version is not working so well in IE6 and OPERA. also, sometimes it displays this in the content area:
div id=”___content-wrapper
( )Kieran November 10th
Hi James, Thanks for getting back to me! Just wanted to give you a heads up, looks like there’s something wrong with the new script. The latest demo link you sent out isn’t working in Firefox/Safari.
( )Vincent D'Amico November 11th
Great Tutorial, I was wondering is there anyway to change the a:active state? It seems whenever i modify it gets reset no matter what I have tried.
( )David November 14th
I have the same problem as Kieran. Shouldn’t the images load before fadeIn happens?
( )will haven November 18th
@Bno
Or you can just use:
$(’#content’).load(’mycontent.html #content >,”,showNewContent());
( )Totti November 19th
Nice Tutorial.
I have the same problem as Global and Justin. Javascript inside the div box doesn’t work.
I want to use Dan Harpers Tabbed Interface in the div box, so i need to know, how to load it after loading the new content.
I’m completely new in Javascript, so please explain your answer a bit.
Thanks
( )Totti November 19th
Sorry for Double Post but it isn’t possible to edit a comment.
I’ve got it so hat the Event will be added after the new content is loaded into the div box.
Now the Problem is that the first time i load the page it does not work, but when i click on the link in the navigation which adds the “#index” to the URL, it works… the event never loads when the document is ready, but it loads when changing the content of the div box.
Thanks in advance
( )will haven November 20th
do get javascript working in the loaded content, you’ll need to call the functions in the callback of the load - just as you do with showNewContent()
( )Leo Machado November 21st
Hi James!
Can you tell me how i have this dalay on my page??
http://www.flamesistemas.com.br/adaptados/conteudo_animado
I Change the page, and some pages take a 0,5s to change…
Tks
( )Theo November 22nd
Hi James, i really like your tutorial, and i need help because i have a serious problem. I explain. No problem to load an html file in a div, but when i want to scroll my new page (wich scroll in the original file) inside thisnew div, it doen’t works. I found the reason. If i look the code source, the new one is not inside. This is the same on your demo page (http://nettuts.s3.amazonaws.com/011_jQuerySite/sample/index.html). You can see, when you change of page, your code source doen’t change, so it’s impossible to have clicks and controls in th new div. Thanks for your help
( )MissANN November 24th
aWesome!! :)xx
( )Jonathan Solichin November 30th
Awesome script! I know this is a pretty old tutorial but it would be great if some one can help me. I’ve been trying to implement this on my site. It works fine and great but when i tried to set a “_GET variable”, the loaded content won’t read the “_GET variable” in Opera. It works fine in any other browser. Is there some strange quirk in opera that’s stopping this from working?
Ps. Yes I deleted the substring function so the URL reads correctly
( )Pps. This script doesn’t work in IE yes? it degrades nicely to regular old page loading?
Gray December 3rd
I’d like to echo the previous post, can we get this to work with GET and POST data?
( )Santiago December 3rd
Hi this is great! ;o)
..but i’m having some problems loading swf’s.
For example index page has a swf, when i load another page content, and then return to the index, the swf is not showing…
it works only if i took of thw wmode=”transaprent” but i need it!
Well, hope you can help with this..
Cheers!
SAntiago.
( )zulfadhli December 4th
nice tutorial.. i already put it inside my site which i am developing right now… nice work and thanks
( )Luan Damasceno December 4th
Hello, everyone!
Finally found a script in jquery with the aim of this tutorial.
I’m already using an updated version of plugin, but users of my site (there is a radio, use this script for the radio not to stop and prevent the use of frames) complain that they can not open links in new windows.
When the link is set to open in new window (with the right mouse button) the new window is automatically redirected to the index.html and not for the desired link.
I can solve the problem, but the functions of back button on browser no longer functioning (I’m using the script correctly jquery.history).
Thus: or have only the functions of the browser worked perfectly, or have only the function to open in new windows or tabs.
Can anyone help me?
Thank intensely to who can help me (really need them urgently).
ps: I’m Brazilian, don’t speak/write English fluently. Sorry if the message is confusing.
( )PhillyBX December 10th
can you put multiple ones of these on a page.. and how? I am assuming the js.js file would do it.
( )MissANN December 12th
i have a tiny problem.. the .gif image loader have a problem when viewed with IE7
T___T
( )aziz December 15th
nice ajax…
( )ali December 18th
tnx!
( )nice code..
ali December 18th
tnx,
( )Nice Ajax code!
John Benson December 26th
I love this tutorial you went from concept to application in an easy to understand format Kudos
My problem is this I am new to Jquery and DOM programing I don’t know how to bind functions to newly loaded elements I looked at a few livequery and bind discussions but nothing that really told me how to do this
for instance if I was to load a page that had this code
News/Informational
BLOOMBERG TELEVISION
and wanted to animate by hiding part of it first with
$(document).ready(function(){
$(”div.a1″).hide()
and then when the first div is clicked animate first div and show and animate second set of div’s with
$(”div#block1″).click(function(){
$(”#block1″)
.animate( { width:”450px” }, { queue:false, duration:500 } )
.animate( { fontSize:”24px” }, 700 )
$(”div.a1″).hide().animate( { width:”450px” }, { queue:false, duration:600 } )
my question is how do I bind the above snip’s of code and
where should I place the code to be called would it be in the original page in the loaded page or brought in with a load function which Id like to know how to use anyway but …
Any help Would be appreciated Thanks
( )John Benson December 26th
sorry I dont know how to post code …
but it was with out the “less than” arrow…
div id=”block2″>News/Informational /div>
( )div class=”a2″>BLOOMBERG /div>
div class=”a2″>C-SPAN /div>
Jono Alderson December 29th
Superb tutorial, though it seems I’m having a problem with the latest version, where the first click on a link changes the url to /pageclicked.html, though doesn’t change the comment. Any ideas?
( )Jono Alderson December 31st
Hmm. Worked around that - has anybody got a solution to allow links within the content div to still function properly?
( )Design Kasten December 31st
Great Tutorial,
I’m working it out now in combination wit JSON, zo the request can be used for the use of my new e-commerce site. I hope to post a tutorial on this subject soon.
Greetz,
From the Netherlands
( )Marcos López December 31st
Very nice and well explained tutorial! Thanks!
( )Jono Alderson January 2nd
Ahh! This is driving me mad!
I’m *so* close to having this work perfectly…
I’m using the latest version, and it works wonderfully in Firefox. I’ve adapted it to account for rewritten urls (no .php extension) and I’m using Live Query to allow me to open links from within the #content div. All this works fine.
For IE (any version), Safari and Opera, nothing works.
When a link is clicked, the Load div activates (and my little loading gif fades in) …. and then nothing. The URL doesn’t change, the page content doesn’t load.
I’m so, so close to this being absolutely nailed down - any help would be appreciated!
The current build can be found at:
http://www.simplystep.co.uk/clients/km/
Thanks!
( )Buzzlair January 4th
Nice. most of people discussed about the programming side of this. Lemme shift a bit to design side of it.
Whats the icon pack used in this tutorial?
Whats kind of font used?
Thanks, ya! Its a great tutorial for beginner like me.
( )Granner January 4th
At first I must sad that it is a really great tutorial that I find not often.
I try myself to work the script on my site. Local it is no problem all works fine, but when I load it up nothing works.
I try everything. Check the links… but nothing works.
Here is my site (it is still in work don’t wonder) http://home.arcor.de/granner/granner/
If you have any idea please contact me under granner@arcor.de
PS: My English is not the best (I’m from Germany), hope u understand all.
Sincerely yours,
( )Granner
Janis January 4th
Hi.
I got to say that I think this is a great tutorial and that I really want to use this technique on my page.
I am having a few issues though.
1. Some of the pages I load contains some javascript( embedded video) and all the html shows up just fine, but the javascript don’t. I am a beginner at javascript and jQuery and would really like to know how I can get this to work.
2. When using IE7 some of the pages i load in wont show up. The funny thing is that 2 of the links points to almost identical pages ( the only difference is the content in the h1-tag), but only one of them will show. When I click on the other link it only shows a blank content. It works just fine in FF3, Safari and Opera, but not in IE7.
3. The charset. I use iso-8859-1, but it seens like somehow it is converted to utf-8 when i load the pages and special-chars like æøå shows up as questionmarks.
It is probably just me being stupid and not seeing what I am doing wrong, but if anyone could help me with these issues it would be deeply appreciated.
Thanks
( )Mike March 18th
1. Did you include jQuery in your page? You have to download the package and call it with a tag inside the tag. Also ‘embedded video’ is probably Flash, not Javascript. Sorry if this is insultingly obvious advise but you did say you were a beginner :P.
( )2. No idea what could be wrong. Check for a missing h2 ‘/’ maybe? Post your code somewhere where ppl can check.
3. In your Doctype at the head of the page is it set to utf? Go through everything and make sure there’s no utf settings anywhere.
Buzzlair January 4th
James, i hope you could rewrite your article for the latest code you posted. I wanted to understand how it works and the terminology.
Ive learnt a lot from this articles and hopefully to go further on your latest codes.
Hopefully u got time for that.
( )Derek January 9th
How can I use this to load the content from a DIV instead of a file?
( )Andrew Johnson January 15th
won’t work in safari, any fixes?
http://andrewjdesign.com/new2
i’ve modified it only to use a global header.php and footer.php is why the pages are all .php I changed it in the javascript. Works in ff3 but not safari 3? Neither does the demo site. Any fixes.
Also, I think some clarification on what is the correct way to implement the script after all the questions and changes would be a good second tutorial off of this one. Obviously everyone is interested.
( )insic January 22nd
basing on the last link http://qd9.co.uk/nt/jquery/ajaxtut/ that james provide. The problem is getting worse.
( )joe January 29th
Hi James,
I love this tutorial and thank a lot for your work, but I have problem when using it with MODx CMS (with url rewrite).
In good browsers, everything works fine. But with ie6, it doesn’t work with those rewrited urls. I’ve tried with a static page and it works fine even though in IE6.
Any suggestion about this?
http://www.joysthai.com.au/menu.html
( )Paul January 29th
@Derek, I recently came across another article on how to do something similar but with div content on a single page. I love it, and it’s degradable for the most part. I think such an effect is best used with div content rather than for the main navigation and/or switching physical pages. I plan on using the link below’s implementation for portfolio content.
here’s the link: http://blog.rebeccamurphey.com/2007/12/04/anchor-based-url-navigation-with-jquery/
my own current site uses show/hide div content right now, but I have no way of going direct to a specific portfolio piece, hence the need for the anchor based jQuery method above.
@James, don’t get me wrong, it’s a great tutorial and also a very good experiment for those new to jQuery to get their feet wet so to speak. more power to you, you write wonderful and comprehensive tutorials. thanks again.
( )Jung February 12th
having similar issues…works fine in firefox but not in safari nor ie7.
think the problem might be the history plugin, which appears to have been optimized for ie6 and safari two.
theres a new version of the history plugin here:
http://plugins.jquery.com/project/history
but plugging that in breaks james code.
any updates for this?
( )lawrence77 February 13th
Hi james very good work…
and well detailed explanation!
GOD bless you!
( )aaron February 16th
Everything works fine except one thing:
instead of static contents, i have different forms that change everytime a navigation link is clicked. when used separately, the forms uses jquery to validate everything. but when i use it as a “content”, the validation doesn’t work. i think it bypasses the validation part of it.
I NEED HELP!
please email me for suggestions.
thanks in advance!
aaronpugal@gmail.com
( )fatjay February 23rd
i wanna use this with lightbox but it dont work… any idear how to make it work !?
( )yepecece February 24th
I am trying to use this with Tinyslideshow (http://www.leigeber.com/2008/12/javascript-slideshow/) but it dons’t seem to work.
It loads the gallery website but does not activate the slideshow.
Thanks
( )R0by February 28th
I want to use this for a website.
But i just cannot figure out how i fix the problem with the “back” button.
Could someone explain this better?
Would be nice.
( )nunusganteng March 10th
thanks.thats is very nice for me.
( )Yoosuf March 11th
still i appreciate this tut
( )advise-art March 12th
why not …. i have to try it …
( )André March 12th
EXCELLENT TUT, just wish i’d seen it before.
Quick question:
( )Could you use regex to actually change the Url to sample/index.html/terms.html instead of sample/index.html#terms.
That is removing the # and replacing it with /?
Super Gab March 19th
Hi, I’m unable to make my javascripts work on the elements when they are called with this script.
I use shadowbox to for my photos but when they are called using this script the shadowbox doesn’t work anymore.
How can I overcome this problem?
( )worx March 24th
this latest version of script is not working in IE, is there any fix for that James ?
( )Thanks
worx March 24th
at least on IE 7 that I’ve noticed
( )Fred Soler March 26th
It doesn’t work for me on IE6. I use Wordpress and it works fine on FF, Safari (3) and Opera. Something To do?
My gallery
( )Derek April 2nd
How can I integrate this with jquery UI accordion so when the header is clicked the content is loaded dynamically?
( )Jake April 9th
@worx (yeah like a month later, but for anyone else who looks) The latest version of the script doesn’t work on IE6, IE7, Chrome (and probably safari, as they do run on the same engine).
The original works fine on them all, including ie6.
( )Jake April 9th
I wonder if anyone actually reads comments this far down? Anyway, i’ve fixed the code, it seems to work in all browsers except in ie and opera you have to click the back button twice to actually go back.
I checked with firebug and it’s sending out two requests every time i click on one of the targeted links. I’ll try and fix this issue and post the code up somewhere if i can, but does anyone have any idea why it could be sending out two requests each time? I only made some minor amendments to the code.
( )Chris April 13th
I’m a newbie on jQuery and have that I think is a stupid question for all you more experienced.
Why does not this script work when I use “How to Load In and Animate Content with jQuery”. It works fine if I go directly to the page with the script on e.g. terms.html but not if I go through the menu. Any ideas?
$(document).ready(function(){
$(’#kroni h3:first’).addClass(’active’);
$(’#kroni p:not(:first)’).hide();
$(’#kroni h3′).click(function(){
( )$(this).next(’p').slideToggle(’slow’).siblings(’p:visible’).slideUp(’slow’);
$(this).toggleClass(’active’);
$(this).siblings(’h3′).removeClass(’active’);
return false;
});
});
mp April 16th
Hi there! wonderful script james
I am having problems however showing tables. Everything works fine but when i come to load a page with a table, everything shows except the table.
can anyone guide me to this pls?
thanks
( )mp April 16th
Re my previous comment .. the one above,
I just noticed the table doesnt show in Firefox. Workes fine with ie8
:S
( )mp April 18th
Is there a way to do this with a Submit button from a FORM??
thanks
( )Dary April 27th
Thanks for this great tutorial! I have gotten it working using the #content div as shown in the tutorial. I have however added a wrapper around the content div (contentwrapper) which encompasses both the original #content and now a #sidebar div. I have tried to apply the js to the upper level wrapper, but it doesn’t work in IE! Any help would be GREATLY appreciated! I have put up two examples, 1 uses just the #content div and works fine in all browsers. The 2nd applies the js to the wrapper, where it works in everything but IE. Thanks in advance!
http://www.stentorwebdesign.com/contentdiv/
http://www.stentorwebdesign.com/contentwrapper/
( )Dary April 28th
In response to my comment above: I’m still not sure why divs contained in divs don’t work in ie, but I just used classes instead, and it work great. Thanks again for this tutorial.
( )santosh kumar May 11th
Awesome !wonderful
( )thanks for sharing
redonkeechong May 12th
How would i go about getting this working with slimbox? The page I’m working on is nearly complete and I don’t want to use the prototype fix since everything is in jquery.
After the ajax content is loaded, how do I go about re-initializing the slimbox command so it works?
I’ve wasted days trying to get this to work!
( )Chosen Development June 9th
Look into using livequery as a plugin to make slimbox work. I don’t care for the size of it, but its great if you don’t know JS very well.
( )Corretje May 12th
Nobody mentiones that the script is very, very slow. It takes 30 seconds to load the new content. I tried this with IE 6, 7 and 8 and with Firefox.
Also the demo is very, very slow on my PC.
( )4354354 June 19th
435435
( )Singh May 17th
its just your pc dude, the demo and everything else is very fast
thats maybe why no one mentioned it lol
( )Cyrus May 27th
Awesome stuff man… nice and clean.
( )wpdigger June 3rd
Wow thats brilliant! Thanks for sharing…….
( )adam June 8th
This worked great for me. Thanks for taking the time to put this together…
I do have one question, is it possible to remove the effect that pushes the div all the way up before loading in the second?
ie… just have the size morph instead of resetting?
( )dc June 10th
Great tut. Great solution. Great alternative to Flash. One question: Is there anyway to make the index page animate before a user clicks on a link?
( )ktsixit June 11th
Hi James and tank you for this script:)
I’d like to ask two questions:
1) How can I change the effects? I mean the effects used when a page is loaded. I’d like to have a fade-in effect while loading a page and a fade-out effect while un-loading a page and loading another one. It’s simple I guess but I don’t know how to remove that “unfolding” effect that’s used in demo.
2)Is it possible to load pages that use sifr fonts?
I would really appreciate any suggestion. Thank ’s again.
( )sharath July 3rd
nice post!!! thanks for this i learned a lot
One quick question:
Wat to do if i want to add a javascript to page? for example i want to track the page hits so i want to add google analytics to the pages… when i add the page goes blank
currently i am using ajaxnavigation 2 which is similar to jquery…
thanks for your help!!
( )