ALL AJAX Theme Update
One of the themes that is an exclusive download to all you good-looking people that purchased The Book is the All AJAX theme. The idea behind it is that the page never1 reloads. Whenever an “internal” link is clicked, the main content area replaces itself with content that is fetched via Ajax. So posts, pages, search results, and everything else loads right there on the same page. This gives your visitors a smooth, “app-like” experience.
1 The page still reloads for the submission of a comment.
Mo’ better
The All AJAX theme always worked, but it has undergone an update to be much mo’ better. Shout out to Stewart Heckenberg for contributing to this, this new version is a combo effort of his work and mine. Here is what is now better:
- Scripts properly loaded in the footer
- Back button works, which users will expect it to
- Hash-tag URL structure enforced when entering via a “deep link”
- Detection of internal links smarter
It may not seem like much, but it kinda is. Most importantly, it’s just a better user experience all around. Please note the site works perfectly fine with JavaScript disabled as well.
Why?
The idea is to give a simple framework in case you wanted to do this same kind of thing in your own custom WordPress theme. I feel like this is a fairly easy theme to start from, with it’s über basic design. The original idea was based on a client request where there was a music player in the sidebar. They wanted it so a user could play a song in the music player, and have it not stop as they clicked around other links.
How to get it
We have a brand new downloading system here for the book and it’s related materials. Everyone who has previously purchased the book has access to it. Read the instructions here.
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
19 responses
-
tobiasmayawesome news! i’ working on a client project for the past week that i based upon your screencast and some fork on the net i found. the next nice thing is to know that the theme is included in the book.
i always thought the theme wasn’t in there because on the themeclubhouse website it said seomething like: under development.
guess thats a go for me to buy the book! finaly. tinkered with it for a while now.
one question though that i am confrontet with right now:
does deeplinking even work when using a filterable ex. portfolio on the website that works by id’s (click <a> -> items class jquery shown)? i figured out that there’s a major problem witht the hashchange then.
-
I noticed a little bug, the menu doesn’t highlight the current item when entering via a “deep link” (say
http://example.com/#/contact).It may be personal preference, but there’s something about the loading that makes it seem slower then actually reloading the page. People don’t like getting white with a loader. Perhaps leave the text stay and show the loader absolute positioned in the top right of the content area ( after each load: append(.img.. loader…position:absolute;top:-10px;right:0px;display:none…), when loading another one: fadeIn() )
Becuase of the way load() works, it doesn’t empty the target element untill the resource is loaded so it will never blank. I tried this locally and the experience seems snappier, it’s just an illusion though ;)
-
geertbavenI cannot get the loading image to work. the file ajax-loader.gif is missing in the download.
-
Chris Coyier Post AuthorYou can snag the one used in our demo and put it in the root images folder of your site.
-
geert bavenyes I found that, but it is still not working for me. there is an example where I put the theme at arma-avontuur.nl
-
-
-
Hi I just purchase the pdf/ajax theme. Great theme and book, thank you.
However I’m wondering if you could advise me on how to add a fade in effect for the pages? I was hoping the book might address this but I guess its too custom a request.
So basically – Instead of just loading an ajaxed page or post right away have a nice easing in fade effect. Can’t seem to figure this out on my own so I’d be reeeallly grateful for any advice.The person I’m customizing this theme for also wants the Body background to fade to a different background image depending on what page you are on without re-loading the page. I agree that would look nice but am totally unsure how to approach it and was hoping the AJAX theme would point me in the right direction.
Would you be willing to suggest some solutions for those two things??
much obliged!!! thank you!!
-
Chris Coyier Post Author
I think it’s best, for learning sake, to work on these kind of things yourself so I’ll be a little vague. The heart of this Ajax technique is the .load() command, which fetches the content from another URL. So BEFORE that, target the main content and use jQuery’s .fadeOut(). Then AFTER that (the function at the end of the .load() function is a “callback” or will happen after the Ajax is successful) use jQuery’s .fadeIn() to bring it back.
-
-
hi again – here’s a link to another ajaxed wordpress theme that does the fullscreen fade in background effect. however its a pain to customize and I prefer your theme. But the fading background effect is awesome and would love to integrate that into ALL AJAX if possible. Just no clue what to be looking for!
I can see that they use the jquery script fullscreenr to do the fullscreen background resize, but the fade in integrated with ajax??
thanks again. any advice is greatly appreciated!!!
-
Thank you for your reply! hmm although I’m not following at all. :(
I’m more of a cut/paste and pray that it works person. Lame I know, but this stuff is way beyond me. Do you have any suggestions of a tutorial of where to start to begin to understand what you’ve just told me??
many thanks-
-
nevermind, sorry – I googled jQuery’s .fadeOut() and successfully got it working! again thanks so much for your help, worth the 27 bux just for your reply. :)
-
Chris Coyier Post Author
See! I knew you could do it. When you are self-hosted complex software like WordPress, then using fancy third-party themes doing fancy stuff, you’re copy and paste days are over, time to dig in!
-
-
Ha, I don’t know bout THAT. But we’re getting there. :)
Still can’t figure out how to do a cross fade effect between background images going from page to page while keeping the menu from reloading. found a fullscreen background slideshow or a fade out fade in but not a crossfade between pages. now I’m thinking that’s maybe not possible? that what I’m looking for is an effect only possible if I did this website in flash. Am I wrong about this? gonna keep digging, but if you got any suggestions for keywords I can google I’d be super grateful.
thx again…. m
-
Edmund LEIJust download PDF, but cannot found password for login…please help
-
Hey I am using NextGen Gallery with this theme and ‘prettyPhoto’ images seem to be interfearing with the ‘a’ tags or allLinks. Any suggestions? Also the ajax validation for the forms ‘Contact Form 7’ plugin isnt working. I’m confused.
-
Im having the same issue Mat ! And I’ve fooled around with several other lightbox plugins – I can at least get NextGen to work with the thick box effect (since its built into WP) but it still just navigates the theme to a blank page each time I pick an image. So confused ! Im thinking it could work if there was somehow a way to disable the ajax functionality strictly on the gallery page – but alas, I am a newb haha.
-
I am still battling the issue, lol. Currently I have put it on the back burner do to my hectic work flow. Hopefully someone will take a peek at the code and help us out. If I find anything I will deff post it up.
-
Yea, despite my best efforts, I still cant seem to wrap my head around it. My solution (for the mean time) was to manually install PrettyPhoto into the theme, and then manage the gallery without a plugin – and the only way I was even able to make that work, was to use PrettyPhoto’s onclick api call, vs. the simpler method of using an anchor tag with a ‘rel’. Oh well ! Fingers crossed.
Cheers !
-
-
-
-
Hey, I’m your fan now. I added you to my RSS feed list to follow your updates… you write well.
-
Hey,
I want to purchase this theme, but i noticed javascript error in IE8. It says ‘Done, with errors on page’. It works fine in firefox though. Can you tell me whats this issue?
Waiting for your reply. Thanks.
