PDA

View Full Version : Firefox table issue with Switch Content script



bobolibob
04-10-2009, 03:48 AM
1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem:
I have a table with 3 columns and 2 rows. I am trying to use the Switch Content script to make the bottom row expand and collapse when a button is pressed. It works exactly as I want it to in Internet Explorer, but in Firefox the whole second row is jammed into the first column.

Go here to see it in action: http://people.clemson.edu/~rcraven/test/test.html
(make sure you look at it in both IE and Firefox to see the difference)

The part where I think I am wrong is using the class in the TR tag:

<tr id="x400" class="searchlisting">
<td colspan="2" class="users"><p>2 cols wide</p></td>
<td colspan="1" class="users"><p>1 col wide</p></td>

</tr>

My best guess from looking around is that something I am doing or that the script is doing is not 100% compliant and IE is cool with it, but Firefox is being a stickler. I've checked my source on the W3C Validator and everything looks OK there. I've also tried enclosing the TR in DIV and SPAN tags, but the expand/collapse functionality quits working.

If anyone has a suggestion, it will be highly appreciated. Thanks.

bobolibob
04-10-2009, 05:02 AM
Solved my own problem. Still not sure what was causing my original problem, but I found a way around it. I just wrote my own JavaScript function based on what they have at: 1&1 Hosting (http://order.1and1.co.uk/xml/order/Hosting;jsessionid=15A496CF57D923E4D02756AEAF01C382.TC31a?__frame=_top&__lf=Static#block10)

Here's the meat of it:


function toggle(idparam) {

var idparam = idparam;
var minus = idparam + "-minus";
var plus = idparam + "-plus";

if (document.getElementById(idparam).style.display == "none") {
document.getElementById(idparam).style.display="";
document.getElementById(minus).style.display="";
document.getElementById(plus).style.display="none";
} else {
document.getElementById(idparam).style.display="none";
document.getElementById(minus).style.display="none";
document.getElementById(plus).style.display="";
}
}


Then I encapsulated the table row that I wanted to toggle in a <tbody> tag with the unique id and voila! ... worky worky

Here's what the working version looks like:
http://people.clemson.edu/~rcraven/test/test2.html