Single Page website with AJAX

[pawanx]

Hi,
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.

Regards,
Pawan

[Brian Meyer]

pawanx, I’m a AJAX n00b, so there are likely better ways to do this.

you can use jquery to change the css display property of a DIV to display: none;

[noahgelman]

@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, https://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/ , https://css-tricks.com/video-screencasts/84-site-walkthrough/

There should also be some good AJAX tutorials out there if you google it.

[TT_Mark]

@noahgelman There is nothing wrong with what brianallan suggested if you simply hide content with JavaScript after loading the page. I’m sure Chris showed us a site he did like this a while back for a friend’s band

[noahgelman]

@TT_Mark, but that’s not for a content driven site. The content is, for the most part, static. My advice was for if it was a site that constantly/often adds new content

[Brian Meyer]

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 (https://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]

Thanks everyone for the comments. I looked at the screencast and I think that Single Page Interface (SPI) using AJAX would be the best option.

[alwayzambitious]

hey brianallan, any updates on those links by chance? I am looking myself.

[Anonymous]

@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.

LINK

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.

[Author]

Posts