PDA

View Full Version : gooey menu vertical instead of horizontal



chopshop777
11-23-2012, 05:34 AM
1) Script Title: gooey menu

2) Script URL (on DD):

3) Describe problem: http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

I was just wondering how it would be possible to make this menu vertical instead of horizontal . any help would be greatly appreciated. cheers. Ed

vwphillips
11-26-2012, 03:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:relative;left:100px;top:100px;width:500px;height:500px;border:solid #FFCC66 1px;
}

.div {
position:relative;z-Index:1;left:100px;top:100px;width:100px;height:100px;background-color:#FFCC66;
}

.item {
cursor:pointer;
}

.frame {
position:absolute;z-Index:0;left:100px;top:100px;width:120px;height:120px;border:solid red 1px;
}

/*]]>*/
</style>

</head>

<body>
<div id="tst" class="parent" >
<a class="item" >Some Text</a>
<div class="div item" >Tom</div>
<br /><br />
<div class="div item" style="left:200px;width:200px;height:200px;" >Joe</div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
// Frame Element (26-November-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFrameElement={

init:function(o){
var id=o.ParentID,ms=o.MoveDuration,bms=o.BounceDuration,rsz=o.ReSizeBy,s=o.SelectElement,p=document.getElementById(id),obj=document.createElement('DIV'),ms=typeof( ms)=='number'?ms:1000,bms=typeof(bms)=='number'?bms:ms,reg=new RegExp('\\W'+o.ElementClass+'\\W'),els=p.getElementsByTagName('*'),ary=[],z0=0;
for (;z0<els.length;z0++){
if(reg.test(' '+els[z0].className+' ')){
this.addevt(els[z0],'mouseup','goto',id,ary.length);
ary.push(els[z0]);
}
}
obj.className=o.FrameClass;
o=zxcFrameElement['zxc'+id]={
p:p,
obj:obj,
ary:ary,
ms:ms,
rsz:typeof(rsz)=='number'?rsz:false,
blft:[10,3,bms],
btop:[10,3,bms],
i:Math.PI/(2*ms)
}
obj.style.visibility=ary[s]?'visible':'hidden';
p.appendChild(obj);
this.goto(id,ary[s]?s:0,20);
},

goto:function(id,nu,ms){
var o=zxcFrameElement['zxc'+id];
if (o&&o.ary[nu]){
var mS=!ms?o.ms:ms,w=o.ary[nu].offsetWidth,h=o.ary[nu].offsetHeight,p=this.pos(o.p),pp=this.pos(o.ary[nu]),t;
if (o.rsz){
w+=o.rsz;
h+=o.rsz;
this.move(o,'width',o.obj.offsetWidth,w,new Date(),mS,null,'s');
this.move(o,'height',o.obj.offsetHeight,h,new Date(),mS,null,'s');
}
t=pp[0]-p[0]+(o.ary[nu].offsetWidth-w)/2;
this.bary(o.blft,t,w);
this.move(o,'left',o.obj.offsetLeft,t,new Date(),mS,mS!=ms?o.blft:null,'s');
t=pp[1]-p[1]+(o.ary[nu].offsetHeight-h)/2;
this.bary(o.btop,t,h);
this.move(o,'top',o.obj.offsetTop,t,new Date(),mS,mS!=ms?o.btop:null,'s');
}
},

bary:function(b,t,sz){
b[0]=sz/10;
b[3]=[];
for (var z0=0;z0<b[1];z0++){
b[3].push(t+b[0]*(1-Math.sin((z0*90/b[1])*Math.PI/180))+.001);
b[3].push(t+.001);
}
},

move:function(o,mde,f,t,srt,mS,b,sc,inc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(o.i*ms)+f:(t-f)/mS*ms+f);
if (isFinite(now)){
o.obj.style[mde]=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.move(o,mde,f,t,srt,mS,b,sc,inc); },10);
}
else {
o.obj.style[mde]=t+'px';
if (b&&b[3]&&b[3][0]){
this.move(o,mde,t,b[3][0],new Date(),b[2]/(b[1]*2),b);
b[3].splice(0,1);
}
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}

}

zxcFrameElement.init({
ParentID:'tst', // the unique ID name of the parent DIV. (string)
ElementClass:'item', // the common class name of the elements to frame. (string)
FrameClass:'frame', // the class name of the frame DIV. (string)
MoveDuration:1000, //(optional) the move duration in milli seconds. (number. default = 1000)
BounceDuration:500, //(optional) the bounce duration in milli seconds. (number. default = MoveDuration)
SelectElement:0, //(optional) the index number of the element to be framed. (number. default = the frame DIV is hidden)
ReSizeBy:20 //(optional) the frame is resized to the selected element plus ReSizeBy. (number. default = no resize)
});

/*]]>*/
</script>

</body>

</html>