Code:
<!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[*/
.pop {
position:absolute;visibility:hidden;z-Index:5;width:615px;height:430px;background-Color:#FFCC66;
}
.mask {
background-Color:#FFFFCC;
opacity: .5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style>
</head>
<body>
<INPUT type="button" value="Profile 1" onmouseup="zxcClipPopUp.Open('drop1',true)" style="position:absolute;right:50px;top:100px;width:90px;"/>
<div id="drop1" class="pop" >
Profile 1
</div>
<INPUT type="button" value="Profile 2" onmouseup="zxcClipPopUp.Open('drop2',true)" style="position:absolute;right:50px;top:150px;width:90px;"/>
<div id="drop2" class="pop" >
Profile 2
</div>
<script type="text/javascript" >
/*<![CDATA[*/
// Clip Pop Up (18-August-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcClipPopUp={
Open:function(id,ud){
var o=this['zxc'+id];
if (o){
this.open(o,ud);
}
},
init:function(o){
var id=o.PopUpID,pop=document.getElementById(o.PopUpID),c=o.Clip,mcls=o.Mask,ms=o.Speed,show=o.OpenDelay,hide=o.CloseDelay,grp=o.Group;
if (pop){
var c=c&&o.clip!='false'?c:null,c=typeof(c)=='string'?c.charAt(0).toUpperCase():'C',w=pop.offsetWidth,h=pop.offsetHeight,msk=document.createElement('DIV'),mk,m='CHVRLDUIF';
o.mcls=typeof(mcls)=='string';
pop.style.position=o.mcls?'fixed':'absolute';
pop.style.visibility='hidden';
pop.style.top='-3000px';
document.body.appendChild(pop);
msk.style.position='fixed';
msk.style.visibility='hidden';
mk=msk.cloneNode(false);
msk.style.left='0px';
msk.style.top='0px';
msk.style.width='100%';
msk.className=mcls;
o.msk=msk;
mk.style.width=mk.style.height='0px';
mk.style.bottom='0px';
mk.style.right='0px';
o.mk=mk;
document.body.appendChild(msk);
document.body.appendChild(mk);
o.w=w;
o.h=h;
h=Math.round(h/2);
w=Math.round(w/2);
o.mde=Math.max(m.indexOf(c),0);
m=o.mde;
o.ra=[[0,h,w,h,w],[0,0,w,o.h,w],[0,h,o.w,h,0],[0,0,0,o.h,0],[0,0,o.w,o.h,o.w],[0,0,o.w,0,0],[0,o.h,o.w,o.h,0],[0,0,o.w,o.h,0],[0,0]];
o.status=false;
c=o.ra[m];
o.pop=[pop,m!=8?'clip':'',c.concat(),m!='8'?[100,0,o.w,o.h,0]:[100,100],m!='8'?c.concat():[0,0]];
o.ms=isFinite(ms*1)&&ms>0?ms*1:1000;
o.grp=grp;
o.grp?zxcClipPopUp[o.grp]=o:null;
o.ctr=true;
o.mcls?this.addevt(msk,'mouseup','open',o,false):null;
this['zxc'+id]=o;
}
},
open:function(o,ud,e){
var oop=this,grp=zxcClipPopUp[o.grp];
ud=typeof(ud)=='boolean'?ud:!o.status;
ud&&grp&&grp!=o&&grp.ud?oop.next(grp,false):null;
clearTimeout(o.to);
o.to=setTimeout(function(){
isFinite(e*1)&&e>=0?o.dly=setTimeout(function(){ oop.open(o,false); },e*1):null;
oop.animate(o,o.pop,o.pop[4].concat(),o.pop[ud?3:2],new Date(),o.ms*Math.abs((o.pop[4][0]-(ud?100:0))/100)+5,ud);
oop.pp(o);
ud?o.pop[0].style.visibility='visible':null;
o.mcls&&ud?o.msk.style.visibility='visible':null;
o.status=ud;
if (ud&&o.grp){
grp!=o?oop.open(grp,false):null;
zxcClipPopUp[o.grp]=o;
}
o.oncng?o.oncng(o,ud):null;
},ud?o.sdly:o.hdly);
return false;
},
pp:function(o){
o.msk.style.height=o.mk.offsetTop+'px';
o.pop[0].style.left=(o.msk.offsetWidth-o.pop[0].offsetWidth)/2+'px';
o.pop[0].style.top=(o.msk.offsetHeight-o.pop[0].offsetHeight)/2+'px';
},
animate:function(o,a,f,t,srt,mS,z){
clearTimeout(a[7]);
var oop=this,ms=new Date()-srt,n,z0=0;
for (;z0<t.length;z0++){
n=(t[z0]-f[z0])/mS*ms+f[z0];
a[4][z0]=Math.max(Math.round(isFinite(n)?n:a[4][z0]),0);
}
oop.cng(a,a[4]);
if (ms<mS){
a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,z); },10);
}
else {
z===false?a[0].style.visibility=o.msk.style.visibility='hidden':null;
oop.cng(a,z!==false?t:[0,0,0,0,0]);
}
},
cng:function(a,t){
a[1]=='clip'?a[0].style.clip='rect('+t[1]+'px,'+t[2]+'px,'+t[3]+'px,'+t[4]+'px)':this.opc(a[0],t[1]);
},
opc:function(o,t){
o.style.filter='alpha(opacity='+t+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=t/100-.001;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
}
}
zxcClipPopUp.init({
PopUpID:'drop1', // the unique ID name of the Pop Up DIV for a single element as an alternative. (default = class name option)
Group:'tom', //(optional) only one POPUP of the same group name can be open. (default = no group)
Clip:'C', //(optional) the Pop Up display mode(see Note 2) (default = 'C' = center)
Mask:'mask', //(optional) the class name of the 'mask' to obsure other page elements. (default = no mask)
Speed:500, //(optional) the animation duration in milli seconds. (default = 1000)
OpenDelay:20, //(optional) the open delay in milli seconds. (default = 20)
CloseDelay:500 //(optional) the close delay in milli seconds. (default = 500)
});
zxcClipPopUp.init({
PopUpID:'drop2', // the unique ID name of the Pop Up DIV for a single element as an alternative. (default = class name option)
Clip:'F', //(optional) the Pop Up display mode(see Note 2) (default = 'C' = center)
Group:'tom', //(optional) only one POPUP of a group name can be open. (default = no group)
Mask:'mask', //(optional) the class name of the 'mask' to obsure other page elements. (default = no mask)
Speed:500, //(optional) the animation duration in milli seconds. (default = 1000)
OpenDelay:20, //(optional) the open delay in milli seconds. (default = 20)
CloseDelay:500 //(optional) the close delay in milli seconds. (default = 500)
});
/*
** Note 2.
The Pop Up display modes are:
'C' = center clip,
'H' = horizontal clip,
'V' = vertical clip,
'R' = right clip,
'L' = left clip,
'D' = down clip,
'U' = up clip,
'F' = fade,
'I' = instant,
**** Script Functions.
Function zxcClipPopUp.Open may be call using inline event calls to control the script instance
i.e.
<INPUT type="button" value="Open" onmouseup="zxcClipPopUp.Open('drop1',true)" />
<INPUT type="button" value="Close" onmouseup="zxcClipPopUp.Open('drop1',false)" />
<INPUT type="button" value="Toggle" onmouseup="zxcClipPopUp.Open('drop1',null)" />
where:
parameter 0 = the unique name of the 'PopUp' element.
parameter 1 = true = open, false = close or null = toggle the Pop Up display.
*/
/*]]>*/
</script>
</body>
</html>
Bookmarks