Javascript Menü in Mozilla
GAmperl Markus
- browser
0 XaraX0 Gamperl Markus0 XaraX0 Gamperl Markus0 XaraX
Hallo Leute!
Ich hab da ein CSS + Javascript Menü welches toll im Internet Explorer, Opera und Netscape Navigator läuft.
Doch ab Netscape 6 bzw. bei allen exotischen Mozilla Varianten läufts nicht...
Errors gibts bei folgender Funktion:
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=(n) ? this.ref.height:eval(obj+'.offsetHeight')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
Die Variable n steht für Netscape Navigator. Weis jemand wie die Objekte beispielse für Mozilla aussehen???
Danke!
Markus
Hallo Markus,
bin passionierter Mozilleran, daher würde mich der ganze Code interessieren. Bitte gib doch mal einen Link an oder poste den ganzen Code. Danke!
Gruß aus Berlin!
eddi
Hallo Markus,
bin passionierter Mozilleran, daher würde mich der ganze Code interessieren. Bitte gib doch mal einen Link an oder poste den ganzen Code. Danke!
Gruß aus Berlin!
eddi
Hallo Eddi!
Danke für deine Hilfe! - Mozilla wills einfach nicht... :-(
Hier das gesamte File (menu.html):
<html>
<head>
<SCRIPT language="javascript">
var stayFolded=false
/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=(n) ? this.ref.height:eval(obj+'.offsetHeight')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/************************************************************************************
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
************************************************************************************/
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oTop[4]=new makeMenu('divTop5','divCont')
oTop[5]=new makeMenu('divTop6','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub[i].hideIt()
}
for(i=1;i<oTop.length;i++){
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
</SCRIPT>
<STYLE>DIV.clTop {
POSITION: absolute; WIDTH: 120px
}
DIV.clSub {
LEFT: 10px; POSITION: absolute; WIDTH: 120px
}
#divCont {
HEIGHT: 300px; LEFT: 30px; POSITION: relative; TOP: 0px; WIDTH: 170px
}
A.clMain {
COLOR: black; FONT-FAMILY: Arial, Verdana, Helvetica, Helv; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A.clSubb {
COLOR: black; FONT-FAMILY: Arial, Verdana, Helvetica, Helv; FONT-SIZE: 14px; TEXT-DECORATION: none
}
#divMain {
POSITION: absolute
}
</STYLE>
</head>
<body onload="init();">
<!-- Menu start -->
<div id="divCont">
<div class="clTop" id="divTop1">
<a class="clMain" href="http://simplythebest.net#" onclick="menu(0); return false">[choice0]</a><br>
<div class="clSub" id="divSub1">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 4</a><br>
</div>
</div>
<div class="clTop" id="divTop2">
<a class="clMain" href="http://simplythebest.net/scripts/#" onclick="menu(1); return false">[choice1]</a><br>
<div class="clSub" id="divSub2">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
</div>
</div>
<div class="clTop" id="divTop3">
<a class="clMain" href="http://simplythebest.net/scripts/#" onclick="menu(2); return false">[choice2]</a><br>
<div class="clSub" id="divSub3">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
</div>
</div>
<div class="clTop" id="divTop4">
<a class="clMain" href="http://simplythebest.net" onclick="menu(3); return false">[choice3]</a><br>
<div class="clSub" id="divSub4">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
</div>
</div>
<div class="clTop" id="divTop5">
<a class="clMain" href="http://simplythebest.net" onclick="menu(4); return false">[choice4]</a><br>
<div class="clSub" id="divSub5">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 4</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 5</a><br>
</div>
</div>
<div class="clTop" id="divTop6">
<a class="clMain" href="http://simplythebest.net" onclick="menu(5); return false">[choice5]</a><br>
<div class="clSub" id="divSub6">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a>
</div>
</div>
</div>
<!-- Menu end -->
</body>
</html>
Hallo Markus,
<html>
<head><SCRIPT language="javascript">
var stayFolded=false
/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
Der Mozilla hat keine layers mehr,
var ie = (document.all) ? 1:0;
und all kennt er ach nicht ;)
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
/************************************************************************************
Making cross-browser objects
************************************************************************************/
Schau mal bitte, ob das schon zur Lösung ausreicht, sonst noch mal melden ;)
Gruß aus Berlin!
eddi
Hallo Eddi!
Ich bin leider nicht der JavaScript Experte... - ich weis zwar jetzt dass ich mit getElementById arbeiten sollte, aber allzuviel mehr ist dann auch wieder nicht vorhanden...
Und wie schauts dann bei Netscape < 6 und IE aus?
Danke!!!
Markus
Hallo Markus!
Ich bin leider nicht der JavaScript Experte... - ich weis zwar jetzt dass ich mit getElementById arbeiten sollte, aber allzuviel mehr ist dann auch wieder nicht vorhanden...
Und wie schauts dann bei Netscape < 6 und IE aus?
Gute Frage... (Ich bin da echt zu faul unt klammere das Ära des Mittelalter von Browser und erstrecht das Steinzeitalter aus)
In dem Script geht es schlicht und einfach darum bereist hartkodierte HTML-Bereiche als Submenü ein und anszublenden. Das kann man auch ohne Objektkonstruktionen und anderen mist.
Wenn es Dir hilft - Ihr ist meine Aktuelle Baustelle zum Thema:
Anzeigebeispiel: http://eddi.to-grip.de/v/
HTML- /JS-Code: http://eddi.to-grip.de/v/zeilen.php
durchnummeriert: http://eddi.to-grip.de/v/zeilen.php?nummer
Gruß aus Berlin!
eddi