Extreme noob Question

[Skyphoxx]

Please don't shoot me. I have a question that is most likely easy as dirt, but it's hard for me to put into words. Therefore, I don't even know what to search the forum for.

Here I have an approved site design in Photoshop.
http://www.poonpad.com/images/MyCompany-start.jpg

From here I usually chop it up into pieces and go about my business making HTML or PHP pages out of it. However, this client wants two things that I've never done before.

You'll notice I highlighted the top two quadrants/sections. The client would like these sections to be dynamic in the sense, that if you click the "services" tab on the left, it brings up the services menu over top of the Products menu without having to reload the rest of the page.

The same goes for the section to the right. If someone clicks the "Contact Us" tab, they want that section to change but not have to reload the whole page. On top of that they want it to look "nice" (whatever that means) when the tabs change.

My first thoughts were, "Well I could do it in Flash, but that might be a real pain in the rear, and not as search engine friendly as I would like." So then I thought maybe I could divide the main sections/quadrants into seperate PHP pages, and combine all of them as "Includes". But even if I try that, it won't change the fact that the whole page would reload with each click.

Is this a scenario where I would be better off using AJAX? Or What?

[boogyman]

AJAX would probably be the best option here, however you have to make the client consider the possibilities.

AJAX while it wont reload the whole page and you can insert whatever "nice transition" you want, the user will NEVER be able to add the sub-pages to favorites.
The contact page would probably be okay to use an AJAX application as there really shouldn't be any need to travel to the contact page directly, they can easily navigate from the home domain, but if the page being used is 2/3 steps down I would suggest that you propose to use full page reloads. Unless you disable caching, the pages and images should see a speed up in rendering from page to page unless there are entirely different templates for each page, which a develop would/should suggest that you use the same template as it will help the browser stay in the mindset that you are on this companies website.

so all in a nutshell... its suggested that you only use AJAX paging on something that the browser would NEVER really need/want to "Add To Favorites".

I would suggest avoiding flash because while it gives that "graphic morphing ability" it requires that the browser have the appropriate plug-in, and flash objects generally take more time to load. Some combination of ImageSwap and CSS could create a near flash-like transition between links, and they degrade quite nicely and do not require a plug-ing, but rather general browser support. Only bad thing here is that IE likes to style differently from just about every other browser, it usually ends up that you have to create 2 entirely differente stylesheets :mad: 1 for standard browsers and 1 for IE.

the other option would be using a frameset / iframe which offers the same benefits of AJAX, however it will once again require the user to manually scroll through the navigation each and every time this person uses this page

[Skyphoxx]

Ok. So let's say I want to play around with the idea of Ajax. Would you or anyone out there be able to suggest a script or snippet that could get me started?

[molendijk]

You could perhaps try the technique explained here (http://www.dynamicdrive.com/forums/showthread.php?t=25009) for loading parts of the page.
It uses a frameset without some of the disadvantages. Bookmarking of specific pages is possible. (For bookmarking in framesets, see also this (http://www.dynamicdrive.com/forums/showthread.php?t=26304)).

Arie Molendijk.

[boogyman]

AJAX tutorial, http://dynamicdrive.com/forums/showthread.php?t=19247
also you can search the internet, there are a vast number of resources and tutorials on AJAX

[molendijk]

Hello Boogyman,
Since you put the link to the Ajax tutorial here, do you happen to know how we can avoid that ugly IE prompt when ActiveX is not enabled?

Thanks,
Arie Molendijk

[boogyman]

activeX will only occur when you are testing locally, once the site is live you will not get that

[molendijk]

activeX will only occur when you are testing locally, once the site is live you will not get that

No, that's not true! I tested it. (For 'ActiveX etc. marked as safe', I selected: 'promtp' ('ask')).

Arie Molendijk.

[boogyman]

well then of course its going to ask you if you tell it to.

[molendijk]

If I would have selected 'no' (not enabled), things (= the Ajax script) would simply not work.

Arie M.

[boogyman]

not enabled = disable javascript

if javascript is disabled and you do not have backwards compatability then there is no way that it will work, which is why you need to design for no javascript but plan the enhancements to incorporate it

[molendijk]

not enabled = disable javascript



If I disable 'ActiveX marked as safe' in IE, then Ajax won't function anymore, whereas a javascript site like this one (http://www.let.rug.nl/~molendyk/overbrengen/twinhelix_cascade_across_frames/)continues to function normally.

Arie M.