PDA

View Full Version : Listexpander menu has a conflict with the select menu



Gust
07-06-2009, 01:55 PM
Visit this page (http://www.gazelleworldwave.be/tours/probleemmenu.php). This is a short version, maded for illustrated my problem

You see an UL-LI menu. I you clicked on that menu, the menu goes open.
But there is a conflict with the select menu. If you choose an item in the select menu, the whole UL-LI menu closed hisself.

I think, the reason of the conflict is the javascript. Who can read javascript and can fix the problem?

the javascript:

/*

List Expander
written by Alen Grakalic, provided by Css Globe (cssglobe.com)

*/

this.listexpander = function(){

// edit

var expandTo = 1; // level up to which you want your lists to be initially expanded. 1 is minimum
var expandText = "uitklappen"; // text for expand all button
var collapseText = "inklappen"; // 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[i].className == listClass){
create(ul[i]);
buttons(ul[i])
};
};
};

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

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[i].getElementsByTagName("ul").length > 0){
var ul = li[i].getElementsByTagName("ul")[0];
ul.style.display = "block";
li[i].className = "expanded";
};
};
};

this.collapse = function(list){
li = list.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
if(li[i].getElementsByTagName("ul").length > 0){
var ul = li[i].getElementsByTagName("ul")[0];
ul.style.display = "none";
li[i].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;


The CSS:

/*
List Expander
*/

.listexpander{width:100%;}
.listexpander, .listexpander ul, .listexpander li{
margin:0;
padding:0;
list-style:none;
}
.listexpander ul{
/*
Uncomment this if you want to initially hide the child lists.
If you do, Javascript disabled and CSS enabled browsers will not be able to use this list.
display:none;
*/
}
.listexpander li{
line-height:200%;
margin-top:1px;
cursor:default;
text-indent:30px;
font-weight:bold;
width:100%;
}

.listexpander li2{
line-height:200%;
margin-top:1px;
cursor:default;
text-indent:15px;
font-weight:bold;
width:100%;
}

.listexpander li.collapsed, .listexpander li.expanded{cursor:pointer;}

/* first level */

.listexpander li, .listexpander li.collapsed{background:#eee url(collapsed.gif) no-repeat 5px .4em;}
.listexpander li.expanded{background:#eee url(expanded.gif) no-repeat 5px .4em;}

/* second level */

.listexpander li ul, .listexpander li li{background:#f8f8f8;font-weight:normal;}
.listexpander li li.collapsed{background:#f8f8f8 url(collapsed.gif) no-repeat 5px .4em;}
.listexpander li li.expanded{background:#f8f8f8 url(expanded.gif) no-repeat 5px .4em;}

/* third level */

.listexpander li li ul, .listexpander li li li{background:#fff;}
.listexpander li li li.collapsed{background:#fff url(collapsed.gif) no-repeat 5px .4em;}
.listexpander li li li.expanded{background:#fff url(expanded.gif) no-repeat 5px .4em;}

/* fourth level */

.listexpander li li li li{text-indent:0;margin-left:30px;width:auto;}

/* etc. */

/* buttons */

p.listexpander{
height:1.5em;
margin:1em 0;
}
p.listexpander2{
height:1em;
margin:1em 0;
}
p.listexpander a{
float:left;
height:1.5em;
line-height:1.5em;
padding:0 10px;
border:1px solid #eee;
margin-right:5px;
cursor:pointer;
}
p.listexpander a:hover{
background:#f8f8f8;
}

/* float fix */
/*.listexpander li:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*/
.listexpander li{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .listexpander li{
height: 1%;
}
.listexpander li{
display: block;
}
/* End hide from IE-mac */
/* end float fix */

P.S. The menu script is originally from CSS Globe (http://cssglobe.com/post.asp?id=940), but they don't help me.

vwphillips
07-06-2009, 02:30 PM
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(){
var evt=window.event||arguments.callee.caller.arguments[0];
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
if(this.over&&obj.nodeName!='SELECT'){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
};
};
};

Gust
07-06-2009, 02:52 PM
Thanks man!!! I looking for this sollution since more than 2 weeks!