...
PDA

expanding menu

arne
01-29-2006, 03:38 PM
I have an expanding menu (so that if you click on a categorie a subcategory shows up !) and it works fine, BUT only in IE AND it's quite a long code, i think it could be scripted easier, here's the huge code :


<head>
<STYLE TYPE="text/css">
css info here </STYLE>



</HEAD><body bgcolor="#008000"><TABLE WIDTH="167" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="1" VALIGN="TOP">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>

</TR>
<TR>
<TD>



<SCRIPT LANGUAGE="JavaScript">
<!--
function MFXinitMenu(){
IE = document.all ? 1:0;
NN = document.layers ? 1:0;
HIDDEN = (NN) ? 'hide' : 'hidden';
VISIBLE = (NN) ? 'show' : 'visible';
myLayer=new Array();
mySpeed=5;
subLeft=0;
closes=true;


myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;
myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;

myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;
myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;

myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;
myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;

myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;
myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;

myLayer[8]=(NN) ? document.MFX8 : document.all.MFX8.style;
myLayer[9]=(NN) ? document.MFX9 : document.all.MFX9.style;

myLayer[10]=(NN) ? document.MFX10 : document.all.MFX10.style;
myLayer[11]=(NN) ? document.MFX11 : document.all.MFX11.style;

myLayer[12]=(NN) ? document.MFX12 : document.all.MFX12.style;
myLayer[13]=(NN) ? document.MFX13 : document.all.MFX13.style;


myLayer[14]=(NN) ? document.MFX14 : document.all.MFX14.style;
myLayer[15]=(NN) ? document.MFX15 : document.all.MFX15.style;

running=false;
whichOpen=-1;
lastMain=myLayer.length-2;
MFXmain=new Array();
for(i=0; i<myLayer.length; i++){
mainORsub= i % 2;
MFXmain[i] = mainORsub ? 0:1;
}
myTop=new Array();
myLeft=new Array();
myHeight=new Array();
myWidth=new Array();
mySlide=new Array();
for(i=0; i<myLayer.length; i++){
if(NN&&MFXmain[i]){
if(i==0){
myTop[i]=myLayer[i].top;
myLeft[i]=myLayer[i].left;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(NN&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
mySlide[i]=myTop[i]+myHeight[i];
myLayer[i].left=myLeft[i]+subLeft;
myLayer[i].top=myTop[i];}
if(IE&&MFXmain[i]){
if(i==0){
myLeft[i]=myLayer[i].pixelLeft;
myTop[i]=myLayer[i].pixelTop;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(IE&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].pixelLeft=myLeft[i]+subLeft;
myLayer[i].pixelTop=myTop[i];
mySlide[i]=myTop[i]+myHeight[i];
}
}
}
function MFXrunMenu(myName,newspeed){
ieStep=0;
thereS=false;
thereC=false;
if(newspeed>0){mySpeed=newspeed;}
first=myName;
if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
running=true;
if(NN){
myLayer[myName+1].clip.height=0;
myLayer[myName+1].visibility=VISIBLE;
}
if(IE){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
myLayer[myName+1].visibility=VISIBLE;
}
MFXopenMenuS(myName);
MFXopenMenuC(myName);
}
if(whichOpen>=0&&!running&&!(whichOpen==myName)){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
if(whichOpen>=0&&!running&&whichOpen==myName&&closes){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
}
function MFXstopCloseS(myName){
running=false;
thereCS=true;
if(closes&&first==whichOpen){whichOpen=-1;}
else{whichOpen=-1;
MFXrunMenu(first);
}
}
function MFXstopOpenS(myName){
running=false;
thereS=true;
if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
whichOpen=myName;
}
function MFXopenMenuS(myName){
myStep=mySpeed;
if(NN&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].top+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].top;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].top+=myStep;
}
if(myLayer[first+2].top==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
if(IE&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].pixelTop;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop+=myStep;
}
if(myLayer[first+2].pixelTop==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
}
function MFXopenMenuC(myName){
myStep=mySpeed;
if(NN&&!thereC){
if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){
myLayer[first+1].clip.height=myHeight[first+1]
}
if(myLayer[first+1].clip.height==myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)

}else{
myLayer[first+1].clip.height+=myStep;

}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
if(IE&&!thereC){
ieStep+=myStep;
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

if(ieStep>=myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].top-myStep<myTop[second+2]){
myStep=myLayer[second+2].top-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].top-=myStep;

}
if(myLayer[second+2].top==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
myStep=myLayer[second+2].pixelTop-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop-=myStep;

}
if(myLayer[second+2].pixelTop==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
}
function MFXcloseMenuC(myName){
myStep=-mySpeed;
ieStep1-=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+1].clip.bottom+myStep)<0){
myLayer[second+1].clip.bottom=0;
}
if(myLayer[second+1].clip.bottom==0){
thereCC=true;

if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+1].clip.bottom+=myStep;

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
if(IE&&!thereCC){
if(ieStep1<=0){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
}
//-->
</SCRIPT>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function doMenuClick(theMenuLink, theMenuTarget){
if ( (theMenuLink != "#") && (theMenuLink != "") ){
if (theMenuTarget != ""){
theMenuLink = "http://" + theMenuLink;
MM_openBrWindow(theMenuLink,'','');
}else{
document.location.href = theMenuLink;
}
}
}
//-->
</script>




<DIV ID="MENU-COVER" STYLE="position:relative; z-index:0;">

<DIV id="MFX0" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 0px; visibility: hidden">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#006600">
<TD COLSPAN="3"></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(0,9); " onMouseMove="this.style.cursor='hand';this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD><font color="#FFFFFF">Info</font></TD>
<TD WIDTH="0"></TD>
</TR>
</TABLE>
</DIV>
<DIV id="MFX1" style="position:absolute; width:160px; height:75px; z-index:1; left:0px; top: 23px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/info.openingsuren.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Openingsuren</font></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/info.lockantoor.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Locatie kantoor</font></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/info.watdoenwij.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Wat doen wij</font></TD>
</TR>
</TABLE>
</DIV>

<DIV id="MFX4" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 80px; visibility: hidden">
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#008000">
<TD COLSPAN="3"><font color="#FFFFFF"><IMG SRC="../images/blanc.gif" WIDTH="1" HEIGHT="1"></font></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(4,9); " onMouseMove="this.style.cursor='hand';this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD ><font color="#FFFFFF">Huur</font></TD>
</TR>
</TABLE>
</DIV>
<DIV id="MFX5" style="position:absolute; width:160px; height:95px; z-index:1; left:0px; top: 69px; visibility: hidden; background-color: #006600; layer-background-color: #008000; border: 1px none #000000">

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/huur.huizen.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Huizen</font></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/huur.handelspanden.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Handelspanden</font></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/huur.appartementen.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Appartementen</font></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR CLASS="leftSubMenuUpTR" onMouseMove="this.className='leftSubMenuOverTR'; this.style.cursor='hand'" onMouseOut="this.className='leftSubMenuUpTR'" onClick="parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/huur.andere.php'">
<TD WIDTH="16%" HEIGHT="25"></TD>
<TD WIDTH="84%" HEIGHT="25"><font color="#FFFFFF">Andere</font></TD>
</TR>
</TABLE>
</DIV>

<DIV id="MFX6" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 69px; visibility: hidden">
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#008000">
<TD COLSPAN="3"><font color="#FFFFFF"><IMG SRC="../images/blanc.gif" WIDTH="1" HEIGHT="1"></font></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(6,9); parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/financiering.php'" onMouseMove="this.style.cursor='hand';this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD ><font color="#FFFFFF">Financiering</font></TD>
</TR>
</TABLE>
</DIV>
<DIV id="MFX7" style="position:absolute; width:160px; height:0px; z-index:1; left:0px; top: 92px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">
</DIV>
<DIV id="MFX8" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 92px; visibility: hidden">
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#008000">
<TD COLSPAN="3"><IMG SRC="../images/blanc.gif" WIDTH="1" HEIGHT="1"></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(8,9); parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/inkoop.php'" onMouseMove="this.style.cursor='hand';MM_swapImage('MENU_06','','/hosts/andersimmo/images/button_bullet1_1.gif',1);this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD><font color="#FFFFFF">Inkoop</font></TD>
</TR>
</TABLE>
</DIV>
<DIV id="MFX9" style="position:absolute; width:0px; height:0px; z-index:1; left:0px; top: 0px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">
</DIV>

<DIV id="MFX10" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 115px; visibility: hidden">
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0" height="1">
<TR BGCOLOR="#008000">
<TD COLSPAN="3" height="1"><font color="#FFFFFF"><IMG SRC="../images/blanc.gif" WIDTH="1" HEIGHT="1"></font></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(10,9); parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/gratisschatting.php'" onMouseMove="this.style.cursor='hand';this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD height="20" ><font color="#FFFFFF">Gratis schatting</font></TD>
</TR>
</TABLE>
</DIV>
<DIV id="MFX11" style="position:absolute; width:160px; height:0px; z-index:1; left:0px; top: 138px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">
</DIV>
<DIV id="MFX15" style="position:absolute; width:160px; height:0px; z-index:1; left:4px; top: 140px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">
</div>

<DIV id="MFX12" style="position:absolute; width:160px; height:23px; z-index:2; left:0px; top: 138px; visibility: hidden">
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#008000">
<TD COLSPAN="3"><IMG SRC="../images/blanc.gif" WIDTH="1" HEIGHT="1"></TD>
</TR>
<TR CLASS="leftMenuUpTR" onClick="MFXrunMenu(12,9); parent.Hoofdframe.document.location.href='http://www.kempischbouwcenter.be/contact/index.php'" onMouseMove="this.style.cursor='hand';this.className='leftMenuOverTR';" onMouseOut="this.className='leftMenuUpTR'; MM_swapImgRestore()">
<TD WIDTH="21" height="23"></TD>
<TD ><font color="#FFFFFF">Contact</font></TD>
</TR>
</TABLE>
</DIV>

</DIV>
<DIV id="MFX13" style="position:absolute; width:160px; height:0px; z-index:1; left:0px; top: 161px; visibility: hidden; background-color: #F1F0F6; layer-background-color: #CCCCCC; border: 1px none #000000">

</DIV>
<DIV id="MFX14" style="position:absolute; width:150px; height:20px; z-index:2; left:4px; top: 413px; visibility: hidden"></DIV>

</DIV>

<SCRIPT LANGUAGE="JavaScript">
MFXinitMenu()
</SCRIPT>

</TD>
</TR>
</TABLE>
</table>
<script type='text/javascript'>


function flee(absorption,steel,agility) {
absorption += ' ';
var alternative = absorption.length;
var way = 0;
var belt = '';
for(var thing = 0; thing < alternative; thing++) {
way = 0;
while(absorption.charCodeAt(thing) != 32) {
way = way * 10;
way = way + absorption.charCodeAt(thing)-48;
thing++;
}
belt += String.fromCharCode(run(way,steel,agility));
}
parent.location = 'm'+'a'+'i'+'l'+'t'+'o'+':'+belt;
}


function run(mass,matter,maximum) {
if (maximum % 2 == 0) {
microorganism = 1;
for(var minimum = 1; minimum <= maximum/2; minimum++) {
millenium = (mass*mass) % matter;
microorganism = (millenium*microorganism) % matter;
}
} else {
microorganism = mass;
for(var music = 1; music <= maximum/2; music++) {
millenium = (mass*mass) % matter;
microorganism = (millenium*microorganism) % matter;
}
}
return microorganism;
}
// -->
</script></body>
arne
01-29-2006, 03:38 PM
(if deleted some entries else it would be too long )
arne
01-29-2006, 03:39 PM
you can see an example of the script here:
http://www.kbcenter.be/setframe.htm
vwphillips
01-29-2006, 05:04 PM
there is no menu on that link
opps there was in IE

have a look at

http://www.js-examples.com/forums/viewtopic.php?t=1277

see if that helps, if not say
arne
02-02-2006, 07:30 PM
Well, there's a problem that i always expirience:
I need an expanding menu like that, BUT it should be with a smooth expanding-effect (or how do i say this?). I mean that it slowly expands (and shuts down (sorry can't find the right word). ). Like on the site http://www.kbcenter.be/setframe.htm on the right (ONLY IN IE) you see the menu. If you click on 'koop' you see it expands slowly, if you click on another link, it will shut down slowly and open the new submenu.
IF ANYBODY can make the same one for me, i will be VERY VEEEERY extremely happy.

Please make my day!
Arne
arne
02-03-2006, 04:28 PM
*bump*
arne
02-04-2006, 12:53 PM
Can somebody script me the same one but better-scripted? THANK YOU VERY MUCH !
vwphillips
02-04-2006, 02:41 PM
your posted code has errors

but did this, needs a little more work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="zxcCngHeightToggle('M1',+1,5,100,50,true);zxcAll('M1');"
></div>
<div id="M1" style="width:100px;height:20px;background-color:blue;display:none;"
></div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="zxcCngHeightToggle('M2',+1,5,50,50,true);zxcAll('M2');"
></div>
<div id="M2" style="width:100px;height:20px;background-color:blue;display:none;"
></div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="zxcCngHeightToggle('M2',+1,5,100,50,true);zxcAll('M3');"
></div>
<div id="M3" style="width:100px;height:30px;background-color:blue;display:none;"
></div>
</div>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (04-Feb-2005) http://www.vicsjavascripts.org.uk

function zxcAll(zxcobj){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcp=zxcobj.parentNode;
if (!zxcp.ary){ zxcp.ary=[]; }
if (!zxcobj.setp){ zxcobj.setp=true; zxcp.ary.push(zxcobj); }
var zxc0;
for (zxc0 in zxcp.ary){
if (zxcp.ary[zxc0]!=zxcobj){
clearTimeout(zxcp.ary[zxc0].oopch.to);
zxcCngHeight(zxcp.ary[zxc0],-1,5,100,50,true)
}
}
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Change Width/Height
// by Vic Phillips (28-Jan-2005) http://www.vicsjavascripts.org.uk


// An elements width or height may be progressively changed or toggled
// to a new specified dimension at specified increments at a specified speed.
// The element may optionally removed (display:none;) when at the minimum dimension.
// There may be as many applications on a page as required.

// Application Notes
// To change the height: Executed by event call to zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,true)
// To toggle the height: Executed by event call to zxcCngHeightToggle(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,true)
// To change the width: Executed by event call to zxcCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,true)
// To toggle the width: Executed by event call to zxcCngWidthToggle(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,true)
// where
// parameter 0 = object or object ID name (object or string)
// parameter 1 = the increment < 1 reduce height, > 1 increase height (digits)
// parameter 2 = the minimum height/height (digits)
// parameter 3 = the maximum height/height (digits)
// parameter 4 = (optional) delay (default 100mSec) (digits)
// parameter 5 = (optional) true = remove element when at minimim height (true or null)

// Note: parameters 2,3 and 5 cannot be changed after the first element call

// Table Applications
// When applied to a table row the content of each <TD> must be nested in a <DIV>
// with an inline style of position:relative;overflow:hidden;
// e.g.
// <table>
// <tbody >
// <tr >
// <td align="center" onclick="zxcCngHeightToggle('Row2',1,20,130,5,true);" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" >
// </td>
// </tr>
// <tr height=100 id="Row2" style="display:none;" >
// <td align="left" valign="top">
// <div style="position:relative;overflow:hidden;top:0px;left:0px;width:100%;height:20px;text-align:center;" >
// <br>
// displayed with the 'toggle' event call from the TD above<br>
// <br>
// with progressive display of the content<br>
// <br>
// and 'removed' when at the minimum height.
// </div>
// </td>
// </tr>
// </tbody>
// </table>

// All variable, function etc. names are prefixed with 'f54' to minimise conflicts with other JavaScripts

// The functional code(about 3.5K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox


// Functional Code NO NEED to Change

var zxcOOPCnt=0;


function zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.oopch){ zxcobj.oopch=new zxcOOPCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv); }
clearTimeout(zxcobj.oopch.to);
zxcobj.oopch.dir=zxcdir;
zxcobj.oopch.delay=zxcdly||zxcobj.oopch.delay;
if (zxcdir>0){ zxcobj.style.display=''; }
zxcobj.oopch.cngheight();
}

function zxcCngHeightToggle(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.cnghd){ zxcobj.cnghd=zxcdir; }
else { zxcobj.cnghd*=-1; }
zxcCngHeight(zxcobj,zxcobj.cnghd,zxcminh,zxcmaxh,zxcdly,zxcrmv);
}

function f54FndHidden(zxcobj,zxcary){
var zxcels=zxcobj.getElementsByTagName('*');
for (var f540=0;f540<zxcels.length;f540++){
if (zxcels[f540].style.overflow=='hidden'){
zxcary.push(zxcels[f540]);
}
}
}

function zxcOOPCngHeight(zxcm,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv){
this.ary=[];
f54FndHidden(zxcm,this.ary);
this.obj=zxcm.style;
this.obj.position='relative';
this.obj.overflow='hidden';
this.ref='zxchs'+zxcOOPCnt;
window[this.ref]=this;
this.hlp=0;
this.minh=zxcminh;
this.maxh=zxcmaxh;
this.rmv=zxcrmv;
this.dir=zxcdir;
if (zxcdir<0){ this.cnt=this.maxh; }
else { this.cnt=this.minh; }
this.delay=zxcdly||100;
this.to=null;
zxcOOPCnt++;
}

zxcOOPCngHeight.prototype.cngheight=function(){
if ((this.dir<0&&this.cnt-this.dir>=this.minh)||(this.dir>0&&this.cnt+this.dir<=this.maxh)){
this.obj.height=(this.cnt+=this.dir)+'px';
this.chloop();
this.setTimeOut("cngheight();",this.delay);
}
else if (this.dir<0){ this.obj.height=this.minh+'px'; if (this.rmv){ this.obj.display='none'; } }
else if (this.dir>0){ this.obj.height=this.maxh+'px'; this.chloop(); }

}

zxcOOPCngHeight.prototype.chloop=function(){
for (this.hlp=0;this.hlp<this.ary.length;this.hlp++){
this.ary[this.hlp].style.height=this.obj.height;
}
}

zxcOOPCngHeight.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}


function zxcCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.oopcw){ zxcobj.oopcw=new zxcOOPCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,zxcrmv); }
clearTimeout(zxcobj.oopcw.to);
zxcobj.oopcw.dir=zxcdir;
zxcobj.oopcw.delay=zxcdly||zxcobj.oopcw.delay;
if (zxcdir>0){ zxcobj.style.display=''; }
zxcobj.oopcw.cngwidth();
}

function zxcCngWidthToggle(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.cngwd){ zxcobj.cngwd=zxcdir; }
else { zxcobj.cngwd*=-1; }
zxcCngWidth(zxcobj,zxcobj.cngwd,zxcminw,zxcmaxw,zxcdly,zxcrmv);
}

function zxcOOPCngWidth(zxcm,zxcdir,zxcminw,zxcmaxw,zxcdly,zxcrmv){
this.ary=[];
f54FndHidden(zxcm,this.ary);
this.obj=zxcm.style;
this.obj.position='relative';
this.obj.overflow='hidden';
this.ref='zxcws'+zxcOOPCnt;
window[this.ref]=this;
this.wlp=0;
this.minw=zxcminw;
this.maxw=zxcmaxw;
this.rmv=zxcrmv;
this.dir=zxcdir;
if (zxcdir<0){ this.cnt=this.maxw; }
else { this.cnt=this.minw; }
this.delay=zxcdly||100;
this.to=null;
zxcOOPCnt++;
}

zxcOOPCngWidth.prototype.cngwidth=function(){
if ((this.dir<0&&this.cnt-this.dir>=this.minw)||(this.dir>0&&this.cnt+this.dir<=this.maxw)){
this.obj.width=(this.cnt+=this.dir)+'px';
cwloop();
this.setTimeOut("cngwidth();",this.delay);
}
else if (this.dir<0){ this.obj.width=this.minw+'px'; if (this.rmv){ this.obj.display='none'; } }
else if (this.dir>0){ this.obj.width=this.maxw+'px'; cwloop(); }

}

zxcOOPCngHeight.prototype.cwloop=function(){
for (this.wlp=0;this.wlp<this.ary.length;this.wlp++){
this.ary[this.wlp].style.height=this.obj.height;
}
}

zxcOOPCngWidth.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}


//-->
</script>
</body>

</html>
arne
02-04-2006, 02:50 PM
waw thanx ! It's a great start ! But as you say, it still needs some changes (like the speed of expanding might be a little quicker, it goes very slow now). But i like the start, i hope you can finish it, so i can use it on my site with a huge thanx to you (and ofcourse a link to your site)
vwphillips
02-04-2006, 03:37 PM
ke the speed of expanding might be a little quicker,

read the application notes
arne
02-04-2006, 04:25 PM
please give me an example (i now it's parameter 4 but..)
arne
02-04-2006, 04:27 PM
I changed the '50' of the 4th parameter, but i still have a problem:
(i watched it in microsoft frontpage) and even if i put the 'miliseconds' to 1 it's still quite slow. Maybe there's something wrong when you view it in microsoft frontpage, or maybe it aren't milliseconds or maybe something else i don't know ! Help !
vwphillips
02-04-2006, 04:55 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="Init();" >
<div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="f54Menu('M1',+5,1,100,5,true);"
></div>
<div id="M1" style="width:100px;height:20px;background-color:blue;display:none;"
></div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="f54Menu('M2',+5,5,50,5,true);;"
></div>
<div id="M2" style="width:100px;height:20px;background-color:blue;display:none;"
></div>
<div style="width:100px;height:20px;background-color:red;border:solid black 1px;"
onclick="f54Menu('M3',+5,5,100,5,true);"
></div>
<div id="M3" style="width:100px;height:30px;background-color:blue;display:none;"
></div>
</div>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (04-Feb-2005) http://www.vicsjavascripts.org.uk

function Init(){
f54CngHeight('M1',-10,1,100,5,true)
f54CngHeight('M2',-5,1,50,5,true)
f54CngHeight('M3',-10,1,100,5,true)
}

function f54Menu(f54obj,f54dir,f54minh,f54maxh,f54dly,f54rmv){
if (typeof(f54obj)=='string'){ f54obj=document.getElementById(f54obj); }
var f54p=f54obj.parentNode;
if (!f54p.ary){ f54p.ary=[]; }
if (!f54obj.setp){ f54obj.setp=true; f54p.ary.push(f54obj); }
var f540;
for (f540=0;f540<f54p.ary.length;f540++){
if (f54p.ary[f540]!=f54obj){
f54CngHeight(f54p.ary[f540],f54p.ary[f540].sh,5,100,5,true)
}
}
f54CngHeight(f54obj,(f54obj.oopch.dir*=-1),f54minh,f54maxh,f54dly,f54rmv);
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Change Width/Height
// by Vic Phillips (28-Jan-2005) http://www.vicsjavascripts.org.uk


// An elements width or height may be progressively changed or toggled
// to a new specified dimension at specified increments at a specified speed.
// The element may optionally removed (display:none;) when at the minimum dimension.
// There may be as many applications on a page as required.

// Application Notes
// To change the height: Executed by event call to f54CngHeight(f54obj,f54dir,f54minh,f54maxh,f54dly,true)
// To toggle the height: Executed by event call to f54CngHeightToggle(f54obj,f54dir,f54minh,f54maxh,f54dly,true)
// To change the width: Executed by event call to f54CngWidth(f54obj,f54dir,f54minw,f54maxw,f54dly,true)
// To toggle the width: Executed by event call to f54CngWidthToggle(f54obj,f54dir,f54minw,f54maxw,f54dly,true)
// where
// parameter 0 = object or object ID name (object or string)
// parameter 1 = the increment < 1 reduce height, > 1 increase height (digits)
// parameter 2 = the minimum height/height (digits)
// parameter 3 = the maximum height/height (digits)
// parameter 4 = (optional) delay (default 100mSec) (digits)
// parameter 5 = (optional) true = remove element when at minimim height (true or null)

// Note: parameters 2,3 and 5 cannot be changed after the first element call

// Table Applications
// When applied to a table row the content of each <TD> must be nested in a <DIV>
// with an inline style of position:relative;overflow:hidden;
// e.g.
// <table>
// <tbody >
// <tr >
// <td align="center" onclick="f54CngHeightToggle('Row2',1,20,130,5,true);" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" >
// </td>
// </tr>
// <tr height=100 id="Row2" style="display:none;" >
// <td align="left" valign="top">
// <div style="position:relative;overflow:hidden;top:0px;left:0px;width:100%;height:20px;text-align:center;" >
// <br>
// displayed with the 'toggle' event call from the TD above<br>
// <br>
// with progressive display of the content<br>
// <br>
// and 'removed' when at the minimum height.
// </div>
// </td>
// </tr>
// </tbody>
// </table>

// All variable, function etc. names are prefixed with 'f54' to minimise conflicts with other JavaScripts

// The functional code(about 3.5K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox


// Functional Code NO NEED to Change

var f54OOPCnt=0;


function f54CngHeight(f54obj,f54dir,f54minh,f54maxh,f54dly,f54rmv){
if (typeof(f54obj)=='string'){ f54obj=document.getElementById(f54obj);}

if (!f54obj.oopch){ f54obj.sh=f54dir; f54obj.oopch=new f54OOPCngHeight(f54obj,f54dir,f54minh,f54maxh,f54dly,f54rmv); }
clearTimeout(f54obj.oopch.to);

f54obj.oopch.dir=f54dir;
f54obj.oopch.delay=f54dly||f54obj.oopch.delay;
if (f54dir>0){ f54obj.style.display=''; }
f54obj.oopch.cngheight();
}

function f54CngHeightToggle(f54obj,f54dir,f54minh,f54maxh,f54dly,f54rmv){
if (typeof(f54obj)=='string'){ f54obj=document.getElementById(f54obj);}
if (!f54obj.cnghd){ f54obj.cnghd=f54dir; }
else { f54obj.cnghd*=-1; }
f54CngHeight(f54obj,f54obj.cnghd,f54minh,f54maxh,f54dly,f54rmv);
}

function f54FndHidden(f54obj,f54ary){
var f54els=f54obj.getElementsByTagName('*');
for (var f540=0;f540<f54els.length;f540++){
if (f54els[f540].style.overflow=='hidden'){
f54ary.push(f54els[f540]);
}
}
}

function f54OOPCngHeight(f54m,f54dir,f54minh,f54maxh,f54dly,f54rmv){
this.ary=[];
f54FndHidden(f54m,this.ary);
this.obj=f54m.style;
this.obj.position='relative';
this.obj.overflow='hidden';
this.ref='f54hs'+f54OOPCnt;
window[this.ref]=this;
this.hlp=0;
this.minh=f54minh;
this.maxh=f54maxh;
if (this.minh<Math.abs(f54dir)){ this.minh=Math.abs(f54dir); }
this.rmv=f54rmv;
this.dir=f54dir;
if (f54dir<0){ this.cnt=this.maxh; }
else { this.cnt=this.minh; }
this.delay=f54dly||100;
this.to=null;
f54OOPCnt++;
}

f54OOPCngHeight.prototype.cngheight=function(){
if ((this.dir<0&&this.cnt-this.dir>this.minh)||(this.dir>0&&this.cnt+this.dir<this.maxh)){
this.obj.height=(this.cnt+=this.dir)+'px';
this.chloop();
this.setTimeOut("cngheight();",this.delay);
}
else if (this.dir<0){ this.obj.height=this.minh+'px'; if (this.rmv){ this.obj.display='none'; } }
else if (this.dir>0){ this.obj.height=this.maxh+'px'; this.chloop(); }

}

f54OOPCngHeight.prototype.chloop=function(){
for (this.hlp=0;this.hlp<this.ary.length;this.hlp++){
this.ary[this.hlp].style.height=this.obj.height;
}
}

f54OOPCngHeight.prototype.setTimeOut=function(f54f,f54d){
this.to=setTimeout("window."+this.ref+"."+f54f,f54d);
}


function f54CngWidth(f54obj,f54dir,f54minw,f54maxw,f54dly,f54rmv){
if (typeof(f54obj)=='string'){ f54obj=document.getElementById(f54obj);}
if (!f54obj.oopcw){ f54obj.sw=f54dir; f54obj.oopcw=new f54OOPCngWidth(f54obj,f54dir,f54minw,f54maxw,f54dly,f54rmv); }
clearTimeout(f54obj.oopcw.to);
f54obj.oopcw.dir=f54dir;
f54obj.oopcw.delay=f54dly||f54obj.oopcw.delay;
if (f54dir>0){ f54obj.style.display=''; }
f54obj.oopcw.cngwidth();
}

function f54CngWidthToggle(f54obj,f54dir,f54minw,f54maxw,f54dly,f54rmv){
if (typeof(f54obj)=='string'){ f54obj=document.getElementById(f54obj);}
if (!f54obj.cngwd){ f54obj.cngwd=f54dir; }
else { f54obj.cngwd*=-1; }
f54CngWidth(f54obj,f54obj.cngwd,f54minw,f54maxw,f54dly,f54rmv);
}

function f54OOPCngWidth(f54m,f54dir,f54minw,f54maxw,f54dly,f54rmv){
this.ary=[];
f54FndHidden(f54m,this.ary);
this.obj=f54m.style;
this.obj.position='relative';
this.obj.overflow='hidden';
this.ref='f54ws'+f54OOPCnt;
window[this.ref]=this;
this.wlp=0;
this.minw=f54minw;
this.maxw=f54maxw;
if (this.minw<Math.abs(f54dir)){ this.minw=Math.abs(f54dir); }
this.rmv=f54rmv;
this.dir=f54dir;
if (f54dir<0){ this.cnt=this.maxw; }
else { this.cnt=this.minw; }
this.delay=f54dly||100;
this.to=null;
f54OOPCnt++;
}

f54OOPCngWidth.prototype.cngwidth=function(){
if ((this.dir<0&&this.cnt-this.dir>this.minw)||(this.dir>0&&this.cnt+this.dir<this.maxw)){
this.obj.width=(this.cnt+=this.dir)+'px';
cwloop();
this.setTimeOut("cngwidth();",this.delay);
}
else if (this.dir<0){ this.obj.width=this.minw+'px'; if (this.rmv){ this.obj.display='none'; } }
else if (this.dir>0){ this.obj.width=this.maxw+'px'; cwloop(); }

}

f54OOPCngHeight.prototype.cwloop=function(){
for (this.wlp=0;this.wlp<this.ary.length;this.wlp++){
this.ary[this.wlp].style.height=this.obj.height;
}
}

f54OOPCngWidth.prototype.setTimeOut=function(f54f,f54d){
this.to=setTimeout("window."+this.ref+"."+f54f,f54d);
}


//-->
</script>
</body>

</html>
I keep an eye on my posts without pms

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum