Results 1 to 2 of 2

Thread: Featured Content Glider - PNG with Transparency

  1. #1
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Featured Content Glider - PNG with Transparency

    1) Script Title:
    Featured Content Glider - PNG with Transparency

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tentglider.htm

    3) Describe problem:
    I would like to use PNGs with transparency to glide on top of a common background. However, I noticed that with this script the slides pile one on top of each other when they glides in so all slides are visible at once. Is there a way to edit the script to make the previous slides hidden?

    Thanks for your help!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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:relative;width:350px;height:200px;border:solid red 1px;
    }
    
    #tst .frame {
      position:relative;overflow:hidden;width:350px;height:200px;background-Color:green;text-Align:center;font-Size:100px;
    }
    
    #pages {
      position:relative;top:5px;width:350px;height:20px;
    }
    
    .page {
      position:relative;width:50px;height:20px;border:solid red 1px;background-Color:green;float:left;margin-Left:5px;text-Align:center;
    }
    
    .active {
      background-Color:red;
    }
    
    .mouseover {
      background-Color:yellow;
    }
    
    .button {
      position:relative;top:10px;width:50px;height:15px;border:solid red 1px;background-Color:#FFFFCC;float:left;margin-Left:5px;text-Align:center;font-Size:12px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
     <div id="tst" >
      <div class="frame" >1</div>
      <div class="frame" style="background-Color:blue;" >2</div>
      <div class="frame" style="background-Color:red;" >3</div>
      <div class="frame" style="background-Color:yellow;" >4</div>
      <img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
      <div class="frame" style="background-Color:#00FFCC;" >6</div>
     </div>
     <div id="pages" >
      <div class="page" >1</div>
      <div class="page" >2</div>
      <div class="page" >3</div>
      <div class="page" >4</div>
     </div>
      <div id="fwd" class="button" >Forward</div>
      <div id="back" class="button" >Back</div>
      <div id="pause" class="button" >Pause</div>
      <div id="auto" class="button" >Auto</div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Content Slider. (13-October-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    // Functional Code Size 4.19K
    
    
    function zxcContentSlider(o){
     var nme=o.ParentID,p=document.getElementById(nme);
     if (p){
      var oop=this,ary=this.bycls(o.CommonClass,p),mde=typeof(o.Mode)=='string'?o.Mode.charAt(0).toUpperCase():'T',mde=mde=='B'||mde=='L'||mde=='R'?mde:'T',mode=mde=='L'||mde=='R'?['left','top','offsetWidth']:['top','left','offsetHeight'],z0=0,ms=o.SlideDuration,hold=o.AutoRotateHold,srt=o.AutoStart,page=o.Paginate,add=o.AddEvents,cnt=0,days=o.DaysPersistance;
      oop.nme=nme+'=';
      if (typeof(days)=='number'&&oop.cookie){
       oop.days=days;
       cnt=oop.cookie(oop.nme)||0;
      }
      oop.cnt=cnt*1;
      for (;z0<ary.length;z0++){
       ary[z0].style.position='absolute';
       ary[z0].style[mode[0]]=(z0!=cnt?p[mode[2]]:0)+'px';
       ary[z0].style[mode[1]]='0px';
       ary[z0].style.width=p.offsetWidth+'px';
       ary[z0].style.height=p.offsetHeight+'px';
       ary[z0]=new zxcSlider(ary[z0],mode,oop);
      }
      oop.ary=ary;
      oop.mve=p[mode[2]]*(mde=='T'||mde=='L'?-1:1);
      oop.ms=typeof(ms)=='number'?ms:1000;
      oop.hold=typeof(hold)=='number'?hold:oop.ms;
      this.ud=1;
      oop.nowrap=o.Wrap==false;
      this.pages=[];
      if (typeof(page)=='object'&&document.getElementById(page.ParentID)&&oop.paginate){
       oop.paginate(page,ary);
      }
      if (typeof(add)=='object'&&add.constructor==Array&&oop.addevents){
       this.addevents(add);
      }
      p.style.overflow='hidden';
      if (typeof(srt)=='number'){
       oop.Auto(srt);
      }
     }
    }
    
    zxcContentSlider.prototype={
    
     Next:function(ud){
      ud=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1);
      this.ud=ud>this.cnt?1:-1;
      this.GoTo(ud)
     },
    
     GoTo:function (nu,auto){
      var ary=this.ary,cnt=this.cnt,lgth=this.ary.length-1;
      if (typeof(nu)=='number'){
       nu=!this.nowrap?nu<0?lgth:nu>lgth?0:nu:Math.min(Math.max(0,nu),lgth);
       if (nu!=this.cnt){
        this.Pause();
        clearTimeout(ary[cnt].dly);
        ary[cnt].obj.style.zIndex='1';
        ary[cnt].animate(0,-this.mve,new Date(),this.ms);
        this.auto=auto==true;
        clearTimeout(ary[nu].dly);
        ary[nu].obj.style.zIndex='2';
        ary[nu].animate(this.mve,0,new Date(),this.ms,true);
        if (this.page){
         this.page(cnt,0);
         this.page(nu,2);
        }
        this.cnt=nu;
        if (this.days){
         this.cookieset(nu);
        }
       }
      }
     },
    
     Auto:function(ms){
      var oop=this;
      this.to=setTimeout(function(){ oop.GoTo(oop.cnt+oop.ud,true); },ms||200);
     },
    
     Pause:function (ms){
      this.auto=false;
      clearTimeout(this.to);
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     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); });
     },
    
    // Optional Paginate Code.
     paginate:function(o,ary,oop){
      var oop=this,p=document.getElementById(o.ParentID),cls=o.CommonClass,pages=this.bycls(cls,p),page,acls=o.ActiveClass,mcls=o.MouseOverClass,z0=0,z1=ary.length;
      this.cls=[cls,cls+(typeof(mcls)=='string'?' '+mcls:''),cls+(typeof(acls)=='string'?' '+acls:'')];
      for (;z0<z1;z0++){
       page=pages[z0]||document.createElement('DIV');
       if (!pages[z0]){
        p.appendChild(page);
       }
       page.className=this.cls[z0!=this.cnt?0:2];
       this.pages[z0]=page;
       this.addevt(page,'mouseover','mouse',z0);
       this.addevt(page,'mouseout','mouse',z0);
       this.addevt(page,'mouseup','GoTo',z0);
      }
      for (;z1<pages.length;z1++){
       pages[z1].parentNode.removeChild(pages[z1]);
      }
     },
    
     page:function(nu,cls){
      if (this.pages[nu]){
       this.pages[nu].className=this.cls[cls];
      }
     },
    
     mouse:function(nu,e){
      if (nu!=this.cnt){
       this.pages[nu].className=this.cls[e.type=='mouseout'?0:1];
      }
     },
    
    // Optional Add Events Code.
     addevents:function(ary){
      for (var types='mouseup,mousedown,mouseover,mouseout,click',but,type,z0=0;z0<ary.length;z0++){
       but=document.getElementById(ary[z0][0]);
       type=typeof(ary[z0][1])=='string'?ary[z0][1].replace('on',''):'X';
       if (but&&types.indexOf(type)>=0&&this[ary[z0][2]]){
        this.addevt(but,type,ary[z0][2],ary[z0][3])
       }
      }
     },
    
    // Optional Persistance Code
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     },
    
     cookieset:function(nu){
      document.cookie=this.nme+nu+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
     }
    
    
    }
    
    function zxcSlider(obj,mde,oop){
     this.obj=obj;
     this.mde=mde[0];
     this.oop=oop;
    }
    
    zxcSlider.prototype.animate=function(f,t,srt,mS,auto){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      this.obj.style[this.mde]=now+'px';
     }
     if (ms<mS){
      this.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,auto); },10);
     }
     else {
      this.obj.style[this.mde]=t+'px';
      if (auto&&oop.oop.auto){
       oop.oop.Auto(oop.oop.hold);
      }
     }
    }
    
    new zxcContentSlider({
     ParentID:'tst',         // the unique ID name of the slideshow parent DIV element.                                (string)
     CommonClass:'frame',    // the common class name of the frames to slide.                                          (string)
     Mode:'rightleft',       //(optional) the mode of execution, 'topbottom', 'bottomtop', 'leftright' or 'rightleft'. (string, default = 'topbottom')
     SlideDuration:1000,     //(optional) the slide duration in milli seconds.                                         (number, default = 1000)
     AutoRotateHold:1000,    //(optional) the autotrotation 'hold' duration in milli seconds.                          (number, default = 1000)
     AutoStart:2000,         //(optional) the delay in milli seconds to start auto rotation on initialisation.         (number, default = no start on initialisation)
     AddEvents:[             //(optional) add event calls to script functions to elements.                             (array, default = in line event calls)
    // field 0 = the unique ID name of the element to add the event call. (string)
    // field 1 = the event type.                                          (string)
    // field 2 = the script function name.                                (string)
    // field 3 = (optional) the parameter to pass to the function.        (number)
      ['fwd','mouseup','Next',1],
      ['back','mouseup','Next',-1],
      ['pause','mouseup','Pause'],
      ['auto','mouseup','Auto'],
      ['tst','mouseover','Pause'],
      ['tst','mouseout','Auto']
     ],
     Paginate:{              //(optional) pagination options.                                                          (object, default = no pagination)
      ParentID:'pages',          // the unique ID name of the painate parent DIV element.                        (string)
      CommonClass:'page',        // the common class name of paginate page elements.                             (string)
      ActiveClass:'active',      //(optional) the active class name of the 'active' paginate page element.       (string)
      MouseOverClass:'mouseover' //(optional) the mouseover class name of the 'mouseover' paginate page element. (string)
     },
     Wrap:true,              //(optional) true = 'wrap' the frames from last to first and first to last.               (boolean, default = true)
     DaysPersistance:1       //(optional) the number of days to remember and restore the last frame.                   (boolean, default = no persistance)
    });
    /*]]>*/
    </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/

Bookmarks

Posting Permissions

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