PDA

View Full Version : domcollapse



Bolaji
05-08-2006, 01:56 PM
Please can anyone help?

I have a parent div with two other div inside the parent div. On an event trigger I want to collapse one div while the other one appear in the parent div i.e. when event1 is triggered div1 should collapse and div2 should appear in the parent div..when event2 is triggered div2 should collapse and div1 appears in the parent div..

Here is the code I am using and it is working for just one of the div....
mant thanks






function domCollapse(which){

if (document.getElementById && document.createTextNode){



if (which=="0") {domCollapseAll(1); }

else {

domCollapseAll(0);

domm=document.getElementById("menu");

trig=domm.getElementsByTagName("div").item(which).style.display;

domt=domm.getElementsByTagName("h2").item(which);

domh=domt.getElementsByTagName("a").item(0).firstChild;

if (trig=="block") trig="none";

else if (trig=="" || trig=="none") trig="block";

if (trig=="none"){

domh.nodeValue=domh.nodeValue.replace(highlighttext,normaltext);

domt.style.background=normalbackground;

domt.style.color=normalcolour;

}

else {

domh.nodeValue=domh.nodeValue.replace(normaltext,highlighttext);

domt.style.background=highlightbackground;

domt.style.color=highlightcolour;

}

domm.getElementsByTagName("div").item(which).style.display=trig;

}



if (which=="1") {domCollapseAll(1); }


else {

domCollapseAll(0);

domm=document.getElementById("menu");

trig=domm.getElementsByTagName("div").item(which).style.display;

domt=domm.getElementsByTagName("h2").item(0);

domh=domt.getElementsByTagName("a").item(0).firstChild;

if (trig=="block") trig="none";

else if (trig=="" || trig=="none") trig="block";

if (trig=="block"){

domh.nodeValue=domh.nodeValue.replace(highlighttext,normaltext);

domt.style.background=normalbackground;

domt.style.color=normalcolour;

}

else {

domh.nodeValue=domh.nodeValue.replace(normaltext,highlighttext);

domt.style.background=highlightbackground;

domt.style.color=highlightcolour;

}

domm.getElementsByTagName("div").item(which).style.display=trig;

}

}

}



/*

function domCollapseAll(show)

By Christian Heilmann



*/

function domCollapseAll(show){

if (document.getElementById && document.createTextNode){

domm=document.getElementById("menu");

for (domi=0;domi<domm.getElementsByTagName("div").length;domi++){

domt=domm.getElementsByTagName("h2").item(domi);

domh=domt.getElementsByTagName("a").item(0).firstChild;

if (show==1){

domh.nodeValue=domh.nodeValue.replace(normaltext,highlighttext);

domt.style.background=highlightbackground;

domt.style.color=highlightcolour;

domm.getElementsByTagName("div").item(domi).style.display="block";

}

else {

domh.nodeValue=domh.nodeValue.replace(highlighttext,normaltext);

domt.style.background=normalbackground;

domt.style.color=highlightcolour;

domm.getElementsByTagName("div").item(domi).style.display="none";

}

}

}

}

// Adding backwards compatibility

if (document.getElementById && document.createTextNode){

document.write('<style type="text/css">#menu div{display:none;}</style>')

}
highlightcolour="black";
highlightbackground="#CC9999";
highlighttext="<input type='checkbox'>";
normalcolour="black";
normalbackground="#CC9999";
normaltext="<input type='checkbox'>";

jscheuer1
05-08-2006, 08:07 PM
You are using extremely overly complex code or at least it appears so. With all of these definitions identical to their counterparts, all references to them are apparently meaningless:


highlightcolour="black";
highlightbackground="#CC9999";
highlighttext="<input type='checkbox'>";
normalcolour="black";
normalbackground="#CC9999";
normaltext="<input type='checkbox'>";

Simply accessing the elements' involved display property is all that is required. There are several scripts available here on DD for doing this. For simply collapsing and revealing elements with similar, numbered id's - this would suffice:


<script type="text/javascript">
function displayOne(idNum){
var idPrefix='cdiv'
var elNumber=4
for (var i=0;i<elNumber;i++)
document.getElementById? document.getElementById(idPrefix+i).style.display='none' : document.all[idPrefix+i].style.display='none';
document.getElementById? document.getElementById(idPrefix+idNum).style.display='' : document.all[idPrefix+idNum].style.display='';
}
</script>

Two variables to set (red) above:

1 ) idPrefix - the prefix id name, in this example 'cdiv' so elements like:


<div id="cdiv0"></div>

can use id's 'cdiv0', 'cdiv1', etc.

2 ) elNumber - the number of elements to act upon, if you have four of these ('cdiv0' through 'cdiv3') set it to 4 if you only have two ('cdiv0' and 'cdiv1') set it to 2.

Note: Do not set the initial display property for these elements in the stylesheet. Use either inline style or javascript (preferred). Example using javascript:


onload=function (){
var idPrefix='cdiv'
var elNumber=4
for (var i=0;i<elNumber;i++)
document.getElementById? document.getElementById(idPrefix+i).style.display='none' : document.all[idPrefix+i].style.display='none';
}

A nice touch would be to use document.write to create a style rule like so:


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

that creates a class to be applied to all of the 'cdiv#' id'ed elements so that they are all collapsed to begin with but, only in javascript enabled browsers. Then disable it once things get rolling:


document.getElementById('showhide').disabled=1

Twey
05-08-2006, 08:42 PM
You can eliminate the whole "elNumber" thing safely. Also, setting display to a blank string can cause problems (I think it was in IE; it really didn't like it).
<script type="text/javascript">
function getItem(id) {
if(document.getElementById) return document.getElementById(id);
else if(document.all) return document.all[id];
else return null;
}

var origStates = new Array();

function displayOne(idNum){
var idPrefix='cdiv';
for (var i=0;getItem(idPrefix + i);i++) {
if(!origStates[i]) origStates[i] = getItem(idPrefix + i).style.display;
getItem(idPrefix + i).style.display = "none";
}
getItem(idPrefix+idNum).style.display = origStates[idNum];
}
</script>Untested.
Note: Do not set the initial display property for these elements in the stylesheet. Use either inline style or javascript (preferred).There is no advantage in using inline style over an embedded or external stylesheet here. It should only be done in Javascript. The Javascript-created stylesheet is a good idea; however, you've limited it to getElementById(), meaning that all that careful capability checking you did earlier is useless :)
if(document.getElementById || document.all)
document.write(
'<style type="text/css" id="showhide">\n'
+ '\t.showhide{\n'
+ '\t\tdisplay:none;\n'
+ '\t}\n'
+ '</style>\n'
);
And:
getItem("showhide").disabled = true;

jscheuer1
05-08-2006, 10:48 PM
setting display to a blank string can cause problems (I think it was in IE; it really didn't like it)

There is no advantage in using inline style over an embedded or external stylesheet here.

As for the first part, I've never seen a problem if it is done correctly and with forethought, certainly not in IE. I'm always open to examples to the contrary though. The big advantage is that the element will return to its native display property, be that inline, table-cell, table-row or whatever of the various special categories that many browsers use. You can set a display property in the stylesheet if that is the value you want it to return to when javascript sets it to an empty string.

Which brings us to the second part. If you set an element's display property in a stylesheet of any type, setting it in javascript to an empty string will revert it to what it was set to in the stylesheet. This also explains the (not required but, nice touch) use of a (later) disabled stylesheet originally created by javascript to have the page start with all items collapsed only for javascript enabled browsers. This makes the content accessible to all, while at the same time preventing the 'jump' on page load as the items get initially hidden.

jscheuer1
05-09-2006, 05:12 AM
Well, I was in a rush when I posted that last response. I really like your getItem function, I should have mentioned that. I also liked an idea from another thread on this general idea where Mike suggested that the expandable/collapsible content be given names as well so that non-javascript enabled browsers could navigate to the content. I added a return for non-javascript browsers, here is a fairly well tested demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:350px;
}
</style>
<script type="text/javascript">

var disStyle=0
var dom=document.getElementById||document.all

function getItem(id) {
return document.getElementById&&document.getElementById(id)? document.getElementById(id) : document.all&&document.all[id]? document.all[id] : null;
}

if(dom)
document.write('<style type="text/css" id="dummy">\
.tlink{\
display:none;\
}\
</style>')

if(dom&&typeof getItem('dummy').disabled=='boolean'){
document.write('<style type="text/css" id="showhide">\
.showhide{\
display:none;\
}\
</style>');
disStyle=1;
}

function displayOne(idPrefix, idNum){
var i=0;
while (getItem(idPrefix+i)!==null){
getItem(idPrefix+i).style.display='none';
i++;
}
if (typeof idNum!=='undefined')
getItem(idPrefix+idNum).style.display='';
}

onload=function(){
displayOne('cdiv');
if (disStyle)
getItem('showhide').disabled=true;
}
</script>
</head>
<body>
<a href="#cdiv0" onclick="displayOne('cdiv', 0);return false;">See text</a>
<a href="#cdiv1" onclick="displayOne('cdiv', 1);return false;">See more text</a>
<a href="#cdiv2" onclick="displayOne('cdiv', 2);return false;">See something</a>
<a href="#cdiv3" onclick="displayOne('cdiv', 3);return false;">See hey</a>
<div id="container"><div class="showhide" id="cdiv0" name="cdiv0">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv1" name="cdiv1">More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text More Text <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv2" name="cdiv2">Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv3" name="cdiv3">Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! Hey! <a class="tlink" href="#">[Top]</a><br>&nbsp;</div></div>

</body>
</html>

Twey
05-09-2006, 09:36 AM
Unfortunately, I've since fixed the problem on the site where it was occurring. I shall endeavour to reproduce it tonight.