Solved

javascript collapsable table rows doesn't work properly in firefox

Posted on 2006-10-30
6
249 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
thats all for now...thanks very much, now I can continue with the rest of the project !
0
 
LVL 54

Expert Comment

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

bol
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

771 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

12 Experts available now in Live!

Get 1:1 Help Now