PDA

View Full Version : Featured Content Glider - PNG with Transparency



avand
10-11-2011, 08:24 PM
1) Script Title:
Featured Content Glider - PNG with Transparency

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.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!

vwphillips
10-13-2011, 11:14 AM
<!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>