473,883 Members | 1,649 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Firefox not recognising javascript spaces between text

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

Feb 8 '07 #1
12 2622
On Feb 8, 8:19 am, "tim" <timden...@gmai l.comwrote:
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

Feb 8 '07 #2
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="JavaS cript">
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=naviga tor.appVersion
this.dom=docume nt.getElementBy Id?1:0
this.ie5=(this. ver.indexOf("MS IE 5")>-1 && this.dom)?1:0;
this.ie4=(docum ent.all && !this.dom)?1:0;
this.ns5=(this. dom && parseInt(this.v er) >= 5) ?1:0;
this.ns4=(docum ent.layers && !this.dom)?1:0;
this.bw=(this.i e5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/
*************** *************** *************** *************** *************** *********
Making cross-browser objects
*************** *************** *************** *************** *************** *********/
function makeMenuObj(obj ,nest,img,offim age,onimage){
nest=(!nest) ? '':'document.'+ nest+'.'
this.css=bw.dom ? document.getEle mentById(obj).s tyle:bw.ie4?
document.all[obj].style:bw.ns4?e val(nest+"docum ent.layers." +obj):0;
this.el=bw.dom? document.getEle mentById(obj):b w.ie4?
document.all[obj]:bw.ns4?eval(ne st+'document.'+ obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4 ?this.css.docum ent:0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:t his.css.offsetL eft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:th is.css.offsetTo p;
this.height=bw. ns4?this.ref.he ight:this.el.of fsetHeight;
this.hideIt=b_h ideIt; this.showIt=b_s howIt; this.movey=b_mo vey
this.status=0;
this.swap=b_swa p
if(onimage)this .onimage=onimag e.src
this.offimage=o ffimage
if(img)this.img =this.ref.image s[img]
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=th is.y}
function b_swap(on){
if(this.onimage && on){
this.img.src=th is.onimage
}else if(this.onimage && !on){
this.img.src=th is.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=f old_stay
this.foldsub=fo ld_sub
this.foldsubsta y=fold_sub_stay
this.foldsub2=f old_sub2
this.foldsub2st ay=fold_sub2_st ay
this.foldsub3=f old_sub3
this.foldsub3st ay=fold_sub3_st ay
this.foldsub4=f old_sub4
this.foldsub4st ay=fold_sub4_st ay
this.placeAll=f old_placeAll;
this.menus=new Array()
this.a=0; this.b; this.c; this.d; this.e; this.f
this.initexec=' '
this.opn=fold_o pn;
}
/
*************** *************** *************** *************** *************** *****
Initiating page, making objects..
*************** *************** *************** *************** *************** *****/
function fold_construct( ){
this.container= new makeMenuObj('di v'+this.name+'C ont')
this.menu=new Array()
menuheight=0;
for(i=0;i<this. menus.length;i+ +){
this.menu[i]=new makeMenuObj('di v'+this.name+i, 'div'+this.name
+'Cont',this.me nus[i].img,this.menus[i].offimage,this. menus[i].onimage)
this.menu[i].subs=this.menu s[i].subs
this.menu[i].sub=new Array()
for(j=0;j<this. menu[i].subs;j++){
this.menu[i].sub[j]=new makeMenuObj('di v'+this.name+i
+"_"+j,'div'+th is.name+'Cont', this.menus[i][j].img,this.menus[i]
[j].offimage,this. menus[i][j].onimage)
this.menu[i].sub[j].subs=this.menu s[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('di v'+this.name+i+ "_"+j
+"_"+a,'div'+th is.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.menu s[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('di v'+this.name+i
+"_"+j+"_"+a+"_ "+o,'div'+this. name+'Cont',thi s.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.menu s[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('di v'+this.name+i+ "_"+j+"_"+a+"_" +o+"_"+p,'div'+ this.name
+'Cont',this.me nus[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.menu s[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('di v'+this.name+i+ "_"+j+"_"+a+"_" +o+"_"+p
+"_"+z,'div'+th is.name+'Cont')
}
}
}
}
}
}
this.menus=""
if(this.initexe c) eval(this.inite xec)
else this.placeAll()
this.container. showIt()
}
function fold_opn(a,b,c, d,e,f){
if(a>-1) this.initexec+= "this.fold("+a+ ","+this.substa y+");"
if(b>-1) this.initexec+= "this.foldsub(" +a+","+b+","+th is.sub2stay+"); "
if(c>-1) this.initexec+= "this.foldsub2( "+a+","+b+" ,"+c
+","+this.sub3s tay+");"
if(d>-1) this.initexec+= "this.foldsub3( "+a+","+b+","+c +","+d
+","+this.sub4s tay+");"
if(e>-1) this.initexec+= "this.foldsub4( "+a+","+b+","+c +","+d+","+e
+","+this.sub5s tay+");"
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,fr omtop,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.foldsubsta y(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,noplac e){
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.foldsub2st ay(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,nopl ace){
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.foldsub3st ay(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,no place){
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.foldsub4st ay(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(menuheig ht)
menuheight+=thi s.menu[i].height+this.me nubetween
for(j=0;j<this. menu[i].subs;j++){
this.menu[i].sub[j].movey(menuheig ht)
if(this.menu[i].sub[j].status) menuheight+=thi s.menu[i].sub[j].height
+this.menubetwe en
for(a=0;a<this. menu[i].sub[j].subs;a++){
this.menu[i].sub[j].sub[a].movey(menuheig ht)
if(this.menu[i].sub[j].sub[a].status) menuheight
+=this.menu[i].sub[j].sub[a].height+this.me nubetween
for(o=0;o<this. menu[i].sub[j].sub[a].subs;o++){
this.menu[i].sub[j].sub[a].sub[o].movey(menuheig ht)
if(this.menu[i].sub[j].sub[a].sub[o].status) menuheight
+=this.menu[i].sub[j].sub[a].sub[o].height+this.me nubetween
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(menuheig ht)
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.me nubetween
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(menuheig ht)
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.menubetwe en
}
}
}
}
}
}
}

/
*************** *************** *************** *************** *************** *****
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+'{po sition:absolute ; '+ this.clFold +';
width:'+this.wi dth+'; height:20}\n'
str+='\tDIV.cl' +this.name+'Sub {position:absol ute; '+ this.clSub
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\tDIV.cl' +this.name+'Sub 2{position:abso lute; '+ this.clSub2
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\tDIV.cl' +this.name+'Sub 3{position:abso lute; '+ this.clSub3
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\tDIV.cl' +this.name+'Sub 4{position:abso lute; '+ this.clSub4
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\tDIV.cl' +this.name+'Sub 5{position:abso lute; '+ this.clSub5
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\t#div'+t his.name+'Cont{ '+this.clCont+' ; left:'+this.lef t+';
top:'+this.top+ '; height:'+this.m axheight+'; width:'+this.wi dth+';
visibility:hidd en}\n'
str+='\tA.cl'+t his.name+'Links {'+this.clFoldL inks+'}\n'
str+='\tA.cl'+t his.name+'1Link s{'+this.clSubL inks+'}\n'
str+='\tA.cl'+t his.name+'2Link s{'+this.clSub2 Links+'}\n'
str+='\tA.cl'+t his.name+'3Link s{'+this.clSub3 Links+'}\n'
str+='\tA.cl'+t his.name+'4Link s{'+this.clSub4 Links+'}\n'
str+='\tA.cl'+t his.name+'5Link s{'+this.clSub5 Links+'}\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="'+targe t+'"'; 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,onima ge,fc,opn,end){
str="" ; fc=fc?fc+'; ':'';
if(!offimage) offimage=""; if(!onimage) onimage=""
if(this.a==0) str='<div id="div'+this.n ame+'Cont">\n'
if(type=="top") {
id=this.name+th is.a
str+=fold_make_ link(text,lnk,t arget,offimage, this.name
+this.a,this.na me,fc+this.name +'.fold('+this. a+','+this.name
+'.substay)',th is.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=on image;
this.menus[this.a].offimage=offim age; 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+(t his.a-1)+'_'+(this.b) ,this.name+'Sub '
str+=fold_make_ link(text,lnk,t arget,offimage, id,this.name+'S ub',fc
+this.name+'.fo ldsub('+(this.a-1)+','+(this.b) +','+this.name
+'.sub2stay)',t his.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=on image; this.menus[this.a-1]
[this.b].offimage=offim age; 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+(t his.a-1)+'_'+(this.b-1)+'_'+(this.c)
str+=fold_make_ link(text,lnk,t arget,offimage, id,this.name+'S ub2',fc
+this.name+'.fo ldsub2('+(this. a-1)+','+(this.b-1)+','+(this.c)
+','+this.name+ '.sub3stay)',th is.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=on image;
this.menus[this.a-1][this.b-1][this.c].offimage=offim age;
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+(t his.a-1)+'_'+(this.b-1)+'_'+(this.c-1)+'_'+(this.d)
str+=fold_make_ link(text,lnk,t arget,offimage, id,this.name+'S ub3',fc
+this.name+'.fo ldsub3('+(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=on image; this.menus[this.a-1][this.b-1][this.c-1]
[this.d].offimage=offim age; 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+(t his.a-1)+'_'+(this.b-1)+'_'+(this.c-1)+'_'+
(this.d-1)+'_'+(this.e)
str+=fold_make_ link(text,lnk,t arget,offimage, id,this.name+'S ub4',fc
+this.name+'.fo ldsub4('+(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=on image; this.menus[this.a-1][this.b-1]
[this.c-1][this.d-1][this.e].offimage=offim age; 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<di v id="div'+this.n ame+(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="JavaS cript">
/
*************** *************** *************** *************** *************** *****
Calling the write functions and setting variables
*************** *************** *************** *************** *************** *****/
//Variables to set

oFoldMenu=new foldoutMenuObj( 'oFoldMenu')
oFoldMenu.subst ay=false //Should the sub menus stay folded?
oFoldMenu.sub2s tay=false //Should the sub2 menus stay folded?
oFoldMenu.sub3s tay=false //Should the sub3 menus stay folded?
oFoldMenu.sub4s tay=false //Should the sub4 menus stay folded?
oFoldMenu.sub5s tay=false //Should the sub5 menus stay folded?
oFoldMenu.sub6s tay=false //Should the sub6 menus stay folded?

oFoldMenu.menub etween=5 //The pixel value between the foldoutmenus
oFoldMenu.left= 80 //The left position of the menu
oFoldMenu.top=1 00 //The top position of the menu
oFoldMenu.width =420 //The width of the menu
oFoldMenu.maxhe ight=2000 //The maxheight of the menu, be sure to set
this one high enough

//Setting styles
oFoldMenu.clFol d="" //Regular styles for the topDivs
oFoldMenu.clSub ="left:10" //Styles for the subDivs
oFoldMenu.clSub 2="left:20" //Styles for the sub2Divs
oFoldMenu.clSub 3="left:30" //Styles for the sub3Divs
oFoldMenu.clSub 4="left:40" //Styles for the sub4Divs
oFoldMenu.clSub 5="left:60" //Styles for the sub5Divs

oFoldMenu.clCon t="position:abs olute;" //The cont layer, set position
to relative if you want to try and have it inside a layer or whatever
oFoldMenu.clFol dLinks="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none ; font-weight:normal; color:#663300" //The style
for the toplinks
oFoldMenu.clSub Links="font-family:Arial, Helvetica; font-size:11px;
font-weight:normal; text-decoration:none ; color:#999900" //The style
for the sublinks
oFoldMenu.clSub 2Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none ; color:#CC6699" //The style for the sub2links
oFoldMenu.clSub 3Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none ; color:#66CC33" //The style for the sub3links
oFoldMenu.clSub 4Links="font-family:Arial, Helvetica; font-size:11px;
text-decoration:none ; color:#66CC33" //The style for the sub4links
oFoldMenu.clSub 5Links="font-family:Arial, Helvetica; font-size:10px;
text-decoration:none ; color:#66CC33" //The style for the sub5links

//Do not change this line!
oFoldMenu.makeS tyle()
//Making menus

/*ARGUMENTS:
type = what type of menu this item is (top,sub,sub2,s ub3,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','FURNITUR E',0,0,'images/arrow.gif','ima ges/
arrow1.gif')
oFoldMenu.make( 'sub','not working',0,0,'i mages/arrow.gif','ima ges/
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.her e 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','ima ges/arrow1.gif')
oFoldMenu.make( 'sub2','yet another','http://www.abundanttec h.com/
index.html','', 'images/arrow.gif','ima ges/arrow1.gif')

//MAIN 2
oFoldMenu.make( 'top','OBJECT', 0,0,'images/arrow.gif','ima ges/
arrow1.gif')
oFoldMenu.make( 'sub','Arts & Humanities',0,0 ,'images/
arrow.gif','ima ges/arrow1.gif')
oFoldMenu.make( 'sub2','Art History',0,0,'i mages/arrow.gif','ima ges/
arrow1.gif')
oFoldMenu.make( 'sub3','Archite ctural History',0,0,'i mages/
arrow.gif','ima ges/arrow1.gif')
oFoldMenu.make( 'sub4','Archite cts',0,0,'image s/arrow.gif','ima ges/
arrow1.gif')
oFoldMenu.make( 'sub2','Arts Therapy','http://www.3pc.com','_ blank')
oFoldMenu.make( 'sub2','Awards' ,'http://www.3pc.com','_ blank')
oFoldMenu.make( 'sub2','Booksel lers','http://www.3pc.com','_ blank')
oFoldMenu.make( 'sub2','Censors hip','http://www.3pc.com','_ blank')
oFoldMenu.make( 'sub2','Chats and Forums',0,0,0,0 ,0,0,1)
function start(){
oFoldMenu.const ruct()
}

onload=start;

</script>

not working properly - click on furniture and not working to see the
text that overlaps the buttons.
</BODY>
</HTML>
Feb 8 '07 #3
On Feb 9, 5:33 am, "tim" <timden...@gmai l.comwrote:
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+'{po sition:absolute ; '+ this.clFold +';
width:'+this.wi dth+'; height:20}\n'
str+='\tDIV.cl' +this.name+'Sub {position:absol ute; '+ this.clSub
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\n'
str+='\tDIV.cl' +this.name+'Sub 2{position:abso lute; '+ this.clSub2
+';height:20; width:'+this.wi dth+'; visibility:hidd en}\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+'Sub 2{position:abso lute; ' + this.clSub2
+ '; visibility:hidd en}\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.

--
Rob

Feb 9 '07 #4
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

Feb 10 '07 #5
On Feb 11, 5:05 am, "tim" <timden...@gmai l.comwrote:
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.toL owerCase() == 'li') return el
} while (el = el.parentNode)
}

return {
init: function(id){

// Check appropriate features supported
if (!document.getE lementById ||
!document.body. getElementsByTa gName) return;

var menu = document.getEle mentById(id);
var ul, uls = menu.getElement sByTagName('ul' );
var i = uls.length;
while (i--){
ul = uls[i]
ul.style.displa y = 'none';
parentLi(ul).on click = 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.cancelBubbl e = true;
if (evt.stopPropag ation) evt.stopPropaga tion();

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

<body>

<ul id="theMenu">
<li><span class="noOpen"> Doesn't open</span>
<li><span class="opens">O pens</span>
<ul>
<li><span class="opens">O pens</span>
<ul>
<li><span class="opens">O pens</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">O pens</span>
<ul>
<li><span class="opens">O pens</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">dMe nu.init('theMen u');</script>
</body>
--
Rob
Feb 11 '07 #6
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

Feb 12 '07 #7
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

Feb 12 '07 #8
On Feb 12, 9:28 pm, "tim" <timden...@gmai l.comwrote:
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.toL owerCase() == 'li') return el
} while (el = el.parentNode)
}

function openParentUls(e l) {
while (el != menu) {
if (el.tagName.toL owerCase() == 'ul') el.style.displa y = '';
el = el.parentNode;
}
}

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

return {
init: function (id) {
if (!document.getE lementsByTagNam e ||
!document.getEl ementById ) {
return;
}

menu = document.getEle mentById(id);

if (menu) {
this.closeAll(m enu);
var uls = menu.getElement sByTagName('ul' );
var i = uls.length;
while (i--) {
parentLi(uls[i]).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.stopPropagat ion) e.stopPropagati on();

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

var firstUl = this.getElement sByTagName('ul' )[0];
var firstUlDisplay = firstUl.style.d isplay;
closeAll(menu);
openParentUls(t his);
firstUl.style.d isplay = ('none' == firstUlDisplay) ? '' : 'none';
}

}
})();


--
Rob

Feb 12 '07 #9
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

Feb 12 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2962
by: niconedz | last post by:
Hi The following code works fine in IE but not Firefox. It's a little script that zooms an image and resizes the window to fit. Can anybody tell me what's wrong? Thanks Nico == btw.. sorry for the long post ==
3
5706
by: Michael Christensen | last post by:
The following works fine in IE -> what am I missing to make it work in Firefox - an example would be great? I can't figure it out :-) ------------------------------------------------ <body> <script language="javascript"> var IE = document.all?true:false; if (!IE) document.captureEvents(event.MOUSEMOVE);
5
2376
by: Notgiven | last post by:
Both of the following code smippets work in IE but not in Firefox. The javascript error for both scripts below is "x has not properties". The select boxes are shown as arrays since they are generated by Pear's Quickform - no way around it - I tried. This code in the html calls the function above and should copy the value selected in a pull-down list to another field: <script type="text/javascript">
4
2174
by: petermichaux | last post by:
Hi, I'm hoping for a reason I'm wrong or an alternate solution... I'd like to be able to dynamically include some javascript files. This is like scriptaculous.js library but their solution is broken in Firefox 1.5.0.1 on OS X. What happens with the Scriptaculous library is this In the html document the author only has to include one line
12
2095
by: shafiqrao | last post by:
Hello everyone, I have a script that runs in IE great, but in firefox it has problems. I understand that there are some objects that are accessed differently in IE and Mozilla. Can anybody let me know what I need to change in the file to make a copy that would run fine on Firefox? Here is the link to the file: http://people.emich.edu/srehman2/study/polls.html click on the 'Build Bars' link displayed at the top-right corner. I am...
4
2339
by: lmarceglia | last post by:
Hi, I have this website that doesn't work in Firefox 1.5: www.pianetaluca.com The HTML source is: <TITLE>PianetaLuca</TITLE> </HEAD>
9
7042
by: Dave | last post by:
Hi, I've been trawling the web for answer to my problem with no luck although I'm hardly alone it seems! Below is the generated source for an ASP page that posts a value called 'album' to another ASP page. The other page retrieves the value with Request.Form('album'); On Firefox this works fine every time. On IE6, I always get nothing. I'm pretty sure it's the posting side that is at fault, so that's what I've shown here. Oh, I tried...
1
4539
by: rbinington | last post by:
Hi, I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I want only one instance of the FCKEditor on the screen at one time so I make tabs that the user can click and I store the values in variables behind the scenes. I change the CSS class on the link that is the currently selected one. I have a really...
8
2513
by: starsky51 | last post by:
I'm sure it's something i'm doing wrong, I just can't see it. I've set up a simple page with the following code: <html> <head> <title>tester</title> <script language="javascript" type="text/javascript"> alert('First String Second String'); </script> </head>
0
9932
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11112
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10730
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10833
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7959
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7114
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5784
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5980
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4205
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.