...

View Full Version : Toggle control with dual function



koolsamule
12-03-2009, 02:19 PM
Hi Guys,

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

//CONTROL

<a href="#" onclick="toggle('ROW 1, this)"><img src="../../Images/plus.gif" border="0" /></a>

//JAVASCRIPT

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?

Old Pedant
12-03-2009, 10:49 PM
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.

koolsamule
12-04-2009, 10:28 AM
Hi, thanks for the reply. Hopefully this will give you an idea of what I'm after:

// PHP 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

<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
http://www.balthasar.co.uk/transfer/screenshot.jpg

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

Control 2:
Toggle - ROW 2

Old Pedant
12-05-2009, 04:17 AM
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:


Cars
Ford
Mustang
Edsel
Toyota
Camry
Corona
Food
Vegetables
Carrots
Rutabagas
Fruit
Apples
Bananas

????

And so the display starts out looking like just

Cars
Food
The user clicks on (say) Food and now it looks like

Cars
Food
Vegetables
Fruit
Then they click on Fruit and see

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

Cars
Food???

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

Do you want them to see


Cars
Food
Vegetables
Fruit
or do you want it to remember the settings for Food and show


Cars
Food
Vegetables
Fruit
Apples
Bananas

????

See? We need SPECIFIC details.

koolsamule
12-07-2009, 12:52 PM
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

Cars
Food
// Click on Food

Cars
Food
Vegetables
Fruit
// Click on Fruit

Cars
Food
Vegetables
Fruit
Apples
Bananas
// Click on Food

Cars
Food
// Click on Food (Again)

Cars
Food
Vegetables
Fruit

koolsamule
12-11-2009, 01:18 PM
Hey chaps, can anyone help me on this problem?

Old Pedant
12-14-2009, 11:59 PM
Okay...try this:


<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.

koolsamule
12-15-2009, 11:07 AM
Fantastic! . . .thanks for getting back to me, you've sorted it! Your help is very much appreciated. Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum