Results 1 to 2 of 2

Thread: Firefox table issue with Switch Content script

  1. #1
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Firefox table issue with Switch Content script

    1) Script Title: Switch Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.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:
    HTML Code:
    <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.

  2. #2
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Here's the meat of it:
    Code:
    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •