CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: domcollapse

  1. 05-08-2006, 01:56 PM #1
    Bolaji
    Bolaji is offline New Comer (less than 5 posts)
    Join Date
    May 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default domcollapse

    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




    Code:
    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'>";
    Reply With Quote Reply With Quote
  2. 05-08-2006, 08:07 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    <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:

    HTML Code:
    <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:

    Code:
    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:

    Code:
    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:

    Code:
    document.getElementById('showhide').disabled=1
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 05-08-2006, 08:42 PM #3
    Twey's Avatar
    Twey
    Twey is offline Modtoreador
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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).
    Code:
    <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
    Code:
    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:
    Code:
    getItem("showhide").disabled = true;
    Last edited by Twey; 05-08-2006 at 08:52 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
    Reply With Quote Reply With Quote
  4. 05-08-2006, 10:48 PM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  5. 05-09-2006, 05:12 AM #5
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  6. 05-09-2006, 09:36 AM #6
    Twey's Avatar
    Twey
    Twey is offline Modtoreador
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Unfortunately, I've since fixed the problem on the site where it was occurring. I shall endeavour to reproduce it tonight.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules