- This topic is empty.
October 28, 2010 at 10:45 am #30672pawanxMember
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.
PawanNovember 19, 2010 at 6:19 pm #74374Brian MeyerParticipant
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;November 19, 2010 at 8:59 pm #74381noahgelmanParticipant
@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.November 20, 2010 at 7:13 am #74191TT_MarkMember
@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 contentNovember 23, 2010 at 1:19 pm #72467Brian MeyerParticipant
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.December 27, 2010 at 2:43 am #68610pawanxMember
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.April 13, 2013 at 12:40 pm #131724alwayzambitiousMember
hey brianallan, any updates on those links by chance? I am looking myself.April 13, 2013 at 11:36 pm #131748AnonymousInactive
@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.