Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
Like Tree2Likes
  • 1 Post By Philip M
  • 1 Post By vwphillips

Thread: Table not displaying correctly in expand collapse section

  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Table not displaying correctly in expand collapse section

    Hi,
    I have a javascript code which is not working correctly in a webpage. When i save the code offline as a html file and open it in browser, it works correctly but when i put it to a webpage and save it, it does not display correctly. Below is how it shows:
    Table not displaying correctly in expand collapse section-webpage-screenshot.jpg

    I want it to be seen as below:
    Table not displaying correctly in expand collapse section-screenshot.jpg

    Below is the code I used. Request you to please help me at the earliest. Thank you!

    Code:
    <meta content="en-us" http-equiv="Content-Language">
    <title></title>
    <script>
        var toggledDisplay = new Object();
        toggledDisplay['sub1'] = true;
        toggledDisplay['sub2'] = true;
        toggledDisplay['sub3'] = true;
    
        function toggleDisplay(bDisplayed) {
            if (!document.getElementById || toggleDisplay.arguments.length < 2) return;
            var displayed = new Object();
            displayed['true'] = 'block';
            displayed['false'] = 'none';
            for (var i = 1; i < toggleDisplay.arguments.length; i++) {
                oDisplay = document.getElementById(toggleDisplay.arguments[i]);
                if (oDisplay) {
                    oDisplay.style.display = displayed[bDisplayed];
                    if (bDisplayed) {
                        oImages = oDisplay.getElementsByTagName('IMG');
                        for (var j = 0; j < oImages.length; j++)
                            oImages[j].src = oImages[j].src;
                    }
                    if (typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
                        toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;
                }
            }
        }
    </script>
    <!--mstheme-->
    <link href="../../_themes/Lacquer/Lacq1011.css" id="onetidThemeCSS" rel="stylesheet" type="text/css">
    <meta content="Lacquer 1011, default" name="Microsoft Theme">
    <div><a href="JavaScript://" onclick="toggleDisplay(true, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Expand All</a> | <a href="JavaScript://" onclick="toggleDisplay(false, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Collapse All</a>  <font color="#000000"> </font>
        <table border="1" style="width: 100%;">
            <tbody>
                <tr>
                    <td colspan="2">Page Title</font>
                    </td>
                </tr>
                <tr>
                    <td class="rtecenter" style="width: 50%; background-color: rgb(255, 102, 0);"><span style="color:#000000;"><strong>AAA</strong></span>
                    </td>
                    <td class="rtecenter" style="width: 50%; background-color: rgb(255, 102, 0);"><span style="color:#000000;"><strong>BBB</strong></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="background-color: rgb(0, 102, 204);"><a href="JavaScript://" onclick="toggleDisplay(toggledDisplay['sub1'], 'sub1')"><span style="color:#FFFFFF;"><strong>Section 1 - Click to Expand / Collapse</strong></span></a>
                    </td>
                </tr>
                <tr id="sub1">
                    <td colspan="2">
                        <table border="1" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td style="width: 50%;"><font color="#000000">AA</font>
                                    </td>
                                    <td style="width: 50%;"><font color="#000000">11</font>
                                    </td>
                                </tr>
                                <tr>
                                    <td><font color="#000000">BB</font>
                                    </td>
                                    <td><font color="#000000">22</font>
                                    </td>
                                </tr>
                                <tr>
                                    <td><font color="#000000">CC</font>
                                    </td>
                                    <td><font color="#000000">ABCDEFGHIJKLMN & OPQRSTUVWXYZ</font>
                                    </td>
                                </tr>
                    </td>
                    </table>
                </tr>
    
    
                <tr>
                    <td colspan="2" style="background-color: rgb(0, 102, 204);"><a href="JavaScript://" onclick="toggleDisplay(toggledDisplay['sub2'], 'sub2')"><span style="color:#FFFFFF;"><strong>Section 2 - Click to Expand / Collapse</strong></span></a>
                    </td>
                </tr>
                <tr id="sub2">
                    <td colspan="2">
                        <table border="1" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td style="width: 50%;"><font color="#000000">AA</font>
                                    </td>
                                    <td style="width: 50%;"><font color="#000000">11</font>
                                    </td>
                                </tr>
                                <tr>
                                    <td><font color="#000000">BB</font>
                                    </td>
                                    <td><font color="#000000">22</font>
                                    </td>
                                </tr>
                                <tr>
                                    <td><font color="#000000">CC</font>
                                    </td>
                                    <td><font color="#000000">ABCDEFGHIJKLMN & OPQRSTUVWXYZ</font>
                                    </td>
                                </tr>
                    </td>
                    </table>
                </tr>
    
    
                </tbody>
        </table>
        </td>
        </tr>
        </tbody>
        </table>
        <font color="#000000"> </font> 
        <script language="JavaScript" type="text/javascript">
            <!--
            toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7');
            toggleDisplay(true, 'toggleAll');
             //-->
        </script>
    </div>
    Last edited by VIPStephan; 08-15-2014 at 11:41 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. Every thread here requests help with Javascript.

    If it works offline but not when uploaded to the server, I have the idea that you are loading the wrong file, possibly because of an incorrect directory.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much Philip for pointing this out. My Mistake. The title should have been "Table not displaying correctly in expand collapse section". Could you please help me in deleting this post so I can repost it?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by phani.patil View Post
    Thanks so much Philip for pointing this out. My Mistake. The title should have been "Table not displaying correctly in expand collapse section". Could you please help me in deleting this post so I can repost it?
    You can't edit or delete your posts until you have 10 posts. You will need to ask a mod to do it. (I have made the request).

    BTW, when posting here please help us to help you by making it easier to view, copy, modify, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar.
    phani.patil likes this.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you Philip! I will remember and follow all the guidelines in my future posts. Thanks for your immediate attention on this.

    No. I have not used any file or directory in the code. I have not used the .js script file anywhere. I really don't understand the underlying cause of the issue. I am not a coding expert though. I seek your expert advice in fixing the issue. Thanks again!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I don't know what is the problem, but your code is pretty old. The <font> tag is obsolete and deprecated. <script language=javascript> is also long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). You are using <script>.
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh!!!. I didn't know that Philip . So, this is the reason, I am seeing issues when I load it to the page.
    I wanted to implement expandable collapsible table sections in my page (the way it is in the current code I have provided) because my content is very long and I want to reduce the page length by using expandable collapsible sections. Since I am not a coder and don't know coding, I just googled for the code and found this code. I just modified it to include my content and thought it will work but didn't. Any help that could be provided to achieve what I need is highly appreciated. Thank you for all your help and patience in dealing with a dumb like me

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    check your HTML

    I have corrected some of the errors

    Code:
    <meta content="en-us" http-equiv="Content-Language">
    <title></title>
    <script>
    var toggledDisplay = new Object();
    toggledDisplay['sub1'] = true;
    toggledDisplay['sub2'] = true;
    toggledDisplay['sub3'] = true;
    
    function toggleDisplay(bDisplayed) {
    if (!document.getElementById || toggleDisplay.arguments.length < 2) return;
    var displayed = new Object();
    displayed['true'] = '';
    displayed['false'] = 'none';
    for (var i = 1; i < toggleDisplay.arguments.length; i++) {
    oDisplay = document.getElementById(toggleDisplay.arguments[i]);
    if (oDisplay) {
    oDisplay.style.display = displayed[bDisplayed];
    if (bDisplayed) {
    oImages = oDisplay.getElementsByTagName('IMG');
    for (var j = 0; j < oImages.length; j++)
    oImages[j].src = oImages[j].src;
    }
    if (typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
    toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;
    }
    }
    }
    </script>
    <!--mstheme-->
    <link href="../../_themes/Lacquer/Lacq1011.css" id="onetidThemeCSS" rel="stylesheet" type="text/css">
    <meta content="Lacquer 1011, default" name="Microsoft Theme">
    <div><a href="JavaScript://" onclick="toggleDisplay(true, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Expand All</a> | <a href="JavaScript://" onclick="toggleDisplay(false, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Collapse All</a> <font color="#000000"> </font>
    <table border="1" style="width: 100%;">
    <tbody>
    <tr>
    <td colspan="2">Page Title</font>
    </td>
    </tr>
    <tr>
    <td class="rtecenter" style="width: 50%; background-color: rgb(255, 102, 0);"><span style="color:#000000;"><strong>AAA</strong></span>
    </td>
    <td class="rtecenter" style="width: 50%; background-color: rgb(255, 102, 0);"><span style="color:#000000;"><strong>BBB</strong></span>
    </td>
    </tr>
    <tr>
    <td colspan="2" style="background-color: rgb(0, 102, 204);"><a href="JavaScript://" onclick="toggleDisplay(toggledDisplay['sub1'], 'sub1')"><span style="color:#FFFFFF;"><strong>Section 1 - Click to Expand / Collapse</strong></span></a>
    </td>
    </tr>
    <tr id="sub1">
    <td colspan="2">
     <table border="1" style="width:200px;">
      <tbody>
       <tr>
        <td style="width: 50%;"><font color="#000000">AA</font>
        </td>
        <td style="width: 50%;"><font color="#000000">11</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">BB</font>
        </td>
        <td><font color="#000000">22</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">CC</font>
        </td>
        <td><font color="#000000">ABCDEFGHIJKLMN & OPQRSTUVWXYZ</font>
        </td>
       </tr>
      </tbody>
     </table>
    </td>
    </tr>
    
    
    <tr>
    <td colspan="2" style="background-color: rgb(0, 102, 204);"><a href="JavaScript://" onclick="toggleDisplay(toggledDisplay['sub2'], 'sub2')"><span style="color:#FFFFFF;"><strong>Section 2 - Click to Expand / Collapse</strong></span></a>
    </td>
    </tr>
    <tr id="sub2">
    <td colspan="2">
     <table border="1" style="width:200px;">
      <tbody>
       <tr>
        <td style="width: 50%;"><font color="#000000">AA</font>
        </td>
        <td style="width: 50%;"><font color="#000000">11</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">BB</font>
        </td>
        <td><font color="#000000">22</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">CC</font>
        </td>
        <td><font color="#000000">ABCDEFGHIJKLMN & OPQRSTUVWXYZ</font>
        </td>
       </tr>
      </tbody>
     </table>
    </td>
    </tr>
    </tbody>
    </table>
    <script language="JavaScript" type="text/javascript">
    <!--
    toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7');
    toggleDisplay(true, 'toggleAll');
    //-->
    </script>
    </div>
    </body>
    
    </html>
    as for the nested tables

    Code:
    <td colspan="2">
     <table border="1" style="width:200px;">
      <tbody>
       <tr>
        <td style="width: 50%;"><font color="#000000">AA</font>
        </td>
        <td style="width: 50%;"><font color="#000000">11</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">BB</font>
        </td>
        <td><font color="#000000">22</font>
        </td>
       </tr>
       <tr>
        <td><font color="#000000">CC</font>
        </td>
        <td><font color="#000000">ABCDEFGHIJKLMN & OPQRSTUVWXYZ</font>
        </td>
       </tr>
      </tbody>
     </table>
    </td>
    the table is nested in a TR with COLSPAN of 2
    so the table width of 100% will be the full width of the parent TR

    also do not use display='block' in tables use display-''
    phani.patil likes this.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    phani.patil (08-15-2014)

  • #9
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow!!!!!!!!!!!!!! This is great Phillips. This is awesome... The code works exactly as how i wanted it to be. Thank You sooooooooooooooooooo much. I know I cant thank you enough!!!!. Thank You Again!


  •  

    Tags for this Thread

    Posting Permissions

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