Solved

javascript collapsable table rows doesn't work properly in firefox

Posted on 2006-10-30
6
250 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Explain how this javascript function works 1 24
jQuery detect if it is a mobile device 3 108
jQuery Syntax 2 47
how can i count words? 2 21
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now