Solved

javascript collapsable table rows doesn't work properly in firefox

Posted on 2006-10-30
6
252 Views
Last Modified: 2012-06-22
I have written the following code, in IE it is working exactly as I want it to be, that is click the image and it will expand the section, if you click another section and the previous section was empty it will collapse that and expand the new one. If the previous section was not empty, it will leave it expanded idea is that the user can see exactly what options they have selected.

If you load this is firefox it kind of works, but formatting is corrupted. i.e somethings the options do not line up correctly, and also playing around with collapsing and expanding the sections, a lot of unwanted vertical spacing is generated. How can I fix this?

P.s might help if you create two images called 'collapse.gif' and 'expand.gif' if you want to try out the code below:

I only have 80 points left...sorry.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link rel=stylesheet type="text/css" href="styles.css">
<script src="js/script.js" language="javascript" type="text/javascript"></script>
</head>
<body>
  <script language="JavaScript" type="text/javascript">
function expandRow(itemid)
{
      var headerrow = document.getElementById('header_' + itemid);
      headerrow.style.display = "block";            
      // get all the radio button elements in a known structure
      var elem = document.forms[0].elements;
      var radios = new Array();
      var expandimage = document.getElementById('expand_' + itemid);
      expandimage.src = "collapse.gif";      
      for(var i=0; i<elem.length; i++)
      {
            var reg = /^noradio_((.+)_(.+)_(.+))/i;            
            var ar = reg.exec(elem[i].id);            
          if(ar != null)
            {                  
                  if(ar[3] == itemid)
                  {
                        var optionrow = document.getElementById('option_' + ar[1]);
                        optionrow.style.display = "block";      
                  }
            }
      }      
      
      // collapse any other expanded ones apart from the one the user just clicked on
      collapseNonSelectedRows(itemid);
}

function collapseNonSelectedRows(itemid)
{
      // get all the radio button elements in a known structure      
      var elem = document.forms[0].elements;
      var radios = new Array();
      for(var i=0; i<elem.length; i++)
      {
            var reg = /^noradio_((.+)_(.+)_(.+))/i;            
            var ar = reg.exec(elem[i].id);            
          if(ar != null)
            {                  
                  if(radios[ar[3]] == null)
                  {
                        radios[ar[3]] = new Array();
                  }
                  radios[ar[3]].push(ar[1]);                  
            }
      }
      
      // go through the associative array and hide all items that have all their options as "no"
      for(items in radios)
      {            
            // if specified by paramater not to collapse this item then ignore it
            if(itemid == null || itemid != items)
            {
                  var expandimage = document.getElementById('expand_' + items);
                  expandimage.src = "collapse.gif";                  
                  var allNo = true;
                  for(var i=0; i<radios[items].length; i++)
                  {                        
                        if(document.getElementById('noradio_' + radios[items][i]).checked != 1)
                        {
                              allNo = false;
                        }                        
                  }
                  // if all no then hide then
                  if(allNo == true)
                  {
                        var headerrow = document.getElementById('header_' + items);
                        headerrow.style.display = "none";
                        var expandimage = document.getElementById('expand_' + items);
                        expandimage.src = "expand.gif";
                        for(var i=0; i<radios[items].length; i++)
                        {                              
                              var optionrow = document.getElementById('option_' + radios[items][i]);
                              optionrow.style.display = "none";                              
                        }
                  }
            }
      }
}
  </script>
  <table width="560" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333">
    <tr>
      <td>

        <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="#66CCFF" bgcolor="#66CCFF">
          <tr>
            <td valign="middle" bgcolor="#666666"><div align="center">
                <p><br />
                  <br />
                  <br />
              </p>

              </div></td>
          </tr>
        <tr>
      <td bgcolor="#666666">&nbsp;</td>
</tr>
<tr>
      <td valign="middle" bgcolor="#66CCFF"><br />
            <table width="399" border="0" align="center" bordercolor="#FFFFFF">

                  <form method="post" name="customerorderform" action="index.php?act=customerform&page=1">
                        <input type="hidden" name="customerorderform" value="1">
      <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">
                                    <div align="center">
                                          <a href="javascript:expandRow(1);"><img src="expand.gif" name="expand_1" border="0" align="left" id="expand_1"></img></a>                    
                                          <div align="center">Students</div>
                                </div>                              </td>
                        </tr>
                        <tr id="header_1">
                              <td width="17" class="style10">                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">Yes</div>                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">No</div>                              </td>
                              <td width="14" class="style10">                              </td>
                              <td width="190" class="style10">
                                    Options                              </td>
                              <td width="61" class="style10">&nbsp;</td>

                              <td width="17" class="style10">                              </td>
                        </tr>
      <tr id="option_1_1_1">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_1" id="yesradio_1_1_1" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_1" id="noradio_1_1_1" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">books</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>

      
                        <tr id="option_1_1_2">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_2" id="yesradio_1_1_2" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_2" id="noradio_1_1_2" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">pens</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr id="option_1_1_3">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_3" id="yesradio_1_1_3" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_3" id="noradio_1_1_3" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">pencils</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">

                                    <div align="center">
                                          <a href="javascript:expandRow(2);"><img src="expand.gif" name="expand_2" border="0" align="left" id="expand_2"></img></a>                    
                                          <div align="center">Parents</div>
                                </div>                              </td>
                        </tr>
                        <tr id="header_2">
                              <td width="17" class="style10">                              </td>

                              <td width="35" class="style10">                              
                                    <div align="center">Yes</div>                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">No</div>                              </td>
                              <td width="14" class="style10">                              </td>
                              <td width="190" class="style10">

                                    Options</td>
                          <td width="61" class="style10">&nbsp;</td>
                              <td width="17" class="style10">                              </td>
                        </tr>
      <tr id="option_1_2_4">

                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_2_4" id="yesradio_1_2_4" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_2_4" id="noradio_1_2_4" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">blackboard</td>
                          <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr id="option_1_2_5">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_2_5" id="yesradio_1_2_5" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_2_5" id="noradio_1_2_5" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">marker</td>
                          <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">&nbsp;</td>
                        </tr>
                  </form>
            </table>              
            <p> </p>

            <div align="center"><br />
            </div>
            <p></p>
      </td>

</tr>
<SCRIPT LANGUAGE="JavaScript">
      collapseNonSelectedRows();
</SCRIPT>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
0
Comment
Question by:rukiman
  • 3
  • 3
6 Comments
 

Author Comment

by:rukiman
ID: 17839512
this is urgent so would be very grateful for a solution to the firefox problem.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 80 total points
ID: 17839621
rukiman,

The first thing I would try is not replace none with block to show the row.  I have seen issues with this.  My recommendation is to change "block" to "".  This will remove none but not replace it with block, which causes a problem.  The table row will show since none is not used.  Let me know if you want to know specifically where to do this in your code.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:rukiman
ID: 17839825
your a life saver...that fixed all the issues...
whats the meaning of block? I just assumed that was the way to unhide elements.
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17839943
It isn't exactly the way to unhide.  Basically block will cause elements to be handled on their own line.  For example, naturally block elements are p, br, h#, and div.

Inline elements do not start a new line.  Some examples are strong and span.

I hope this basic explanation helps.  I'm glad the problem was just using block.  Let me know if you have any other question.

bol
0
 

Author Comment

by:rukiman
ID: 17839966
thats all for now...thanks very much, now I can continue with the rest of the project !
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17839975
Your welcome!  I'm glad that I could help.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i get 4 nd 5 ? 3 31
How do I show metrics with PHP or Javascript 6 33
Html Newline 7 21
maven not picking latest jar instead picking old jar from .m2 12 22
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question