Swap Content

Which process is more efficient -- JavaScript or PHP?

[Storyman]

At a crossroad and uncertain as to which path to take.

The idea is that there is a CSS class designated as “.leftpod” and there are several leftpods designated as “.leftpod1”, “.leftpod2”, etc. For convenience each leftpod’s ‘z’ level is leftpod1=10, leftpod2=20, etc.

The purpose of the different leftpods is that they each display different content using PHP & MySQL. My original thought was to have a different stylesheet that would change the visibility/hidden characteristics for each class, i.e. leftpod1, leftpod2, etc.

For example, a list of article titles along with the first two sentences are displayed in the leftpod. When the user selects an article to read ideally the content in leftpod will disappear and be replaced with the full article.

Currently, Switch/Case is used to make the determination as to which CSS stylesheet to load using @import url(“leftpod2”); It works, but now I’m wondering if there is a more efficient method to consider using PHP rather than my current approach of CSS stylesheets?

Options:
#1. Does PHP have a process to dynamically swap content within a specific layer?

#2. Is there a way to use Show/Hide recordsets (I’m using DW MX 2004) that will do the job more efficiently? All I’m familiar with in regards to Show/Hide is to display (or not) on the status of the recordset as in if the recordset contains data or not.

#3. It seems that CSS2 should have way to set the visibility to hidden for all of the layers, then allow just the selected layer (i.e. leftpod2) to be visible. If it is possible I have not found a way to do it—I’ve searched documentation and tutorials with no results. (Also, I’m not sure if it is better to post in CSS or PHP and don’t want to have duplicate postings.)

Thanks for any insight that you can provide to help clear my head of this tangled web.

[ergophobe]

Any time PHP does something to a page, it can only do so by sending an entirely new page, which is what I think you are trying to avoid. Is that correct?

To do the sorts of things you want to do, you need to use client-side technologies like CSS, Javascript and DOM. Basically, what you want to do is

- set most "pods" to display:none with CSS. One of them would be display:block;

- then use Javascript to set the display attribute of the element.

Here's what I do and it works in IE6, Firefox and Opera 7. Maybe others, but it's basically for a small workgroup and that covers all browsers in the workgroup, so I haven't tested with others. What I'm doing is functionally identical to what you're doing, but I had users clicking navigation links and leaving the page without saving their form data. I set it up so the common navigation links submit the form if there have been changes, and some others get hidden when changes are made, shown again on submit or reset.

The CSS has

#nav {display: block;}
#searchBox1 {display: block;}
#warnChanges {display: none;}

The html just uses divs with ids as in

<div id="searchBox1">search box</div>
<div id=warnChanges">You have made changes. Save your data blahblah blah</div>

I use a javascript routine to apply an "onchange" event handler to all form elements in the main data-entry form, but I think you would just want to hardcode an "onclick" event into each link.

I change the visibility like so:

 var x = document.getElementById('nav'); 
 x.style.display = "none"; 
 var y = document.getElementById('searchBox1'); 
 y.style.display = "none"; 
 var z = document.getElementById('warnChanges'); 
 z.style.display = "block"; 

You would need to send your onclick event handler the id of the "pod" you want to show and that one would be set to display and the one currently displaying would be set to "none".

See if you can give that a go. If it doesn't work for you, you should probably start a new thread in the Javascript forum.

Tom