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 :
PHP Code:
<head>
<STYLE TYPE="text/css">
css info here </STYLE>
}
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 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;
}
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.
<!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>
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)
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 !
<!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
Last edited by vwphillips; 02-04-2006 at 06:05 PM..
Before you post, read our: 
