www.webdeveloper.com
Results 1 to 3 of 3

Thread: Request for help on the code

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    Request for help on the code

    Hi,

    I have a code which is not working in webpage. It works when I save the code as a html file and open in browser but when I put the code to a webpage, it does not work correctly. See below how it shows in webpage:
    Webpage Screenshot.JPG

    I want it to be displayed as below:
    screenshot.JPG

    Below is the clde I have used. Can anyone please help in fixing it. I don't know why it is not showing correctly in webpage.
    HTML 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 jedaisoul; 08-16-2014 at 12:35 PM. Reason: code tags added

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    What makes you think that what you have posted is JQuery?

    Skimming it it looks all JavaScript to me...

    When posting, it is helpful to wrap any code segments in the appropriate tags which are CODE, PHP or HTML

    eg.

    [CODE] // your code in here [/CODE]

    then outputs
    Code:
     // your code in here
    I have tried your code and it as far as I can see works fine when a few minor changes are made to the HTML like adding a <body> tag, enclosing the JavaScript and title and meta tad within the <head>...</head> of the document.

    What I think is the problem is a CSS layout issue and something that you might want to ask for help in the CSS forums.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Aug 2014
    Posts
    2
    Hi,
    Thank you for your response. I will keep your suggestions in mind when posting again. Thank you!
    My issue got resolved. There was some error in the code and it got fixed. Thanks for trying to help me o the issue!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles