www.webdeveloper.com
Results 1 to 5 of 5

Thread: Modifying popup javascript ad

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    Question Modifying popup javascript ad

    Hello,

    I am trying to modify a script that I have that is used for popup ads and use it for a prompt for registering for my forum. The script is good for an advertisement that just sits there and doesnt move but I am looking for it to do a couple things.

    1. I would like it to fly-in from the top-center and land at the bottom-left of the screen.
    2. I would like it to appear 5 seconds after the page loads
    3. I would like it to hover down as the user scrolls down the page

    If anyone could help me out with this that would be great. I am a php/html/css guy and have not studied javascript yet. Here is the javascript code that I would like modifed:

    PHP Code:
    var tmr;
    var 
    t;
    var 
    obj;

    function 
    sFa() {
        
    obj gObj();
        
    sLft();
        
    shw(true);
        
    0;
        
    sTmr();
    }

    function 
    hFa() {
        
    = -100;
        
    sTmr();
        return 
    false;
    }

    function 
    sTmr() {
        
    tmr setInterval("fd()",20);
    }

    function 
    fd() {
        var 
    amt Math.abs(t+=10);
        if(
    amt == || amt == 100clearInterval(tmr);
        
    amt = (amt == 100)?99.999:amt;
          
        
    obj.style.filter "alpha(opacity:"+amt+")";
        
    obj.style.KHTMLOpacity amt/100;
        
    obj.style.MozOpacity amt/100;
        
    obj.style.opacity amt/100;
        
        if(
    amt == 0shw(false);
    }

    function 
    sLft() {
        var 
    170;    // set this to 1/2 the width of the faw div defined in the style sheet 
                // there's not a reliable way to retrieve an element's width via javascript!!
                        
        
    var = (document.body.innerWidth)? document.body.innerWidth 2:document.body.offsetWidth 2;

        
    obj.style.left = (w)+"px";
    }

    function 
    gObj() {
        return 
    document.getElementById("faw");    
    }

    function 
    shw(b) {
        (
    b)? obj.className 'show':obj.className '';    

    Thanks for all your help.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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[*/
    
    #tst {
      position:fixed;z-Index:101;left:100px;bottom:500px;width:200px;height:200px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tst" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Float In (30-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFloatIn={
    
     init:function(o){
      var id=o.ID,obj=document.getElementById(id),ms=o.SlideDuration;
      o=this['zxc'+id]={
       obj:obj,
       set:false,
       ms:typeof(ms)=='numbedr'?ms:1000
      }
      this.resize(o);
      this.addevt(window,'resize','resize',o);
     },
    
     Slide:function(id){
      var o=this['zxc'+id];
      if (o){
       this.animate(o,'bottom',o.now[1],0,new Date(),o.ms);
      }
     },
    
     resize:function(o){
      if (!o.set){
       var wh=window.innerHeight?[window.innerWidth,window.innerHeight]:document.documentElement.clientHeight?[document.documentElement.clientWidth,document.documentElement.clientHeight]:[document.body.clientWidth,document.body.clientHeight];
       o.now=[(wh[0]-o.obj.offsetWidth)/2,wh[1]];
       o.obj.style.left=o.now[0]+'px';
       o.obj.style.bottom=wh[1]+'px';
      }
     },
    
     animate:function(o,mde,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       o.obj.style[mde]=now+'px';
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS); },10);
      }
      else {
       o.obj.style[mde]=t+'px';
       if (mde=='bottom'){
        this.animate(o,'left',o.now[0],0,new Date(),o.ms);
       }
       else {
        o.set=true;
       }
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    }
    
    
    zxcFloatIn.init({
     ID:'tst',
     SlideDuration:1000
    });
    
    setTimeout(function(){ zxcFloatIn.Slide('tst'); },5000);
    /*]]>*/
    </script>
    
    
    </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
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    or

    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[*/
    
    #tst {
      position:fixed;z-Index:101;left:100px;bottom:500px;width:200px;height:200px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tst" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Float In (30-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFloatIn={
    
     init:function(o){
      var id=o.ID,obj=document.getElementById(id),ms=o.SlideDuration;
      o=this['zxc'+id]={
       obj:obj,
       set:false,
       ms:typeof(ms)=='numbedr'?ms:1000
      }
      o.i=Math.PI/(2*o.ms);
      this.resize(o);
      this.addevt(window,'resize','resize',o);
     },
    
     Slide:function(id){
      var o=this['zxc'+id];
      if (o){
       this.animate(o,'left',o.now[0],0,new Date(),o.ms);
       this.animate(o,'bottom',o.now[1],0,new Date(),o.ms);
       o.set=true;
      }
     },
    
     resize:function(o){
      var wh=window.innerHeight?[window.innerWidth,window.innerHeight]:document.documentElement.clientHeight?[document.documentElement.clientWidth,document.documentElement.clientHeight]:[document.body.clientWidth,document.body.clientHeight];
      o.now=[(wh[0]-o.obj.offsetWidth)/2,wh[1]];
      if (!o.set){
       o.obj.style.left=o.now[0]+'px';
       o.obj.style.bottom=wh[1]+'px';
      }
     },
    
     animate:function(o,mde,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=mde=='bottom'?(t-f)*Math.sin(o.i*ms)+f:t-(t-f)*Math.cos(o.i*ms);
      if (isFinite(now)){
       o.obj.style[mde]=now+'px';
      }
      if (ms<mS){
       o[mde]=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS); },10);
      }
      else {
       o.obj.style[mde]=t+'px';
      }
     },
    
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    }
    
    
    zxcFloatIn.init({
     ID:'tst',
     SlideDuration:1000
    });
    
    setTimeout(function(){ zxcFloatIn.Slide('tst'); },5000);
    /*]]>*/
    </script>
    
    
    </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/

  4. #4
    Join Date
    Feb 2012
    Posts
    102
    Thanks for the script but you did not include directions on where to put what. Remember, I am using this as a popup prompt to register to my site. I am including the Javascript in an external file and the css in its own file. Where and what do I have to include in the html file to make this start? Other files I have seen have included a line of javascript at the end, jsut before the closing body tag. I tested it out and my prompt just sits fixed in one position. Is it suppose to float or what is it suppose to do with this script?

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    the css or link to the css goes in the header

    the script or link to the script goes immediately before the </BODY> tag
    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/

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