Im looking for a peel back pop up advertisement script which opens the large advertisement on page load and then sticks to right column on desired area with smaller size
Printable View
Im looking for a peel back pop up advertisement script which opens the large advertisement on page load and then sticks to right column on desired area with smaller size
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vics JavaScripts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Vic Phillips">
<meta name="keywords" content="JavaScript, dhtml, javascript, css, dynamic html, Zoom, Image, Slide Show" />
<meta name="description" content="a collection of javascripts." />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://www.vicsjavascripts.org.uk/SiteCSS.css" type="text/css" >
<link rel="stylesheet" href="http://www.vicsjavascripts.org.uk/vwpSearchPanel.css" type="text/css" >
<style type="text/css">
#pop {
position:fixed;z-Index:101;visibility:hidden;left:60px;top:100px;width:351px;height:263px;
}
#anchor {
position:absolute;overflow:hidden;left:660px;top:115px;width:200px;height:150px;border:solid red 1px;
}
</style>
<script src="http://www.vicsjavascripts.org.uk/SiteFunctions.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/SiteDates.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/UpdateArrays.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/UpdateArrays.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/vwpSearchPanel.js" type="text/javascript"></script>
<script type="text/javascript">
// Zoom Pan - (09-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk
// Mode = 0 = clip out and zoom in and pan to the anchor
// Mode = 1 = clip in and no zoom in and pan to the anchor
// Mode = 2 = pan out from the anchor and clip in.
var zxcZoomPan={
init:function(o){
var id=o.ID,obj=document.getElementById(id);
if (obj&&!this['zxc'+id]){
var oop=this,mde=o.Mode,ud=true,ms=o.Animate,a=document.getElementById(o.AnchorID),hold=o.HoldDelay,ao=o.AutoOpen,mde=typeof(mde)=='number'&&mde>=0&&mde<3?Math.floor(mde):0,ms=typeof(ms)=='number'&&ms>20?ms:1000,w=obj.offsetWidth,h=obj.offsetHeight,lft=obj.offsetLeft,top=obj.offsetTop,aw=a.offsetWidth,ah=a.offsetHeight;
o=this['zxc'+id]={
id:id,
obj:obj,
anchor:a,
clip:['clip',null,ud&&mde!=2?[h/2,w/2,h/2,w/2]:[0,w,h,0],[h/2,w/2,h/2,w/2],[0,w,h,0]],
ary:a?[['left',null,[(ud?obj:a).offsetLeft],[obj.offsetLeft],[a.offsetLeft]],['top',null,[(ud?obj:a).offsetTop],[obj.offsetTop],[a.offsetTop]],['width',null,[ud&&mde!=2?w:aw],[w],[aw]],['height',null,[ud&&mde!=2?h:ah],[h],[ah]] ]:null,
lft:lft,
top:top,
ms:ms,
hold:typeof(hold)=='number'&&hold>0?hold:false,
ud:a?mde==2?false:ud:true,
cnt:0,
max:(typeof(mde)!='number'||mde==0||mde==2)&&a?2:1,
mde:mde
}
}
o.obj.style.width=(o.mde<2||!a?w:aw)+'px';
o.obj.style.height=(o.mde<2||!a?h:ah)+'px';
(o.mde<2||!a?document.body:a).appendChild(o.obj);
o.obj.style.position=o.mde<2||!a?'fixed':'static';
o.obj.style.visibility=o.mde<1?'hidden':'visible';
clearTimeout(o.to);
typeof(ao)=='number'?o.to=setTimeout(function(){ oop.Toggle(id); },ao):null;
},
Toggle:function(id,ud){
var o=this['zxc'+id];
if (o&&o.cnt<o.max){
clearTimeout(o.to);
o.cnt=0;
((o.ud||o.max==1)&&(o.mde!=2))||(o.ud&&o.mde==2)?this.clip(o,o.mde!=1?o.ud:false):this.ltwh(o,o.ud);
}
},
clip:function(o,ud){
if (o.cnt<o.max){
o.cnt++;
clearTimeout(o.to);
o.obj.style.visibility='visible';
document.body.appendChild(o.obj);
this.animate(o,o.obj,o.clip,o.clip[o.mde!=1?2:4],o.clip[ud?4:3],new Date(),o.ms,true);
}
else {
o.cnt=0;
o.ud=!o.ud;
}
},
ltwh:function(o,ud){
var d=new Date(),p=this.pos(o.anchor),z0=0;
if (o.cnt<2){
o.cnt++;
clearTimeout(o.to);
o.obj.style.visibility='visible';
if (o.mde==2||o.mde==0){
o.mde==2?o.ary[0][2]=[o.ud?o.lft:p[0]]:null;
o.mde==2?o.ary[1][2]=[o.ud?o.top:p[1]]:null;
o.ary[0][4]=[o.ud?p[0]:o.lft];
o.ary[1][4]=[o.ud?p[1]:o.top];
}
document.body.appendChild(o.obj);
o.obj.style.position='fixed';
for (;z0<4;z0++){
this.animate(o,o.obj,o.ary[z0],o.ary[z0][2],o.ary[z0][ud?4:3],d,o.ms,z0==3);
}
}
else {
o.cnt=0;
o.ud=!o.ud;
}
},
animate:function(o,obj,ary,f,t,srt,mS,nxt){
clearTimeout(ary[1]);
var oop=this,ms=new Date()-srt,n,now=[],z0=0;
for (;z0<t.length;z0++){
n=Math.round((t[z0]-f[z0])/mS*ms+f[z0]);
now[z0]=isFinite(n)?Math.max(f[z0]>=0&&t[z0]>=0?0:n,n):t[z0];
}
ary[2]=now;
obj.style[ary[0]]=ary[0]=='clip'?'rect('+now[0]+'px,'+now[1]+'px,'+now[2]+'px,'+now[3]+'px)':now[0]+'px';
if (ms<mS){
ary[1]=setTimeout(function(){ oop.animate(o,obj,ary,f,t,srt,mS,nxt); },10);
}
else {
ary[2]=t;
if (nxt&&o.max>1&&o.hold){
clearTimeout(o.to);
o.to=setTimeout(function(){ o.ud?oop.ltwh(o,o.ud):oop.clip(o,o.ud); },o.hold);
}
if (nxt&&(o.max==1||o.mde==1)){
o.cnt=0;
o.ud=o.mde==1||!o.ud;
o.mde=0;
o.max=o.anchor?2:1;
}
if (nxt&&o.ud&&ary[0]=='height'){
o.anchor.appendChild(o.obj);
o.obj.style.position='static';
}
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}
</script>
<script type="text/javascript">
function Init(){
zxcZoomPan.init({
ID:'pop', // the unique ID name of the image. (string)
Mode:0, //(optional) the mode of execution(see Note 1). (string, default = 0 =clip out and zoom in and pan to the anchor)
Animate:1000, //(optional) the animation duration in mill seconds. (number, default = 1000)
AutoOpen:1000, //(optional) the delay in executing the effect on initialization in milli seconds. (number, default = no effect on itialization)
AnchorID:'anchor', //(optional) the unique ID name of the 'anchor' element. (string, default = on anchor)
HoldDelay:2000 //(optional) the 'hold' delay in milli seconds before zoom in and pan to the anchor. (number, default = zoom in and pan to the anchorn)
})
// Note 1
// Mode = 0 = clip out and zoom in and pan to the anchor
// Mode = 1 = clip in and no zoom in and pan to the anchor
// Mode = 2 = pan out from the anchor and clip in.
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
</script>
<script type="text/javascript">
var zxcPosted=[2013,02,09];
var zxcUpDate=[2013,02,09];
var pnParth='http://www.vicsjavascripts.org.uk/';
zxcAddEvt(window,'siteDates','load');
zxcAddEvt(window,'siteTitle','load',['Zoom Pan DRAFT',350,150,390,520]);
zxcAddEvt(window,'siteTabsInit','load',['tab1','tab','tabitem','tabtxt','tabactive',['Comments','Code','Initialisation','CSS','HTML']]);
zxcAddEvt(window,'vwpInitSearchPanel','load');
</script>
</head>
<body>
<div id="header" style="z-Index:2;" >
<div id="vwpanchor" style="position:absolute;left:0px;top:0px;width:0px;height:0px;" ></div>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88">
</a>
<div id="SMRed">VicsJavaScripts</div>
<div id="SMBlack">VicsJavaScripts</div>
<div id="date" class="SMText"></div>
<div id="update" class="SMText"></div>
<div id="posted" class="SMText"></div>
<div id="dates" style="position:absolute;left:170px;top:70px;"></div>
<div id="TitleRed"></div>
<div id="TitleBlack"></div>
</div>
<div style="height:20px;" ></div>
<div id="content1" class="content" style="text-Align:center;" >
<br>
<input type="button" name="" value="Toggle" onmouseup="zxcZoomPan.Toggle('pop',true);" >
<img id="pop" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" >
<div id="anchor" ></div>
</div>
<div style="height:20px;" ></div>
<div id="content2" class="content">
<div id="tab1" class="tabpanel" >
<div class="tab" style="z-Index:1;" ></div>
<div class="tab" style="left:155px;" ></div>
<div class="tab" style="left:260px;" ></div>
<div class="tab" style="left:365px;" ></div>
<div class="tab" style="left:470px;" ></div>
<div class="tabitem" >
<div >
<div style="position:absolute;left:20px;top:20px;width:720px;height:380px;" >
</div>
</div>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" style="z-Index:1;" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<input type="button" name="e" value="Select All" >
</div>
</div>
<div style="height:50px;" ></div>
</body>
</html>
thanks a lot
Need one more help
I changed HoldDelay:2000
to HoldDelay:12000
Now the Toggle is not working
Try the latest version
http://www.vicsjavascripts.org.uk/AA...ck/130209G.htm
I tried Toggle button effect on http://www.vicsjavascripts.org.uk/AA...ck/130209G.htm
It works only once.
If I click again to show ad again its not displaying it
I have updated the page
Its perfect.
Thanks again
