up vote 0 down vote favorite

I have recently been debating whether or not to use AJAX for my site navigation to only transfer over only needed updated HTML elements, or if there was not a significant difference between new elements and current elements to just load the page in its entirety (php generated or static html)

However, I thought how that if the new content was not large in size relative the current page...that perhaps I should send it has a hidden div (via CSS) along with the current page.

This 3rd way seems like a simple solution. For example just send the entire current page + any additional content that might be requested by the user as hidden divs.

When the user selects the content just hide the current content, and display the hidden content...

All in all, each way (normal, Ajax, CSS) would look the same to the user but a CSS / Javascript solution would be provide the quickest interface and be the simplest. Ajax might cut down on download for example if the content is never used.

This is a validation question. Is this a valid way to navigate a web application? By hiding/displaying divs using the display property or opacity property to flip through content?

Notes (response to answers)

  1. The Hidden divs would be static data that is not changed by the user. I thought this would be obvious but now I've made it explicit.

Thanks!

share|improve this question
97% accept rate
feedback

4 Answers

up vote 3 down vote accepted

You need to think about it this way.

If the hidden content is dynamic (changing) there is a need for AJAX because AJAX would usually be used to fetch updated content from the DB.

If your content is static (not changing) then how much new content are we talking? Does the size of the new content have a significant impact on render time if it was in a hidden DIV? If its very little, then I would say use a hidden DIV. If its alot, then mabye it's time to consider AJAX to load it in from an external page.

Here is a simple solution to get you started using a hidden DIV:

<script>
     function setVisibility(id, visibility){
     document.getElementById(id).style.display=visibility;}
</script>

<div id="message1" onclick="setVisibility('message1', 'none');setVisibility('message2', 'inline');"> >Hey What's Up?</div>

<div style="display:none;" id="message2">Not Much You?</div>
share|improve this answer
The Hidden divs would be static data that is not changed by the user. I thought this would be obvious but now I've made it explicit. – Hiro Protagonist Feb 6 at 17:57
Ok well if they are static and contain a little bit of content that doesn't affect load time / bandwidth isnt an issue / low - medium traffic etc... use a hidden DIV. If its a lot of content I would use AJAX to load it in from an external page. – Dan Kanze Feb 6 at 17:59
I supplied some source in edit. – Dan Kanze Feb 6 at 18:11
feedback
up vote 1 down vote

It does depend on the data being shown. Facebook could not do this because the data is updated often, there would be out of sync problems.

Since i do most of the development by myself, having a full ajaxy site seems like a large task for me, so i usually keep page flips, but some of the content on the inside i have it as ajax generated.

Like say there is a form to create something, i have that form submit in the background (excellent jquery plugin for that) then i have the new data be displayed at the top of the list ($.prepend). This way, things are still ajaxed, but not to a level of which is hard to manage for a single programmer.

share|improve this answer
The Hidden divs would be static data that is not changed by the user. I thought this would be obvious but now I've made it explicit. – Hiro Protagonist Feb 6 at 17:57
feedback
up vote 1 down vote

One thing you need to keep in mind is to keep your site as non-breakable and accessible as possible. Because Ajax content isn't on the page, it can't be indexed by spiders, etc. Ajax requires more error testing/catching, etc than "standard" CSS alteration, so make sure you're going to make it work in ALL browsers. There's no excuse for bad or broken navigation.

share|improve this answer
I keep hearing this, that an all ajax site will not be crawled properly, can you provide additional reference material on this. – Hiro Protagonist Feb 6 at 17:58
"For a while, we were scanning within JavaScript, and we were looking for links. Google has gotten smarter about JavaScript and can execute some JavaScript. I wouldn't say that we execute all JavaScript, so there are some conditions in which we don't execute JavaScript. Certainly there are some common, well-known JavaScript things like Google Analytics, which you wouldn't even want to execute because you wouldn't want to try to generate phantom visits from Googlebot into your Google Analytics" - from webmasters.stackexchange.com/questions/5653/… – Michael Feb 6 at 19:19
feedback
up vote 1 down vote

Your idea is definitely a valid approach. You're basically looking for a trade-off between an initial, longer request, and many shorter ones down the line. As long as the amount of initially hidden content is not gratuitous, the user experience will likely benefit by getting all of the markup first, and hiding/showing it with JavaScript + CSS as needed.

Suggested Approach: Consider using jQuery's

methods, and combining with a history manager to emulate real browser history changes as the user navigate's page states. This is the approach I use on my website: paislee.net. IMO its clean and lightning fast because there are no new HTTP requests.

share|improve this answer
Thanks for some validation. I feel that if a user hits back or forward he should be taken off my site. All my navigation should be simple and explicit on my page. As a side....using CSS navigation...umm...will it allow better indexing by web crawlers? – Hiro Protagonist Feb 6 at 18:00
If you dont have JQuery core already installed on your website, then installing it is a waste to do something simple like this that javascript alone can do in 3 lines. – Dan Kanze Feb 6 at 18:02
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.