...

View Full Version : Expand/collapse dynamic table issue



Dioncecht
10-20-2005, 09:49 PM
I have bit of PHP that creates tables on the fly. I found a bit of javascript that works on static tables, but not very well with 'on the fly' tables. It works to the point where the expand/collapse link works on only the first table on the page. For example, 4 tables will be created when the page compiles. If I try to use the expand collapse thing on table 4, it will only affect the first table.. same with the second and third tables.

Is there a way to make all this code dynamic? Maybe make the ID dynamic or a different way other than document.getElementById? Here is all the code

In the head

<script type="text/javascript">

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.


if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

this is in the Title of the table

<a href onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>

abnd this is in the text area of the table

<table width="100%" cellpadding="2" cellspacing="0" border="0" id="sc1" class="switchcontent" style="display:block">

I don't know java. I found this code at soem free javascripts site, but I assume document.getElementById is not the right syntax to use in this instance. Any ideas on how I can makew this work on each table independently?

Lerura
10-20-2005, 10:28 PM
the syntax is
document.getElementById('ID')

Dioncecht
10-21-2005, 12:00 AM
I added the ('ID') and it is still only affecting the first table.

Dioncecht
10-24-2005, 02:50 PM
Any ideas on this?

Lerura
10-24-2005, 05:11 PM
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}


the placement of this "if" does that it is only run once while the page is loading


if (document.getElementById)tests if the browser understands document.getElementById.


if (document.getElementById('ID'))tests if there is a tag with id="ID" and that is false since there nothing is loaded sofar

but post your full page coding and I might be able to help you

Dioncecht
10-24-2005, 08:19 PM
well.. actually several pages make up the one page.. but here is the URL of the page I am working on..

http://www.rpghq.org/phpbbext/

and it is under the PowerMetal style.

Here are the relevent pages where I placed code

This is where the code for the head is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- mod : Loewen Enterprise - PAYPAL IPN REG / SUBSCRIPTION - GROUP -->
<html dir="{S_CONTENT_DIRECTION}">

<head>

<style type="text/css">

.showstate{ /*Definition for state toggling image */
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}

.headers{
width: 400px;
font-size: 120%;
font-weight: bold;
border: 1px solid black;
background-color: lightyellow;
}

.switchcontent{
width: 400px;
border: 1px solid black;
border-top-width: 0;
}

</style>

<script type="text/javascript">

/***********************************************
* Switch Content script II- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7" //persistence in # of days

var contractsymbol='minus.gif' //Path to image to represent contract state.
var expandsymbol='plus.gif' //Path to image to represent expand state.

/////No need to edit beyond here //////////////////////////

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}


function expandcontent(curobj, cid){
if (ccollect.length>0){
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="none")? "none" : ""
curobj.src=(document.getElementById(cid).style.display=="none")? expandsymbol : contractsymbol
}
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="none"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie(window.location.pathname)!=selectedItem){ //only update cookie if current states differ from cookie's
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>{SITENAME} - {PAGE_TITLE}</title></head><body ONLOAD="preloadImages();">{META_TAGS}
{META}
{NAV_LINKS}

<link rel="stylesheet" href="templates/PowerMetal/{T_HEAD_STYLESHEET}" type="text/css" />
<script language="JavaScript" type="text/javascript" src="templates/toggle_display.js"></script>
<link rel="shortcut icon" href="./favicon.ico">
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
<!-- Start add - No copy MOD -->
<script language="javascript"> <!--
var previous_key ;

function clickIE4(){
if (event.button==2){
alert('{L_NO_CLICK}');
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert('{L_NO_CLICK}');
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
function handleKeyDown()
{
if (previous_key==17 )
{
switch (window.event.keyCode)
{
case 45 :
case 46:
case 67:
case 88:
alert('{L_NO_COPY}');
event.keyCode=0;
previous_key=window.event.keyCode;
event.returnValue=false;
break;
}
} else if (previous_key==16)
{
switch (window.event.keyCode)
{
case 45 :
case 46:
alert('{L_NO_COPY}'+window.event.keyCode);
event.keyCode=0;
previous_key=window.event.keyCode;
event.returnValue=false;
break;
}
}
previous_key=window.event.keyCode;
}
function handleKeyUp()
{
previous_key=0;
}

if ( {USER_EXTRA} )
{
document.oncontextmenu=new Function("alert('{L_NO_CLICK}');return false")
document.onkeyup = handleKeyUp;
document.onkeydown = handleKeyDown;
}
//-->
</script>
<!-- End add - No copy MOD -->
<!-- BEGIN birthday_popup -->
<script language="Javascript" type="text/javascript">
<!--
window.open('{birthday_popup.U_BIRTHDAY_POPUP}', '_phpbbbirthday', 'HEIGHT=225,resizable=yes,WIDTH=400');
//-->
</script>
<!-- END birthday_popup -->
<script language="JavaScript" type="text/javascript">
<!--
function tour() {
window.open("tour.php", "_tour", "width=800,height=600,scrollbars,resizable=yes");
}
//-->
</script>
<script language="JavaScript" type="text/javascript" src="templates/mouseover.js"></script>
<!-- Prillian - Begin Code Additions -->
<!-- BEGIN switch_user_logged_in -->
<script language="JavaScript" type="text/javascript">
<!--
function prill_launch(url, w, h)
{
window.name = 'phpbbmain';
prillian = window.open(url, 'prillian', 'height=' + h + ', width=' + w + ', innerWidth=' + w + ', innerHeight=' + h + ', resizable, scrollbars');
}
if ( {IM_AUTO_POPUP} )
{
prill_launch('{U_IM_LAUNCH}', '{IM_WIDTH}', '{IM_HEIGHT}');
}
//-->
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN buddy_alert -->
<script language="Javascript" type="text/javascript">
if ( {buddy_alert.BUDDY_ALERT} )
{
window.open('{buddy_alert.U_BUDDY_ALERT}', '_buddyalert', 'HEIGHT=225,resizable=yes,WIDTH=400');
}
</script>
<!-- END buddy_alert -->
<!-- Prillian - End Code Additions -->



<!-- BEGIN switch_board_disabled -->
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="forumline" align="center"><span class="alert"><b>{L_BOARD_DISABLE}</b></span></td>
</tr>
</table>
<!-- END switch_board_disabled -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
rate_over = newImage("templates/PowerMetal/images/lang_english/icon_pa_rate_hover.gif");
email_over = newImage("templates/PowerMetal/images/lang_english/icon_pa_email_hover.gif");
download_over = newImage("templates/PowerMetal/images/lang_english/icon_pa_download_hover.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>

<!-- Start add - Complete banner MOD -->
<!-- Banners -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<!-- BEGIN switch_banner_1 -->
<tr><td><div align="center">{BANNER_1_IMG}</div></td></tr>
<!-- END switch_banner_1 -->
<!-- BEGIN switch_banner_2 -->
<tr><td><div align="center">{BANNER_2_IMG}</div></td></tr>
<!-- END switch_banner_2 -->
</table>
</td>
<td width="60%">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<!-- BEGIN switch_banner_3 -->
<tr><td><div align="center">{BANNER_3_IMG}</div></td></tr>
<!-- END switch_banner_3 -->
<!-- BEGIN switch_banner_4 -->
<tr><td><div align="center">{BANNER_4_IMG}</div></td></tr>
<!-- END switch_banner_4 -->
</table>
</td>
<td width="20%">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<!-- BEGIN switch_banner_5 -->
<tr><td><div align="center">{BANNER_5_IMG}</div></td></tr>
<!-- END switch_banner_5 -->
<!-- BEGIN switch_banner_6 -->
<tr><td><div align="center">{BANNER_6_IMG}</div></td></tr>
<!-- END switch_banner_6 -->
</table>
</td>
</tr>
</table>
<!-- End Banners -->
<!-- End add - Complete banner MOD -->

<a name="top" id="top"></a>
<table class="bodyline" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
{QBARS}
<br />
<table width="90%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td><img src="templates/PowerMetal/images/logo_L.gif"WIDTH="16" HEIGHT="124" border="0" alt=""></td>
<td><a href="{U_PORTAL}"><img src="templates/PowerMetal/images/logo_blank.gif" border="0" alt="{L_INDEX}" title="{L_INDEX}" width="500" height="124" /></a></td>
<!-- Start add - Complete banner MOD -->
<!-- End add - Complete banner MOD -->
<td width="100%" valign="top" background="templates/PowerMetal/images/logo_M.gif">
<td align="right"><img src="templates/PowerMetal/images/logo_R.gif" width="97" height="124" border="0"></td></table></td>
</tr>
</table>
<table width="90%" border="0" cellpadding="0" cellspacing="0" align="center">
{QMENUS}
<td align="right"><img src="templates/PowerMetal/images/nav_R.gif" WIDTH="16" HEIGHT="39" border="0" alt=""></td>
</tr></table><br />

{CALENDAR_BOX}
<!-- BEGIN switch_banner_16 -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="100%" align="center">{BANNER_16_IMG}</td>
</tr>
</table>
<!-- END switch_banner_16 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN switch_portal_header -->
<tr>
<td width="10">&nbsp;</td>
<td width="{HEADER_WIDTH}" valign="top">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width>&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<!-- END switch_portal_header -->
<!-- BEGIN switch_portal_tail -->
<tr>
<td width="10">&nbsp;</td>
<td width>&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="{FOOTER_WIDTH}" valign="top">&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<!-- END switch_portal_tail -->
<!-- BEGIN switch_portal_both -->
<tr>
<td width="10">&nbsp;</td>
<td width="{HEADER_WIDTH}" valign="top">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width>&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="{FOOTER_WIDTH}" valign="top">&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<!-- END switch_portal_both -->
<tr>
{PORTAL_HEADER}
<td width="10"><img src="images/spacer.gif" alt="" width="10" /></td>
<td valign="top">


and this is the code for the body

<div><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>

<td width="2"><img src="images/spacer.gif" alt="" width="2" /></td>
<td width="{HEADER_WIDTH}" valign="top">

<!-- BEGIN header_blocks_row -->
<DIV>
<table class="blk" border="0" cellpadding="0" cellspacing="0" width="100%" height="25">
<!-- BEGIN title -->
<tr>
<td height="5"><img name="blkl" src="templates/PowerMetal/images/blk_tlc.gif"WIDTH=8 HEIGHT=23 border="0" alt=""></td>
<td width="100%" background="templates/PowerMetal/images/blk_tm.gif" height="5"><img name="blkm" src="templates/PowerMetal/images/spacer.gif" width="1" height="1" border="0" alt=""><span class="genblock">
</span>
<a href onClick="expandcontent(this, 'sc1(0)')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>
{header_blocks_row.title.TITLE}</a></td>
<td height="5"><img name="blkr" src="templates/PowerMetal/images/blk_trc.gif" WIDTH=77 HEIGHT=23 border="0" alt=""></td>
</tr>
<!-- END title -->
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" valign=Top">
<!-- BEGIN border -->
<tr>
<td><img name="tlc" src="templates/PowerMetal/images/tlc.gif" WIDTH=8 HEIGHT=6 border="0" alt=""></td>
<td width="100%" background="templates/PowerMetal/images/tm.gif"><img name="tm" src="templates/PowerMetal/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td><img name="trc" src="templates/PowerMetal/images/trc.gif" WIDTH=8 HEIGHT=6 border="0" alt=""></td>
</tr>
<tr>
<td background="templates/PowerMetal/images/left.gif"><img name="left" src="templates/PowerMetal/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<!-- END border -->
<td valign="top">
<table width="100%" cellpadding="2" cellspacing="0" border="0" ID="sc1(0)" class="switchcontent" style="display:block">

<tr> <td
>
{header_blocks_row.OUTPUT}</td> </tr>
</table>
</td>
<!-- BEGIN border -->
<td background="templates/PowerMetal/images/right.gif"><img name="right" src="templates/PowerMetal/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td><img name="blc" src="templates/PowerMetal/images/blc.gif" WIDTH=8 HEIGHT=8 border="0" alt=""></td>
<td background="templates/PowerMetal/images/btm.gif"><img name="btm" src="templates/PowerMetal/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td><img name="brc" src="templates/PowerMetal/images/brc.gif" WIDTH=8 HEIGHT=8 border="0" alt=""></td>
</tr>
<!-- END border -->
</table></DIV><br />
<!-- END header_blocks_row -->
</td>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum