[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

javascript collapsable table rows doesn't work properly in firefox

Posted on 2006-10-30
6
Medium Priority
?
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 320 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

650 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