www.webdeveloper.com
Results 1 to 8 of 8

Thread: Peel back pop up ad script

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    5

    Peel back pop up ad script

    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

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2013
    Posts
    5
    thanks a lot

  4. #4
    Join Date
    Feb 2013
    Posts
    5
    Need one more help
    I changed HoldDelay:2000
    to HoldDelay:12000

    Now the Toggle is not working

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Feb 2013
    Posts
    5
    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

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    I have updated the page
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Feb 2013
    Posts
    5
    Its perfect.
    Thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles