CODEWITHSUNDEEP
phpjavascripthtmlcssajax
user656925
user656925

Reputation:

Site Navigation - PHP/HTML vs. Ajax vs. CSS/Javascript

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!

Upvotes: 0

Views: 1940

Answers (4)

Dan Kanze
Dan Kanze

Reputation: 18595

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>

Upvotes: 3

calebds
calebds

Reputation: 26228

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.

Upvotes: 1

Phix
Phix

Reputation: 9910

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.

Upvotes: 1

ThePrimeagen
ThePrimeagen

Reputation: 4582

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.

Upvotes: 1

Related Questions