C
CJM
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;
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;