Problem with Collapsing List Script

Discussion in 'Javascript' started by CJM, Nov 20, 2007.

  1. CJM

    CJM Guest

    I'm trying to update an existing website - I'm adding an FAQ page with
    collapsing lists.

    I've found a script that does pretty much what I want, and after testing in
    isolation, my page seemed fine:
    http://new.eminox.com/emissions/lezfaq2.shtml

    But when I embed the code in the website framework, the script doesn't work
    as intended: http://new.eminox.com/emissions/lezfaq.shtml

    As you can see, the list doesn't collapse, the Expand All/Collapse All
    buttons are missing and the list doesn't even expand/collapse manually - my
    browser is not indicating a script error, so I assume that the script simply
    isn't running.

    In the Body onload event calls the posRel() function, which places the
    footer bar on the page. If I omit this, the footer obviously disappears, but
    the collapsing list script works fine (see the lezfaq2.shtml page above). At
    first I wondered if some part of posRel() was clashing with the other script
    but removing the contents of the script doesn't fix the problem - if any
    script is called from the onload attribute of the Body tag, the other script
    fails to run.

    It appears the the collapsing list script runs at window.onload. I'm afraid
    my knowledge of javascript is so poor that this implications of this are
    lost on me. One assumes that Body.onload and window.onload are probably
    different, but what are the implications of this?

    I'm hoping that one of you javascript gurus will have a simple solution for
    me. I'm guessing that there will be a way to call both scripts at an
    appropriate time without clashing.

    Thanks in advance.

    Chris

    Snippets:

    HTML -

    <html>
    <head>
    <script language="JavaScript" type="text/javascript"
    src="/_lib.js/lib.nav.js"></script>
    <link href="/_lib.js/listexpander/listexpander.css" rel="stylesheet"
    type="text/css" media="screen" />
    <script type="text/javascript"
    src="/_lib.js/listexpander/listexpander.js"></script>
    </head>

    <body onload="posRel();">
    ....etc...


    listexpander.js -

    this.listexpander = function(){

    // edit

    var expandTo = 1; // level up to which you want your lists to be initially
    expanded. 1 is minimum
    var expandText = "Expand All"; // text for expand all button
    var collapseText = "Collapse All"; // text for collapse all button
    var listClass = "listexpander" // class name that you want to assign to
    list(s). If you wish to change it make sure to update the css file as well

    // end edit (do not edit below this line)

    this.start = function(){
    var ul = document.getElementsByTagName("ul");
    for (var i=0;i<ul.length;i++){
    if(ul.className == listClass){
    create(ul);
    buttons(ul)
    };
    };
    };

    this.create = function(list) {
    var items = list.getElementsByTagName("li");
    for(var i=0;i<items.length;i++){
    listItem(items);
    };
    };

    this.listItem = function(li){
    if(li.getElementsByTagName("ul").length > 0){
    var ul = li.getElementsByTagName("ul")[0];
    ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
    li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
    li.over = true;
    ul.onmouseover = function(){li.over = false;}
    ul.onmouseout = function(){li.over = true;}
    li.onclick = function(){
    if(this.over){
    ul.style.display = (ul.style.display == "none") ? "block" : "none";
    this.className = (ul.style.display == "none") ? "collapsed" :
    "expanded";
    };
    };
    };
    };

    this.buttons = function(list){
    var parent = list.parentNode;
    var p = document.createElement("p");
    p.className = listClass;
    var a = document.createElement("a");
    a.innerHTML = expandText;
    a.onclick = function(){expand(list)};
    p.appendChild(a);
    var a = document.createElement("a");
    a.innerHTML = collapseText;
    a.onclick = function(){collapse(list)};
    p.appendChild(a);
    parent.insertBefore(p,list);
    };

    this.expand = function(list){
    li = list.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
    if(li.getElementsByTagName("ul").length > 0){
    var ul = li.getElementsByTagName("ul")[0];
    ul.style.display = "block";
    li.className = "expanded";
    };
    };
    };

    this.collapse = function(list){
    li = list.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
    if(li.getElementsByTagName("ul").length > 0){
    var ul = li.getElementsByTagName("ul")[0];
    ul.style.display = "none";
    li.className = "collapsed";
    };
    };
    };

    this.depth = function(obj){
    var level = 1;
    while(obj.parentNode.className != listClass){
    if (obj.tagName == "UL") level++;
    obj = obj.parentNode;
    };
    return level;
    };

    start();

    };

    window.onload = listexpander;
    CJM, Nov 20, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    956
    Dave Pollum
    Mar 17, 2006
  2. PJ6
    Replies:
    2
    Views:
    733
  3. Simon Harvey

    A collapsing panel in a datagrid/gridview

    Simon Harvey, Dec 1, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    6,437
    Trevor Bezotte
    Dec 1, 2005
  4. sgane
    Replies:
    2
    Views:
    3,151
    sgane
    Oct 10, 2004
  5. Jeremy Bowers

    "Collapsing" a list into a list of changes

    Jeremy Bowers, Feb 4, 2005, in forum: Python
    Replies:
    42
    Views:
    828
    Raymond Hettinger
    Feb 9, 2005
Loading...

Share This Page