Firefox not recognising javascript spaces between text

T

tim

I am using foldoutmenu 3 and am having problems with viewing my menus
in firefox. On my sub3 menus i have more than one line of text in some
places. firefox does not recognise that there is more than one line
and the text simply overlaps the sub-menus below it. I thought i had
got around this by placing empty 'spacers' like so;

oFoldMenu.make('sub3','')//spacer

unfortunately, i have just viewed the site in IExplorer and it has
added way too much space since it does in fact recognise the fact that
there is more than one line in the first place.

Is there some way i can make firefox recognise the extra lines of
text? Has anyone else had a similar problem? I can paste the text here
is it helps.

I'd really appreciate any help.
Thanks - tim
 
A

Adambrz

I am using foldoutmenu 3 and am having problems with viewing my menus
in firefox. On my sub3 menus i have more than one line of text in some
places. firefox does not recognise that there is more than one line
and the text simply overlaps the sub-menus below it. I thought i had
got around this by placing empty 'spacers' like so;

oFoldMenu.make('sub3','')//spacer

unfortunately, i have just viewed the site in IExplorer and it has
added way too much space since it does in fact recognise the fact that
there is more than one line in the first place.

Is there some way i can make firefox recognise the extra lines of
text? Has anyone else had a similar problem? I can paste the text here
is it helps.

I'd really appreciate any help.
Thanks - tim

Yeah I would need either the code or an image to understand.

Thanks,
Adambrz
www.adambrz.com
 
T

tim

Heres the code, if you try it in firefox and ie you'll see what i
mean.

Thanks for looking.

Tim

<html>
<head>
<title>Cross-browser Dynamic HTML Scripts - Foldoutmenu3</title>
<style type="text/css">

</style>
<script type="text/javascript" language="JavaScript">
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/
************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenuObj(obj,nest,img,offimage,onimage){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?
document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?
document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?this.css.document:0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
this.height=bw.ns4?this.ref.height:this.el.offsetHeight;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.status=0;
this.swap=b_swap
if(onimage)this.onimage=onimage.src
this.offimage=offimage
if(img)this.img=this.ref.images
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_swap(on){
if(this.onimage && on){
this.img.src=this.onimage
}else if(this.onimage && !on){
this.img.src=this.offimage
}
}

/
********************************************************************************
Making menuobjects
********************************************************************************/
function foldoutMenuObj(name){
this.menus=new Array()
this.name=name;
this.makeStyle=fold_style
this.make=fold_make
this.construct=fold_construct
this.fold=fold
this.foldstay=fold_stay
this.foldsub=fold_sub
this.foldsubstay=fold_sub_stay
this.foldsub2=fold_sub2
this.foldsub2stay=fold_sub2_stay
this.foldsub3=fold_sub3
this.foldsub3stay=fold_sub3_stay
this.foldsub4=fold_sub4
this.foldsub4stay=fold_sub4_stay
this.placeAll=fold_placeAll;
this.menus=new Array()
this.a=0; this.b; this.c; this.d; this.e; this.f
this.initexec=''
this.opn=fold_opn;
}


/
********************************************************************************
Initiating page, making objects..
********************************************************************************/
function fold_construct(){
this.container=new makeMenuObj('div'+this.name+'Cont')
this.menu=new Array()
menuheight=0;
for(i=0;i<this.menus.length;i++){
this.menu[i]=new makeMenuObj('div'+this.name+i,'div'+this.name
+'Cont',this.menus[i].img,this.menus[i].offimage,this.menus[i].onimage)
this.menu[i].subs=this.menus[i].subs
this.menu[i].sub=new Array()
for(j=0;j<this.menu[i].subs;j++){
this.menu[i].sub[j]=new makeMenuObj('div'+this.name+i
+"_"+j,'div'+this.name+'Cont',this.menus[i][j].img,this.menus[i]
[j].offimage,this.menus[i][j].onimage)
this.menu[i].sub[j].subs=this.menus[i][j].subs
this.menu[i].sub[j].sub=new Array()
for(a=0;a<this.menu[i].sub[j].subs;a++){
this.menu[i].sub[j].sub[a]=new makeMenuObj('div'+this.name+i+"_"+j
+"_"+a,'div'+this.name+'Cont',this.menus[i][j][a].img,this.menus[i][j]
[a].offimage,this.menus[i][j][a].onimage)
this.menu[i].sub[j].sub[a].subs=this.menus[i][j][a].subs
this.menu[i].sub[j].sub[a].sub=new Array()
for(o=0;o<this.menu[i].sub[j].sub[a].subs;o++){
this.menu[i].sub[j].sub[a].sub[o]=new makeMenuObj('div'+this.name+i
+"_"+j+"_"+a+"_"+o,'div'+this.name+'Cont',this.menus[i][j][a]
[o].img,this.menus[i][j][a][o].offimage,this.menus[i][j][a]
[o].onimage)
this.menu[i].sub[j].sub[a].sub[o].subs=this.menus[i][j][a][o].subs
this.menu[i].sub[j].sub[a].sub[o].sub=new Array()
for(p=0;p<this.menu[i].sub[j].sub[a].sub[o].subs;p++){
this.menu[i].sub[j].sub[a].sub[o].sub[p]=new
makeMenuObj('div'+this.name+i+"_"+j+"_"+a+"_"+o+"_"+p,'div'+this.name
+'Cont',this.menus[i][j][a][o][p].img,this.menus[i][j][a][o]
[p].offimage,this.menus[i][j][a][o][p].onimage)
this.menu[i].sub[j].sub[a].sub[o].sub[p].subs=this.menus[i][j][a][o]
[p].subs
this.menu[i].sub[j].sub[a].sub[o].sub[p].sub=new Array()
for(z=0;z<this.menu[i].sub[j].sub[a].sub[o].sub[p].subs;z++){
this.menu[i].sub[j].sub[a].sub[o].sub[p].sub[z]=new
makeMenuObj('div'+this.name+i+"_"+j+"_"+a+"_"+o+"_"+p
+"_"+z,'div'+this.name+'Cont')
}
}
}
}
}
}
this.menus=""
if(this.initexec) eval(this.initexec)
else this.placeAll()
this.container.showIt()
}
function fold_opn(a,b,c,d,e,f){
if(a>-1) this.initexec+="this.fold("+a+","+this.substay+");"
if(b>-1) this.initexec+="this.foldsub("+a+","+b+","+this.sub2stay+");"
if(c>-1) this.initexec+="this.foldsub2("+a+","+b+","+c
+","+this.sub3stay+");"
if(d>-1) this.initexec+="this.foldsub3("+a+","+b+","+c+","+d
+","+this.sub4stay+");"
if(e>-1) this.initexec+="this.foldsub4("+a+","+b+","+c+","+d+","+e
+","+this.sub5stay+");"
if(f>-1) this.initexec+="this.foldsub5("+a+","+b+","+c+","+d+","+e
+","+f+","+this.sub6stay+");"
}
/
********************************************************************************
The first sub menus
********************************************************************************/
function fold_stay(a){
for(z=0;z<this.menu.length;z++){
if(z!=a) this.fold(z,1,1)
}
this.fold(a,1,0)
}
function fold(a,fromtop,noplace){
if(fromtop){
for(b=0;b<this.menu[a].subs;b++){
if(this.menu[a].sub[b].status || noplace){
this.menu[a].sub[b].hideIt()
this.menu[a].swap(0)
this.foldsub(a,b,1,1)
}else{
this.menu[a].sub[b].showIt()
this.menu[a].swap(1)
}
}
if(!noplace) this.placeAll()
}else this.foldstay(a)
}
/
********************************************************************************
The second sub level menus
********************************************************************************/
function fold_sub_stay(a,b){
for(z=0;z<this.menu[a].subs;z++){
if(b!=z) this.foldsub(a,z,1,1)
}
this.foldsub(a,b,1,0)
}
function fold_sub(a,b,fromtop,noplace){
if(fromtop){
for(c=0;c<this.menu[a].sub[b].subs;c++){
if(this.menu[a].sub[b].sub[c].status || noplace){
this.menu[a].sub[b].sub[c].hideIt()
this.menu[a].sub[b].swap(0)
this.foldsub2(a,b,c,1,1)
}else{
this.menu[a].sub[b].sub[c].showIt()
this.menu[a].sub[b].swap(1)
}
}
if(!noplace) this.placeAll()
}else this.foldsubstay(a,b)
}
/
********************************************************************************
The third sub level menus
********************************************************************************/
function fold_sub2_stay(a,b,c){
for(z=0;z<this.menu[a].sub[b].subs;z++){
if(c!=z) this.foldsub2(a,b,z,1,1)
}
this.foldsub2(a,b,c,1,0)
}
function fold_sub2(a,b,c,fromtop,noplace){
if(fromtop){
for(d=0;d<this.menu[a].sub[b].sub[c].subs;d++){
if(this.menu[a].sub[b].sub[c].sub[d].status || noplace){
this.menu[a].sub[b].sub[c].sub[d].hideIt()
this.menu[a].sub[b].sub[c].swap(0)
this.foldsub3(a,b,c,d,1,1)
}else{
this.menu[a].sub[b].sub[c].sub[d].showIt()
this.menu[a].sub[b].sub[c].swap(1)
}
}
if(!noplace) this.placeAll()
}else this.foldsub2stay(a,b,c)
}
/
********************************************************************************
The fourth sub level menus
********************************************************************************/
function fold_sub3_stay(a,b,c,d){
for(z=0;z<this.menu[a].sub[b].sub[c].subs;z++){
if(z!=d) this.foldsub3(a,b,c,z,1,1)
}
this.foldsub3(a,b,c,d,1,0)
}
function fold_sub3(a,b,c,d,fromtop,noplace){
if(fromtop){
for(e=0;e<this.menu[a].sub[b].sub[c].sub[d].subs;e++){
if(this.menu[a].sub[b].sub[c].sub[d].sub[e].status || noplace){
this.menu[a].sub[b].sub[c].sub[d].sub[e].hideIt()
this.menu[a].sub[b].sub[c].sub[d].swap(0)
this.foldsub4(a,b,c,d,e,1,1)
}else{
this.menu[a].sub[b].sub[c].sub[d].sub[e].showIt()
this.menu[a].sub[b].sub[c].sub[d].swap(1)
}
}
if(!noplace) this.placeAll()
}else this.foldsub3stay(a,b,c,d)
}
/
********************************************************************************
The fifth sub level menus
********************************************************************************/
function fold_sub4_stay(a,b,c,d,e){
for(z=0;z<this.menu[a].sub[b].sub[c].sub[d].subs;z++){
if(z!=e) this.foldsub4(a,b,c,d,z,1,1)
}
this.foldsub4(a,b,c,d,e,1,0)
}
function fold_sub4(a,b,c,d,e,fromtop,noplace){
if(fromtop){
for(f=0;f<this.menu[a].sub[b].sub[c].sub[d].sub[e].subs;f++){
if(this.menu[a].sub[b].sub[c].sub[d].sub[e].sub[f].status || noplace){
this.menu[a].sub[b].sub[c].sub[d].sub[e].sub[f].hideIt()
this.menu[a].sub[b].sub[c].sub[d].sub[e].swap(0)
}else{
this.menu[a].sub[b].sub[c].sub[d].sub[e].sub[f].showIt()
this.menu[a].sub[b].sub[c].sub[d].sub[e].swap(1)
}
}
if(!noplace) this.placeAll()
}else this.foldsub4stay(a,b,c,d,e)
}
/
********************************************************************************
Placing all layers correctly
********************************************************************************/
function fold_placeAll(){
menuheight=0;
for(i=0;i<this.menu.length;i++){
this.menu[i].movey(menuheight)
menuheight+=this.menu[i].height+this.menubetween
for(j=0;j<this.menu[i].subs;j++){
this.menu[i].sub[j].movey(menuheight)
if(this.menu[i].sub[j].status) menuheight+=this.menu[i].sub[j].height
+this.menubetween
for(a=0;a<this.menu[i].sub[j].subs;a++){
this.menu[i].sub[j].sub[a].movey(menuheight)
if(this.menu[i].sub[j].sub[a].status) menuheight
+=this.menu[i].sub[j].sub[a].height+this.menubetween
for(o=0;o<this.menu[i].sub[j].sub[a].subs;o++){
this.menu[i].sub[j].sub[a].sub[o].movey(menuheight)
if(this.menu[i].sub[j].sub[a].sub[o].status) menuheight
+=this.menu[i].sub[j].sub[a].sub[o].height+this.menubetween
for(p=0;p<this.menu[i].sub[j].sub[a].sub[o].subs;p++){
this.menu[i].sub[j].sub[a].sub[o].sub[p].movey(menuheight)
if(this.menu[i].sub[j].sub[a].sub[o].sub[p].status) menuheight
+=this.menu[i].sub[j].sub[a].sub[o].sub[p].height+this.menubetween
for(z=0;z<this.menu[i].sub[j].sub[a].sub[o].sub[p].subs;z++){
this.menu[i].sub[j].sub[a].sub[o].sub[p].sub[z].movey(menuheight)
if(this.menu[i].sub[j].sub[a].sub[o].sub[p].sub[z].status) menuheight
+=this.menu[i].sub[j].sub[a].sub[o].sub[p].sub[z].height
+this.menubetween
}
}
}
}
}
}
}

/
********************************************************************************
Functions to write out the layers...Should be moved server-side
********************************************************************************/

function fold_style(){
str='\n<style type="text/css">\n'
str+='\tDIV.cl'+this.name+'{position:absolute; '+ this.clFold +';
width:'+this.width+'; height:20}\n'
str+='\tDIV.cl'+this.name+'Sub{position:absolute; '+ this.clSub
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\tDIV.cl'+this.name+'Sub2{position:absolute; '+ this.clSub2
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\tDIV.cl'+this.name+'Sub3{position:absolute; '+ this.clSub3
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\tDIV.cl'+this.name+'Sub4{position:absolute; '+ this.clSub4
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\tDIV.cl'+this.name+'Sub5{position:absolute; '+ this.clSub5
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\t#div'+this.name+'Cont{'+this.clCont+'; left:'+this.left+';
top:'+this.top+'; height:'+this.maxheight+'; width:'+this.width+';
visibility:hidden}\n'
str+='\tA.cl'+this.name+'Links{'+this.clFoldLinks+'}\n'
str+='\tA.cl'+this.name+'1Links{'+this.clSubLinks+'}\n'
str+='\tA.cl'+this.name+'2Links{'+this.clSub2Links+'}\n'
str+='\tA.cl'+this.name+'3Links{'+this.clSub3Links+'}\n'
str+='\tA.cl'+this.name+'4Links{'+this.clSub4Links+'}\n'
str+='\tA.cl'+this.name+'5Links{'+this.clSub5Links+'}\n'
str+='</style>\n\n\n'
document.write(str)
}
function fold_make_link(text,lnk,target,offimage,id,cl,ev,acl){
str2='\t<div id="div'+id+'" class="cl'+cl+'"><a href="'
if(lnk) str2+=lnk+'" '
else str2+='#" '
if(!lnk || target){
str2+='onclick="'+ev+'; if(bw.ie5 || bw.ie4) this.blur()'
if(!target) str2+='; return false'; str2+='"'
}
if(target) str2+=' target="'+target+'"'; str2+=' class="cl'+acl
+'Links">'
if(offimage) str2+='<img src="'+offimage+'" name="img'+id+'"
border="0">'
str2+=text+'</a><br></div>\n'
return str2
}

function fold_make(type,text,lnk,target,offimage,onimage,fc,opn,end){
str="" ; fc=fc?fc+'; ':'';
if(!offimage) offimage=""; if(!onimage) onimage=""
if(this.a==0) str='<div id="div'+this.name+'Cont">\n'
if(type=="top"){
id=this.name+this.a
str+=fold_make_link(text,lnk,target,offimage,this.name
+this.a,this.name,fc+this.name+'.fold('+this.a+','+this.name
+'.substay)',this.name)
this.menus[this.a]=new Array()
this.menus[this.a].subs=0
if(onimage){ this.menus[this.a].onimage=new Image();
this.menus[this.a].onimage.src=onimage;
this.menus[this.a].offimage=offimage; this.menus[this.a].img='img'+id}
this.a++; this.b=0; if(opn) this.opn(this.a)
}else if(type=="sub"){
id=this.name+(this.a-1)+'_'+(this.b),this.name+'Sub'
str+=fold_make_link(text,lnk,target,offimage,id,this.name+'Sub',fc
+this.name+'.foldsub('+(this.a-1)+','+(this.b)+','+this.name
+'.sub2stay)',this.name+'1')
if(opn) this.opn(this.a-1,this.b)
this.menus[this.a-1][this.b]=new Array()
if(onimage){ this.menus[this.a-1][this.b].onimage=new Image();
this.menus[this.a-1][this.b].onimage.src=onimage; this.menus[this.a-1]
[this.b].offimage=offimage; this.menus[this.a-1][this.b].img='img'+id}
this.b++; this.menus[this.a-1].subs=this.b; this.c=0
}else if(type=="sub2"){
id=this.name+(this.a-1)+'_'+(this.b-1)+'_'+(this.c)
str+=fold_make_link(text,lnk,target,offimage,id,this.name+'Sub2',fc
+this.name+'.foldsub2('+(this.a-1)+','+(this.b-1)+','+(this.c)
+','+this.name+'.sub3stay)',this.name+'2')
if(opn) this.opn(this.a-1,this.b-1,this.c)
this.menus[this.a-1][this.b-1][this.c]=new Array()
if(onimage){ this.menus[this.a-1][this.b-1][this.c].onimage=new
Image(); this.menus[this.a-1][this.b-1][this.c].onimage.src=onimage;
this.menus[this.a-1][this.b-1][this.c].offimage=offimage;
this.menus[this.a-1][this.b-1][this.c].img='img'+id}
this.c++; this.menus[this.a-1][this.b-1].subs=this.c; this.d=0
}else if(type=="sub3"){
id=this.name+(this.a-1)+'_'+(this.b-1)+'_'+(this.c-1)+'_'+(this.d)
str+=fold_make_link(text,lnk,target,offimage,id,this.name+'Sub3',fc
+this.name+'.foldsub3('+(this.a-1)+','+(this.b-1)+','+
(this.c-1)+','+this.d+','+this.name+'.sub4stay)',this.name+'3')
if(opn) this.opn(this.a-1,this.b-1,this.c-1,this.d)
this.menus[this.a-1][this.b-1][this.c-1][this.d]=new Array()
if(onimage){ this.menus[this.a-1][this.b-1][this.c-1]
[this.d].onimage=new Image(); this.menus[this.a-1][this.b-1][this.c-1]
[this.d].onimage.src=onimage; this.menus[this.a-1][this.b-1][this.c-1]
[this.d].offimage=offimage; this.menus[this.a-1][this.b-1][this.c-1]
[this.d].img='img'+id}
this.d++; this.menus[this.a-1][this.b-1][this.c-1].subs=this.d;
this.e=0
}else if(type=="sub4"){
id=this.name+(this.a-1)+'_'+(this.b-1)+'_'+(this.c-1)+'_'+
(this.d-1)+'_'+(this.e)
str+=fold_make_link(text,lnk,target,offimage,id,this.name+'Sub4',fc
+this.name+'.foldsub4('+(this.a-1)+','+(this.b-1)+','+(this.c-1)+','+
(this.d-1)+','+this.e+','+this.name+'.sub5stay)',this.name+'4')
if(opn) this.opn(this.a-1,this.b-1,this.c-1,this.d-1,this.e)
this.menus[this.a-1][this.b-1][this.c-1][this.d-1][this.e]=new Array()
if(onimage){ this.menus[this.a-1][this.b-1][this.c-1][this.d-1]
[this.e].onimage=new Image(); this.menus[this.a-1][this.b-1][this.c-1]
[this.d-1][this.e].onimage.src=onimage; this.menus[this.a-1][this.b-1]
[this.c-1][this.d-1][this.e].offimage=offimage; this.menus[this.a-1]
[this.b-1][this.c-1][this.d-1][this.e].img='img'+id}
this.e++; this.menus[this.a-1][this.b-1][this.c-1]
[this.d-1].subs=this.e; this.f=0
}else if(type=="sub5"){
str+='\t\t\t<div id="div'+this.name+(this.a-1)+'_'+(this.b-1)+'_'+
(this.c-1)+'_'+(this.d-1)+'_'+(this.e-1)+'_'+(this.f)+'"
class="cl'+this.name+'Sub5"><a href="'+lnk+'" onclick="'+fc+'"
class="cl'+this.name+'5Links"'
if(target) str+=' target="+target+"'
str+='>'+text+'</a><br></div>\n'
if(opn) this.opn(this.a-1,this.b-1,this.c-1,this.d-1,this.e-1,this.f)
this.f++; this.menus[this.a-1][this.b-1][this.c-1][this.d-1]
[this.e-1].subs=this.f
}
if(end) str+="</div>"
document.write(str)
}

</script>
</HEAD>
<BODY bgcolor="White">
<script type="text/javascript" language="JavaScript">
/
********************************************************************************
Calling the write functions and setting variables
********************************************************************************/


//Variables to set

oFoldMenu=new foldoutMenuObj('oFoldMenu')
oFoldMenu.substay=false //Should the sub menus stay folded?
oFoldMenu.sub2stay=false //Should the sub2 menus stay folded?
oFoldMenu.sub3stay=false //Should the sub3 menus stay folded?
oFoldMenu.sub4stay=false //Should the sub4 menus stay folded?
oFoldMenu.sub5stay=false //Should the sub5 menus stay folded?
oFoldMenu.sub6stay=false //Should the sub6 menus stay folded?

oFoldMenu.menubetween=5 //The pixel value between the foldoutmenus


oFoldMenu.left=80 //The left position of the menu
oFoldMenu.top=100 //The top position of the menu
oFoldMenu.width=420 //The width of the menu
oFoldMenu.maxheight=2000 //The maxheight of the menu, be sure to set
this one high enough

//Setting styles
oFoldMenu.clFold="" //Regular styles for the topDivs
oFoldMenu.clSub="left:10" //Styles for the subDivs
oFoldMenu.clSub2="left:20" //Styles for the sub2Divs
oFoldMenu.clSub3="left:30" //Styles for the sub3Divs
oFoldMenu.clSub4="left:40" //Styles for the sub4Divs
oFoldMenu.clSub5="left:60" //Styles for the sub5Divs

oFoldMenu.clCont="position:absolute;" //The cont layer, set position
to relative if you want to try and have it inside a layer or whatever
oFoldMenu.clFoldLinks="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none; font-weight:normal; color:#663300" //The style
for the toplinks
oFoldMenu.clSubLinks="font-family:Arial, Helvetica; font-size:11px;
font-weight:normal; text-decoration:none; color:#999900" //The style
for the sublinks
oFoldMenu.clSub2Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none; color:#CC6699" //The style for the sub2links
oFoldMenu.clSub3Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none; color:#66CC33" //The style for the sub3links
oFoldMenu.clSub4Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none; color:#66CC33" //The style for the sub4links
oFoldMenu.clSub5Links="font-family:Arial, Helvetica; font-size:10px;
text-decoration:none; color:#66CC33" //The style for the sub5links

//Do not change this line!
oFoldMenu.makeStyle()


//Making menus

/*ARGUMENTS:
type = what type of menu this item is (top,sub,sub2,sub3,sub4,sub5)
text = the text for the item
lnk = the link for the item (not needed if submenus)
target = the target for the link (not needed if no target or no link)
offimage = the default "arrow" image for this element (if you spesify
no text, you can use the image only)
onimage = the image to swap to when clicked (not needed if you don't
want a swap image)
fc = if you want the item to execute another javascript function
aswell use this
opn = if you want this particilar item to be opened on load set this
to 1 (0,1)
*/

//MAIN 1
oFoldMenu.make('top','FURNITURE',0,0,'images/arrow.gif','images/
arrow1.gif')
oFoldMenu.make('sub','not working',0,0,'images/arrow.gif','images/
arrow1.gif')
oFoldMenu.make('sub2','here is the text that is overlapping the menu
below it when using firefox. If i use internet explorer this works
just fine. Please help, it would be much appreciated. here is the text
that is overlapping the menu below it when using firefox. If i use
internet explorer this works just fine. Please help, it would be much
appreciated.here is the text that is overlapping the menu below it
when using firefox. If i use internet explorer this works just fine.
Please help, it would be much appreciated. here is the text that is
overlapping the menu below it when using firefox. If i use internet
explorer this works just fine. Please help, it would be much
appreciated. ')
oFoldMenu.make('sub2','another','http://www.3pc.com/
index.html','','images/arrow.gif','images/arrow1.gif')
oFoldMenu.make('sub2','yet another','http://www.abundanttech.com/
index.html','','images/arrow.gif','images/arrow1.gif')



//MAIN 2
oFoldMenu.make('top','OBJECT',0,0,'images/arrow.gif','images/
arrow1.gif')
oFoldMenu.make('sub','Arts & Humanities',0,0,'images/
arrow.gif','images/arrow1.gif')
oFoldMenu.make('sub2','Art History',0,0,'images/arrow.gif','images/
arrow1.gif')
oFoldMenu.make('sub3','Architectural History',0,0,'images/
arrow.gif','images/arrow1.gif')
oFoldMenu.make('sub4','Architects',0,0,'images/arrow.gif','images/
arrow1.gif')
oFoldMenu.make('sub2','Arts Therapy','http://www.3pc.com','_blank')
oFoldMenu.make('sub2','Awards','http://www.3pc.com','_blank')
oFoldMenu.make('sub2','Booksellers','http://www.3pc.com','_blank')
oFoldMenu.make('sub2','Censorship','http://www.3pc.com','_blank')
oFoldMenu.make('sub2','Chats and Forums',0,0,0,0,0,0,1)


function start(){
oFoldMenu.construct()
}

onload=start;





</script>

not working properly - click on furniture and not working to see the
text that overlaps the buttons.
</BODY>
</HTML>
 
R

RobG

Heres the code, if you try it in firefox and ie you'll see what i
mean.

Can I say that this is really dreadful old code? Please look at
ditching it as soon as possible, it really is awful. Checkout lists
at alistapart:

<URL: http://www.alistapart.com/articles/horizdropdowns/ >

Expanding tree menus should be coded as lists and the script should
use feature detection so that if scripting isn't supported or is
disabled, users will still get a functional hierarchical menu.

Anyhow, likely you want a quick fix so I've suggested something
below. The problem is in the fold_style function.


[...]
function fold_style(){
str='\n<style type="text/css">\n'
str+='\tDIV.cl'+this.name+'{position:absolute; '+ this.clFold +';
width:'+this.width+'; height:20}\n'
str+='\tDIV.cl'+this.name+'Sub{position:absolute; '+ this.clSub
+';height:20; width:'+this.width+'; visibility:hidden}\n'
str+='\tDIV.cl'+this.name+'Sub2{position:absolute; '+ this.clSub2
+';height:20; width:'+this.width+'; visibility:hidden}\n'

The problem is here, where the height of the menu elements are hard-
coded. If you replace the above line with:

str+='\tDIV.cl'+this.name+'Sub2{position:absolute; ' + this.clSub2
+ '; visibility:hidden}\n'


it will "work". I'd suggest modifying all similar lines, there is no
reason to hard-code the height. Note that I haven't bothered to look
too deeply into the code because I think it would be much faster to
just re-write it.
 
T

tim

Hi Rob

Thanks for the reply. I intend to take your advice and ditch the code
after all. Ive trawled around for some menus based on lists. The
website that you recommended was really good by the way.... theres
lots of things that we be useful for other projects. Although i didn't
find anything that would be perfect at this point for me on there. -
as you can probably tell, my javascript and css knowledge is not that
great.

Ive stumbled accross another code based on lists using css and a bit
of javascript. Ive uploaded it here;

http://www.geocities.com/timdenton3000/

if you have the time i'd appreciate your opinion on whether this code
is quite so awful?

Thanks again for the help / reccomendations.

Tim
 
R

RobG

Hi Rob

Thanks for the reply. I intend to take your advice and ditch the code
after all. Ive trawled around for some menus based on lists. The
website that you recommended was really good by the way.... theres
lots of things that we be useful for other projects. Although i didn't
find anything that would be perfect at this point for me on there. -
as you can probably tell, my javascript and css knowledge is not that
great.

Ive stumbled accross another code based on lists using css and a bit
of javascript. Ive uploaded it here;

http://www.geocities.com/timdenton3000/

if you have the time i'd appreciate your opinion on whether this code
is quite so awful?

It's certainly a lot better! Of course nothing is perfect, below is
my version of a simple tree. I like it because it's very simple and
when combined with a bit of CSS it looks just as good as much more
complex menus. Where it toggles the display, you can also change the
style of the LI element to change + to - and vice versa.

I've tried doing the hide/show and change of style purely by changing
the LI's style, but I'm not good enough at CSS to get it working
elegantly cross-browser.

The example below is initialised using a footer script element, you
can move it up to just below the closing UL element, or change to
using the window.onload event if you like.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Tree menu</title>

<style type="text/css">
li .opens {
font-weight: bold;
cursor: pointer;
}
</style>


<script type="text/javascript">

var dMenu = (function () {

function parentLi(el){
do {
if (el.tagName.toLowerCase() == 'li') return el
} while (el = el.parentNode)
}

return {
init: function(id){

// Check appropriate features supported
if (!document.getElementById ||
!document.body.getElementsByTagName) return;

var menu = document.getElementById(id);
var ul, uls = menu.getElementsByTagName('ul');
var i = uls.length;
while (i--){
ul = uls
ul.style.display = 'none';
parentLi(ul).onclick = this.doClick;
}
},
doClick: function(evt) {
var el = this;
var evt = evt || window.event;

// If event bubbled when it shouldn't have, do nothing
var tgt = evt.target || evt.srcElement;
if (parentLi(tgt) != el) return;

// Stop further bubbling
evt.cancelBubble = true;
if (evt.stopPropagation) evt.stopPropagation();

// Toggle display
var ul = this.getElementsByTagName('ul')[0];
ul.style.display = ('none' == ul.style.display)?'':'none';
}
}
})();
</script>

<body>

<ul id="theMenu">
<li><span class="noOpen">Doesn't open</span>
<li><span class="opens">Opens</span>
<ul>
<li><span class="opens">Opens</span>
<ul>
<li><span class="opens">Opens</span>
<ul>
<li>Doesn't open
<li>Doesn't open
<li>Doesn't open
<li>Doesn't open
</ul>
<li><span class="noOpen">Doesn't open</span>
</ul>
<li><span class="opens">Opens</span>
<ul>
<li><span class="opens">Opens</span>
<ul>
<li>Doesn't open
<li>Doesn't open
<li>Doesn't open
<li>Doesn't open
</ul>
<li>Doesn't open
<li>Doesn't open
<li>Doesn't open
</ul>
</ul>
<li>Doesn't open
</ul>

<script type="text/javascript">dMenu.init('theMenu');</script>
</body>
 
T

tim

Hi Rob

I like it, this tree does look appealing due to its real simplicity.
The other list one that i picked up has some code in the javascript
about detecting cookies i think. This was causing my browser to prompt
me about security every time - which isn't ideal. Do you think that
your version would be more stable over a range of browsers?

Also, would it be possilbe to make the lists close once another has
been opened? Is there a variable i can simply change in the
javascript?

Thanks again for the help, its much appreciated.

Tim
 
T

tim

Hi Rob

I like it, this tree does look appealing due to its real simplicity.
Did you just type it out?

The other list one that i picked up has some code in the javascript
about detecting cookies i think. This was causing my browser to prompt
me about security every time - which isn't ideal. Do you think that
your version would be more stable over a range of browsers?

Also, would it be possilbe to make the lists close once another has
been opened? Is there a variable i can simply change in the
javascript?

Thanks again for the help, its much appreciated.

Tim
 
R

RobG

Hi Rob

I like it, this tree does look appealing due to its real simplicity.
Did you just type it out?

Yes. I've done a few before, but the find simple trees are the best.

[...]
Also, would it be possilbe to make the lists close once another has
been opened?

Yes, but I don't like those. If you open a level below one that's
already open, the one you just clicked on jumps up, so you have to
move your point of focus and the mouse to close it again or often just
to read the list you just opened.

But that's a personal preference, some old code is below.
Is there a variable i can simply change in the
javascript?

Nope, that's adding unnecessar complexity to me. I'd rather just
modify a few lines of code.


var dMenu = (function(){

var menu;

function parentLi(el) {
do {
if (el.tagName.toLowerCase() == 'li') return el
} while (el = el.parentNode)
}

function openParentUls(el) {
while (el != menu) {
if (el.tagName.toLowerCase() == 'ul') el.style.display = '';
el = el.parentNode;
}
}

function closeAll(el) {
var el = el || menu;
var uls = el.getElementsByTagName('ul');
var i = uls.length;
while(i--){uls.style.display = 'none';}
}

return {
init: function (id) {
if (!document.getElementsByTagName ||
!document.getElementById ) {
return;
}

menu = document.getElementById(id);

if (menu) {
this.closeAll(menu);
var uls = menu.getElementsByTagName('ul');
var i = uls.length;
while (i--) {
parentLi(uls).onclick = this.doClick;
}
}
},

closeAll: function (el) {
closeAll(el);
},

doClick: function(e) {
var e = e || window.event;
var tgt = e.target || e.srcElement;

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

while (tgt != this) {
if (tgt.tagName.toLowerCase() == 'ul') return;
tgt = tgt.parentNode;
}

var firstUl = this.getElementsByTagName('ul')[0];
var firstUlDisplay = firstUl.style.display;
closeAll(menu);
openParentUls(this);
firstUl.style.display = ('none' == firstUlDisplay)? '' : 'none';
}

}
})();
 
T

tim

Hi Rob

Thanks for getting back to me again, and sorry to be a pain, but i
copied that script into my external javascript document but it only
seemed to open all of the menus instead of closing them. Basically,
when i click on any menu item, it opens everything above it on all
levels in the list. Id just like it to close everthing else that is on
the same level. Ive tried to fiddle around with the script but my lack
of expertise seems to be holding me back... again

If its too copmlicated, no worries, i dont want to keep bugging you.

Thanks
Tim
 
R

RobG

Hi Rob

Thanks for getting back to me again, and sorry to be a pain, but i
copied that script into my external javascript document but it only
seemed to open all of the menus instead of closing them. Basically,
when i click on any menu item, it opens everything above it on all
levels in the list. Id just like it to close everthing else that is on
the same level. Ive tried to fiddle around with the script but my lack
of expertise seems to be holding me back... again

You must have something wrong with your list structure, it's easy to
screwup. Try running it through the W3C HTML validator - keep the
HTML to an absolute minimum until you get the list right. The example
below is HTML 4 compliant.

<URL: http://validator.w3.org/ >

Properly structured lists are much easier to construct if you have
something to build the list for you - the example below works with the
previously supplied code in Firefox, IE, Opera and Safari.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test menu</title>
<script type="text/javascript">
/* add script here */
</script>
<ul id="menu">
<li>1.0
<ul>
<li>1.1
<ul>
<li>1.1.1
<li>1.1.2
</ul>
<li>1.2
<ul>
<li>1.2.1
<li>1.2.2
</ul>
<li>1.3
<ul>
<li>1.3.1
<li>1.3.2
</ul>
</ul>
<li>2.0
<ul>
<li>2.1
<ul>
<li>2.1.1
<li>2.1.2
</ul>
<li>2.2
<ul>
<li>2.2.1
<li>2.2.2
</ul>
<li>2.3
<ul>
<li>2.3.1
<li>2.3.2
</ul>
</ul>
</ul>
<script type="text/javascript">dMenu.init('menu');</script>


I find it easier to read if the LIs don't have closing tags - they
aren't required for valid HTML 4.
 
T

tim

Hi Rob

Its looking good now... thanks, it seems to work just how i want it.
And that validator is a great tool, i never knew about it.... all
these wonderful things im discovering!

Thanks again for your help.

Tim
 
T

tim

Hi Rob

I've been working with that script you posted, i was just wondering if
its possible to add a + and - sign before each list item so that when
its open it shows - and when its closed theres a +. Ive tried
changing the standard bullets, which i can do, but i dont know how to
get the image to work as a two state image?

Does this entail good old javascript? I have tried looking at stealing
that element from another javascript but it doesn't all make that much
sense to me.

Is it something relatively easy to do, or am i getting out of my
depth?

Thanks

Tim
 
T

Tom

On 19 Feb 2007 09:55:11 -0800, tim wrote...
Hi Rob

I've been working with that script you posted, i was just wondering if
its possible to add a + and - sign before each list item so that when
its open it shows - and when its closed theres a +. Ive tried
changing the standard bullets, which i can do, but i dont know how to
get the image to work as a two state image?

Does this entail good old javascript? I have tried looking at stealing
that element from another javascript but it doesn't all make that much
sense to me.

Is it something relatively easy to do, or am i getting out of my
depth?

Thanks

Tim


There's probably a few public sites you can look up and example to work with.
You're better off looking through the example an understanding how it works, so
you can basically write your own version. Probably need to use an "onClick"
event to manage the graphic change.

Tom
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top