<!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:absolute;top:20px;width:350px;height:263px;border:solid red 1px;
}
.parent IMG{
position:absolute;top:0px;width:350px;height:263px;
}
.updown2 {
position:absolute;z-Index:2;left:0px;top:-300px;width:350px;height:265px;background-Color:#FFFFCC;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Slide Panel II (21-October-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/StdImages/
/*
The script allows panels to slide into or out of a parent DIV element.
The slide in may be Up, Down, Up or Down.
The slide in and out positions may be specified or calculated by the script.
The slide in and out may be activated script by defined event call types
or by inline event calls.
The functional Code Size is 1.94K.
****** Application Notes.
**** The HTML and CSS Code.
** The Side Panel Parent DIV.
The Side Panel must be nested in a parent DIV
with a CSS position of 'absolute' or 'relative' and defined width and height.
The script assigns a CSS overflow of 'hidden' to this DIV on initialization.
** The Side Panel Element.
The Side Panel must be nested in a parent DIV and must be assigned a unique ID name.
The Side Panel Element must have its size, appearance and
'left'(for Up and Down) or 'top'(for Left and Right) positions.
defined by CSS rule or inline style.
The script assigns a CSS position of 'absolute'
and 'top'(for Up and Down) or 'left'(for Left and Right) positions.
**** Initialization.
Each panel must be initialized after the page has leaded by calling function zxcSlidePanelII.init
e.g.
zxcSlidePanelII.init({
PanelID:'slide1', // the unique ID name of the slide element. (string)
SlideMode:'Up', //(optional) the slide mode, 'Up', 'Down', 'Left' or 'Right. (string, default = Up)
Animate:1000, //(optional) the slide duration in millisec. (number, default = 1000)
SlideIn:224, //(optional) the slide in position in px. (number, default = calculated by the script)
SlideOut:264, //(optional) the slide out position in px. (number, default = calculated by the script)
EventType:'mouseover', //(optional) the activating event type(see Note 1). (string, default = 'mouseover')
SlideStart:function(o,ud){ //(optional) a function to call at slide start. (function, default = no function)
// o = the script instance object.
// ud = true = slide in, false = slide out.
},
SlideComplete:function(o,ud){ //(optional) a function to call at slide complete. (function, default = no function)
// o = the script instance object.
// ud = true = slide in, false = slide out.
}
});
** Note 1.
The valid event types are:
'mouseover',
'mouseup',
'mousedown',
'mouseup',
'click',
or false = inline event calls
**** Controlling the Panel.
In addition to the events specified in the initialization call
the panel may be controlled by inline event calls to function zxcSlidePanelII.Slide
<input type="button" name="" value="Toggle" onmouseup="zxcSlidePanelII.Slide('tst');" />
<input type="button" name="" value="Up" onmouseup="zxcSlidePanelII.Slide('tst',true);" />
<input type="button" name="" value="Down" onmouseup="zxcSlidePanelII.Slide('tst',false);" />
where:
parameter 0 = the unique ID name of the slide element. (string)
parameter 1 = true = slide in, false = slide out or null = toggle. (boolean, default = 'toggle')
*/
// Functional Code - NO NEED to Change.
var zxcSlidePanelII={
Slide:function(id,ud){
var o=this['zxc'+id],t;
if (o){
ud=typeof(ud)=='boolean'?ud:!o.ud;
typeof(o.SlideStart)=='function'?o.SlideStart(o,ud):null;
t=o.s[ud?3:2]
this.animate(o,o.s,o.s[4],t,new Date(),o.ms*Math.abs((o.s[4]-t)/o.s[5]));
o.ud=ud;
}
},
init:function(o){
var id=o.PanelID,m=o.SlideMode,ms=o.Animate,t=o.EventType,si=o.SlideIn,so=o.SlideOut,s=document.getElementById(id),p=s?s.parentNode:null;
if (s){
var pw=p.offsetWidth,ph=p.offsetHeight,sw=s.offsetWidth,sh=s.offsetHeight,md=typeof(m)=='string'?m.charAt(0).toUpperCase():'U',m=m=='D'||m=='L'||m=='R'?m:'U',m=md== 'L'||md=='R'?['left',pw,sw]:['top',ph,sh],n=typeof(so)=='number'?so:m[md=='U'||md=='L'?1:2]*(md=='U'||md=='L'?1:-1),t=t!==false?typeof(t)=='string'?t.toLowerCase().replace('on',''):'mouseover':null;
p.style.overflow='hidden';
o.s=[s,m[0],n,typeof(si)=='number'?si:md=='U'||md=='L'?m[1]-m[2]:0,n];
o.s[5]=o.s[2]-o.s[3];
s.style.position='absolute';
s.style[m[0]]=o.s[4]+'px';
o.ud=false;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000
if (t=='mouseover'){
this.addevt(p,'mouseover','Slide',id,true);
this.addevt(p,'mouseout','Slide',id,false);
}
else if (t){
this.addevt(p,t=='mousedown'||t=='click'?t:'mouseup','Slide',id,null);
}
this['zxc'+id]=o;
}
},
animate:function(o,a,f,t,srt,mS,s,i){
clearTimeout(a[6]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[4]=n;
a[0].style[a[1]]=a[4]+'px';
}
if (ms<mS){
a[6]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[4]=t;
a[0].style[a[1]]=t+'px';
typeof(o.SlideComplete)=='function'?o.SlideComplete(o,o.ud):null;
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
/*]]>*/
</script>
<script type="text/javascript" >
/*<![CDATA[*/
function Init(){
zxcSlidePanelII.init({
PanelID:'slide1', // the unique ID name of the slide element. (string)
SlideMode:'Up', //(optional) the slide mode, 'Up', 'Down', 'Left' or 'Right . (string, default = Up)
Animate:1000, //(optional) the slide duration in millisec. (number, default = 1000)
EventType:'mouseover', //(optional) the actvating event type(see Note 1). (string, default = 'mouseover')
SlideStart:function(o,ud){ //(optional) a function to call at slide start. (function, default = no function)
// o = the script instance object.
// ud = true = slide in, false = slide out.
},
SlideComplete:function(o,ud){ //(optional) a function to call at slide complete. (function, default = no function)
// o = the script instance object.
// ud = true = slide in, false = slide out.
}
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div class="parent" style="left:65px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
</div>
<div class="parent" style="left:445px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" alt="img" />
</div>
<div class="parent" style="left:825px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" alt="img" />
<iframe id="slide1" src="http://www.vicsjavascripts.org.uk/SlidePanelII/SlidePanelII.htm" class="updown2" ></iframe>
</div>
</body>
</html>