I am planning to develop a single page website where all the content loads and updates using AJAX. Unlike other single page sites where it slides to other sections, I am planning to make just one page site. No scrollbars, no complete page refresh when user click any link. I want the page to get updated with new content without full refresh.
It would be something like the Poll section in this website, where the poll result appears without full page refresh.
I know it will involve AJAX, but wanted suggestions and examples on how to start on it.
@brianallan, you would most definitely not want to do that. Google docks you heavily for having a lot of hidden content. It prevents people from trying to cheat and have more content than it would normally have just to get a higher rank. It could work on a resume site where you’re not really going for traffic and are just showing it to employers, but if you want traffic, that’s a huge no-no.
AJAX is definitely the way to go. Switching out content on the fly with a couple clicks is relatively easy. Here are 2 screencasts Chris did involving AJAX, http://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/ , http://css-tricks.com/video-screencasts/84-site-walkthrough/
There should also be some good AJAX tutorials out there if you google it.
I think we’re neglecting to identify what techniques are being used on these pages to show/hide content.
I just watched the screen cast noahgelman linked for chris mcgarry.com (http://css-tricks.com/video-screencasts/84-site-walkthrough/)
While it’s an excellent site, the author just kind of jumps around a complicated navigation structure without indicating the techniques he’s using. So this is probably a good tutorial for a jquery savy web designer, it’s not a good first step.
So maybe what we need to find is a nice article that’s an overview of different techniques of displaying content. I’ll post links as a stumble across them.
@pawanx There is another way you can do this without using AJAX. I’ts incredibly easy.
You can use iframes and give it name. Then you can display any external HTML page you want by simply adding target=”iFrameName” to any href link. And whatever page you want to display inside that iframe will show without reloading the entire site or even switching links. This is how it would work.
My website works on an iframe and you can see what i mean. [Website](http://reallycoolstuff.net/PROJECTS/JV/ “”)
Although there are a few bad things about iframes. Google bots wont be able to index whatever appears inside the iframe, cant use url to navigate between pages that display inside the iframes, and some old browsers don’t support iframes.
You have to analyse if it’s worth it even with the negative effects. It’s worth it for me.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".