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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Toggle control with dual function

    Hi Guys,

    I have a Javascript function that toggles a 'show/hide' table row:

    //CONTROL
    Code:
    <a href="#" onclick="toggle('ROW 1, this)"><img src="../../Images/plus.gif" border="0" /></a>
    //JAVASCRIPT
    Code:
    function toggle(id, obj) {
       var matchingElements = new Array();
       
       if (document.getElementsByClassName) {
          matchingElements = document.getElementsByClassName(id);
       } else {
          var elements = document.getElementsByTagName("tr");
          for (i = 0; i < elements.length; i++) {
             if (elements[i].className == id) {
                matchingElements[matchingElements.length] = elements[i];
             }
          }
       }
       
        for (i = 0; i < matchingElements.length; i++) {
          toggleDisplay(matchingElements[i], obj);
       }
    }
    
    function toggleDisplay(element, obj) {
       if (element.style.display == "none") {
          element.style.display = "block";
          obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
       } else {
          element.style.display = "none";
          obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
       }
    }
    Which works fine, but what I need is something like this:

    Control 1:
    Toggle - ROW 1 (+ Close ROW 2 (if visible))

    Control 2:
    Toggle - ROW 2

    Is this a Javascript or PHP issue?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Do you really mean *individual* <tr> rows???

    If so, we ought to dump that overly complex code and just use ID's in the rows.

    Oh...and it's clearly JavaScript. If you used PHP you'd have to go back to the server for a whole new page each time you changed anything.

    If you could show some of your HTML, it would be helpful.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi, thanks for the reply. Hopefully this will give you an idea of what I'm after:

    // PHP CODE:
    Code:
    <?php
          $previousProject = '';
    	  $previousMonth ='';
    	  if ($totalRows_rsInvPending > 0) {
          // Show if recordset not empty
          do {
          if ($previousProject != $row_rsInvPending['projid']) {
    	  // for every Project, show the Project ID
    	  if ($previousMonth != $row_rsInvPending['themonth']) {
          // for every Month, show the Month Name
    	  ?>
          <tr>
        <td class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1<?php echo $row_rsInvPending['themonth'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;<?php echo $row_rsInvPending['theyear'] ?>&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['themonth'] ?></em></span></td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
          </tr>
        <?php $previousMonth = $row_rsInvPending['themonth']; } ?>
        <tr class="month1<?php echo $row_rsInvPending['themonth'] ?>" style="display:none">
        <td class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;<?php echo $row_rsInvPending['projid'] ?>&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        </tr>
        <?php $previousProject = $row_rsInvPending['projid']; } ?>
        <tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none">
            <td><?php echo $row_rsInvPending['jobname']; ?></td>
            <td><?php echo $row_rsInvPending['projtype']; ?></td>
            <td><?php echo $row_rsInvPending['langtname']; ?></td>
            <td><?php echo $row_rsInvPending['translator']; ?></td>
            <td><div align="right"><?php echo $row_rsInvPending['analysis_total']; ?></div></td>
            <td><div align="right"><?php echo $row_rsInvPending['analysis_full']; ?></div></td>
            <td><div align="right"><?php echo $row_rsInvPending['analysis_fuzzy']; ?></div></td>
            <td><div align="right"><?php echo $row_rsInvPending['analysis_proof']; ?></div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$<?php }?>
                <?php echo number_format($row_rsInvPending['pricegross'], 1, '.', '').'0'; ?></div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$<?php }?>
                <?php echo number_format($row_rsInvPending['pricediscount'], 1, '.', '').'0'; ?></div></td>
            <td><div align="right"><?php echo $row_rsInvPending['doctypename']; ?></div></td>
            <td><div align="right"><?php echo $row_rsInvPending['jobpages']; ?></div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsInvPending['typesettingcost'] == 'NA') { ?>NA<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€&nbsp;<?php echo number_format($row_rsInvPending['typesettingcost'], 1, '.', '').'0'; ?><?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£&nbsp;<?php echo number_format($row_rsInvPending['typesettingcost'], 1, '.', '').'0'; ?><?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$&nbsp;<?php echo number_format($row_rsInvPending['typesettingcost'], 1, '.', '').'0'; ?><?php }?>
            </div></td>
            <td><div align="right">
                <?php
    			if ($row_rsInvPending['proofreadingcost'] == NULL) { ?>NA<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€&nbsp;<?php echo number_format($row_rsInvPending['proofreadingcost'], 1, '.', '').'0'; ?><?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£&nbsp;<?php echo number_format($row_rsInvPending['proofreadingcost'], 1, '.', '').'0'; ?><?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$&nbsp;<?php echo number_format($row_rsInvPending['proofreadingcost'], 1, '.', '').'0'; ?><?php }?>
            </div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$&nbsp;<?php }?>
                <?php 
    			$pricenet_total = ($row_rsInvPending['pricenet']+$row_rsInvPending['typesettingcost']+$row_rsInvPending['proofreadingcost']);
    			echo number_format($pricenet_total, 1, '.', '').'0'; ?>
            </div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$&nbsp;<?php }?>
                <input type='text' name='translatorcharge[]' id="count" class='price' value="<?php echo $row_rsInvPending['jobtranslatorcharge'];?>"/>
            </div></td>
            <td><div align="right">
                <?php 
    			if ($row_rsCustomer['custcurrency'] == 'Euros') { ?>€&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'Pound Sterling') { ?>£&nbsp;<?php }
    			else if ($row_rsCustomer['custcurrency'] == 'US Dollars') { ?>$&nbsp;<?php }?>
              <?php
    		  $profit = (($row_rsInvPending['pricenet']+$row_rsInvPending['typesettingcost']+$row_rsInvPending['proofreadingcost'])-$row_rsInvPending['jobtranslatorcharge']);
    		  echo number_format($profit, 1, '.', '').'0'; ?>
              </div>
            <td><div align="right">
                <?php
    			$profit_percentage = ($profit)/($pricenet_total)*100;
    			if ($profit_percentage <= '30') { ?><span class="redBold"><?php } 
    			else { ?><span class="greenBold"><?php }?>
                <?php echo number_format($profit_percentage, 2, '.', '');?> %</span></div></td>
          </tr>
          <?php
    		$table_name = $row_rsInvPending['fromtable'];
            $item_id = $row_rsInvPending['jobid'];
    		?>
          <input type="hidden" name="jobinvsent[]" value="<?php echo $table_name; ?>:<?php echo $item_id; ?>:<?php echo $_POST['translatorcharge']; ?>" />
    	  <?php } while ($row_rsInvPending = mysql_fetch_assoc($rsInvPending)); ?>
    	  <?php } // Show if recordset not empty ?>
    //HTML CODE
    Code:
    <table border="0" cellpadding="0" cellspacing="0" id="tblreport_invoice">
        <caption>
        <img src="../../Images/invoicing.jpg" border="0"/><img src="../../Images/export_excel.jpg" class="hover" border="0" onclick="ExportToExcel()"/>
        <input type="submit" id="button" class="update" onclick="tmt_confirm('Are%20you%20sure%20you%20want%20to%20update%20the%20Translator%20Charges%20for%20jobs?');return document.MM_returnValue" value="" />
        </caption>
        <tr>
          <th>Job Title</th>
          <th>Type</th>
          <th>Language</th>
          <th>Translator</th>
          <th>Customer Contact</th>
          <th>Words Gross</th>
          <th>Words Net</th>
          <th>Document Format</th>
          <th>Pages</th>
          <th>EN Proofreading</th>
        </tr>
            <tr class="proj1" style="display:none">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>        </td>
          </tr>
                <input type="hidden" name="jobinvsent[]" value="::" />
    	        <tr>
        <td class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1November', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;2009&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em>November</em></span></td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
          </tr>
                <tr class="month1November" style="display:none">
        <td class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj13541', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;3541&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em>Administrator FOC French corrections (relating to 3308)</em></span></td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
          </tr>
              <tr class="proj13541" style="display:none">
            <td>TEST</td>
            <td>XML</td>
            <td>GR</td>
            <td></td>
            <td>Michael Risse</td>
            <td>700</td>
            <td>400</td>
            <td>XML</td>
            <td>9</td>
            <td><span class="redBold">No</span>        </td>
          </tr>
                <input type="hidden" name="jobinvsent[]" value="tbl_jobxml:83:" />
    	        <tr>
        <td class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1October', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;2009&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em>October</em></span></td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
        <td class="highlight">&nbsp;</td>
          </tr>
                <tr class="month1October" style="display:none">
        <td class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj13595', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;3595&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em>SBB 751-1001</em></span></td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
        <td class="highlight1">&nbsp;</td>
          </tr>
              <tr class="proj13595" style="display:none">
            <td>SBB 751-1001</td>
            <td>XML</td>
            <td>SV</td>
            <td>Graeme Lorimer</td>
            <td>Andrea Uhlendorff</td>
            <td>280</td>
            <td>220</td>
            <td>InDesign CS4</td>
            <td>10</td>
            <td><span class="redBold">No</span>        </td>
          </tr>
                <input type="hidden" name="jobinvsent[]" value="tbl_jobs:103:" />
    	      <tr class="proj13595" style="display:none">
            <td>wer</td>
            <td>XML</td>
            <td>ET</td>
            <td></td>
            <td>Andrea Uhlendorff</td>
            <td>280</td>
            <td>220</td>
            <td>XML</td>
            <td>6</td>
            <td><span class="redBold">No</span>        </td>
          </tr>
                <input type="hidden" name="jobinvsent[]" value="tbl_jobxml:84:" />
    	  	      <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><span class="blueBold">Totals</span></td>
          <td><span class="blueBold">1260</span></td>
          <td><span class="blueBold">840</span></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    // HTML SCREENSHOT


    // REQUIRED
    Control 1:
    Toggle - ROW 1 (+ Close ROW 2 (if visible))

    Control 2:
    Toggle - ROW 2
    Last edited by koolsamule; 12-04-2009 at 01:12 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Won't you also have more rows below the "Control 2" rows???

    That is, sub-sub-levels?

    And could you have more than one "Control 2" row per each "Control 1"???

    That is, could the page look like this:
    Code:
    Cars
         Ford
              Mustang
              Edsel
         Toyota
              Camry
              Corona
    Food
         Vegetables
              Carrots
              Rutabagas
         Fruit
              Apples
              Bananas
    ????

    And so the display starts out looking like just
    Code:
    Cars
    Food
    The user clicks on (say) Food and now it looks like
    Code:
    Cars
    Food
         Vegetables
         Fruit
    Then they click on Fruit and see
    Code:
    Cars
    Food
         Vegetables
         Fruit
              Apples
              Bananas
    And now what you are saying is that if they click on "Food" then the display goes BACK to just
    Code:
    Cars
    Food
    ???

    What happens if they click on "Food" *AGAIN*????

    Do you want them to see
    Code:
    Cars
    Food
         Vegetables
         Fruit
    or do you want it to remember the settings for Food and show
    Code:
    Cars
    Food
         Vegetables
         Fruit
              Apples
              Bananas
    ????

    See? We need SPECIFIC details.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey man, thanks for the reply. I had trouble trying to get my problem across, but you've hit the nail on the head....
    Won't you also have more rows below the "Control 2" rows???
    That is, sub-sub-levels?
    And could you have more than one "Control 2" row per each "Control 1"???
    Yes!

    As for the functionality, this is basically what I'm after . . . .

    // Start
    Code:
    Cars
    Food
    // Click on Food
    Code:
    Cars
    Food
         Vegetables
         Fruit
    // Click on Fruit
    Code:
    Cars
    Food
         Vegetables
         Fruit
              Apples
              Bananas
    // Click on Food
    Code:
    Cars
    Food
    // Click on Food (Again)
    Code:
    Cars
    Food
         Vegetables
         Fruit

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey chaps, can anyone help me on this problem?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Okay...try this:
    Code:
    <html>
    <head>
    <title>Row-Based Tree</title>
    <script type="text/javascript">
    function SetUp( )
    {
        var trs = document.getElementById("TreeTable").getElementsByTagName("tr");
        for ( var t = 0; t < trs.length; ++t )
        {
            var tr = trs[t];
            if ( tr.className == "level1" || tr.className == "level2" )
            {
                tr.onclick = function() { toggleLevel(this); }
            }
        }
    }
    
    function toggleLevel( clicktr )
    {
        var curLevel = parseInt( clicktr.className.substring(5) ); // number after "level"
        var nextLevel = curLevel + 1;
        var onOff = clicktr.style.color != "#000000";
        clicktr.style.color = onOff ? "#000000" : "#000001";
    
        var startAt = 0;
        var t;
        var trs = document.getElementById("TreeTable").getElementsByTagName("tr");
        // find first row after the clicked on row:
        for ( t = 0; t < trs.length; ++t )
        {
            if ( trs[t] == clicktr )
            {
                startAt = t+1;
                break; // out of the for
            }
        }
        for ( t = startAt; t < trs.length; ++t )
        {
            var tr = trs[t];
            var rowlevel = parseInt( tr.className.substring(5) );
    
            // quit when he hit another row at same level or above
            if ( rowlevel <= curLevel ) break;
    
            if ( onOff )
            {
                // only turn on rows that are directly under the clicked on one:
                if ( rowlevel == nextLevel ) tr.style.display = "block";
            } else {
                // but turn *off* all rows
                tr.style.display = "none";
                tr.style.color = "#000000";
            }
        }
        
    }
    </script>
    <style type="text/css">
    tr
    {
        color: #000000; 
    }
    tr.level1, tr.level2
    {
        cursor: pointer;
    }
    tr.level2, tr.level3 
    {
        display: none;
    }
    tr.level2 td
    {
        padding-left: 30px;
    }
    tr.level3 td
    {
        padding-left: 60px;
    }
    </style>
    </head>
    <body onload="SetUp();">
    <table id="TreeTable">
    <tr class="level1"><td>Cars</td></tr>
    <tr class="level2"><td>Ford</td></tr>
    <tr class="level3"><td>Mustang</td></tr>
    <tr class="level3"><td>Edsel</td></tr>
    <tr class="level2"><td>Toyota</td></tr>
    <tr class="level3"><td>Camry</td></tr>
    <tr class="level3"><td>Corolla</td></tr>
    <tr class="level1"><td>Food</td></tr>
    <tr class="level2"><td>Vegetables</td></tr>
    <tr class="level3"><td>Carrots</td></tr>
    <tr class="level3"><td>Rutabagas</td></tr>
    <tr class="level2"><td>Fruit</td></tr>
    <tr class="level3"><td>Apples</td></tr>
    <tr class="level3"><td>Bananas</td></tr>
    </table>
    </body>
    </html>
    There's one trick in there: I use the *color* of an "open" element to tell me that it is indeed open. So the ordinary color is #000000 (black), but if the element is open (that is, if it is showing its subordinate rows) then I change the color to #000001 (which is indistinguishable from black to the human eye). There were other ways to have done this (including actually looking at the next row to see if was displayed or not), but this was a simple to use hack that worked well, so you got it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    koolsamule (12-15-2009)

  • #8
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Fantastic! . . .thanks for getting back to me, you've sorted it! Your help is very much appreciated. Cheers


  •  

    Posting Permissions

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