Modifying popup javascript ad

**mcco** · 09-29-2012 02:43 PM

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);

    t = 0;

    sTmr();

}



function hFa() {

    t = -100;

    sTmr();

    return false;

}



function sTmr() {

    tmr = setInterval("fd()",20);

}



function fd() {

    var amt = Math.abs(t+=10);

    if(amt == 0 || amt == 100) clearInterval(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 == 0) shw(false);

}



function sLft() {

    var w = 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 l = (document.body.innerWidth)? document.body.innerWidth / 2:document.body.offsetWidth / 2;



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

}



function gObj() {

    return document.getElementById("faw");    

}



function shw(b) {

    (b)? obj.className = 'show':obj.className = '';    

}

Thanks for all your help.

**vwphillips** · 09-30-2012 07:40 AM

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>

**vwphillips** · 09-30-2012 07:55 AM

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>

**mcco** · 10-01-2012 02:30 PM

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?

**vwphillips** · 10-02-2012 03:51 AM

the css or link to the css goes in the header

the script or link to the script goes immediately before the </BODY> tag

Thread: Modifying popup javascript ad

Thread Tools

Display

Modifying popup javascript ad

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions