Step Carousel script to hide inactive panels

**tpc** · 05-09-2014, 08:52 AM

Hi,

I would like to know how i can set the display properties of the unused Divs to "none" Im totally new to javascript, any ideas?

**jscheuer1** · 05-09-2014, 10:41 AM

If you're not using them, delete them.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**tpc** · 05-09-2014, 11:47 AM

Originally Posted by jscheuer1

If you're not using them, delete them.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Hi,

Sorry, I wasn't clear, what I'm having trouble with is that I have 5 step carousels arranged vertically, with menu buttons on top that navigates to each carousel, however, if the desktop height is big enough, they are able to see more than one step carousel at a time, and its rather messy then.
Anyway that I can hide those carousel's? Also if their width is wide enough, they are able to see past one panel into the other. Overflow is already hidden.

I was thinking of setting the default display for the panels and step carousels not in use to be none, and edit the javascript such that when it calls the appropriate panel or step carousel it sets the property back to view

Thanks very much.

**vwphillips** · 05-09-2014, 03:05 PM

suggest you do not use display none as it will stop the carousel initializing

use position absolute and visibility instead

example:

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>

<base href="../StdImages/"  />

<style type="text/css">

.stepcarousel{
 position:absolute; /* relative or absolute */
 left:200px;
 top:100px;
 border:1px solid black;
 width:220px; /* Width of Carousel */
 height:440px; /* Height of Carousel */
}

.stepcarousel .belt{
 position:absolute; /* script forces absolute*/
 text-Align:left;
 left:0px;
 top:0px;border:solid red 0px;
}

.stepcarousel .belt IMG {
 float:left;width:220px;height:220px;
}

#paginate {
 position:relative;width:270px;height:30px;border:1px solid black;
}

#paginate .page {
 position:relative;width:20px;height:20px;float:left;margin:5px;background-Color:#FFFFCC;border:solid red 1px;cursor:pointer;
}

#paginate .current {
 height:20px;background-Color:#FF0000;
}

</style>


</head>

<body>

<input id="b1" type="button" name="" value="Carousel 1" onclick="Swap(1);" />
<input id="b2" type="button" name="" value="Carousel 2" onclick="Swap(2);" />

 <div id="mygallery1" class="stepcarousel">

  <div class="belt">

   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />

   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />


  </div>

 </div>

 <div id="mygallery2" class="stepcarousel" style="visibility:hidden;" >

  <div class="belt">

   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />

   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />


  </div>

 </div>



<script type="text/javascript">
/*<![CDATA[*/
// Step Carousel VII (15-January-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcStepCarouselVII={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud>0?1:-1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud);
   clearTimeout(o.to);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud>0?1:-1;
  if (o){
   this.Pause(id);
   if (typeof(o.ary[n])=='number'&&n!=o.n&&!(n==0&&o.n==o.lgth)){
    n>o.n&&n!=0?1:-1;
    this.rotate(o,n);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   o.auto=false;
   clearTimeout(o.to);
  }
 },

 init:function(o){
  var id=o.CarouselID,m=o.Mode,ud=o.Direction,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,add=o.AddEvents,di=o.DisplayIndex,days=o.Persistence,p=document.getElementById(id),pag=document.getElementById(o.PaginateID),s=p?p.getElementsByTagName('DIV')[0]:null;
  if (s){
   var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight','marginBottom']:['left','top','width','offsetLeft','offsetWidth','marginRight'];
   var days=(isFinite(days*1)&&days>0)||days=='session'?days:-1,ck=this.cookie(id),n=days!=-1&&ck?ck*1:di,clds=s.childNodes,pgs=pag?pag.childNodes:[],sz=0,c=0,pg,cls,mx,cc,z0=0,z1=0,z2=1,z3=0;
   o.pgs=[];
   for (;z0<pgs.length;z0++){
    if (pgs[z0].nodeType==1){
     o.pgs.push(pgs[z0]);
    }
   }
   s.style[m[2]]='30000px';
   m[0]=='left'?s.style.textAlign=m[0]:null;
   p.style.overflow='hidden';
   o.w=o.Wrap!==false;
   o.ary=[];
   for (;z1<clds.length;z1++){
    if (clds[z1].nodeType==1){
     clds[z1].style[m[5]]='0px';
     o.ary.push(clds[z1][m[3]]);
     sz=clds[z1][m[4]];
     pg=o.pgs[c]||document.createElement('DIV');
     !o.pgs[c]&&pag?pag.appendChild(pg):null;
     this.addevt(pg,'mouseup','GoTo',id,c);
     cls=pg.className;
     o.pgs[c]=[pg,cls+' page',cls+' page current'];
     pg.className=o.pgs[c][1];
     c++;
    }
   }
   sz+=(o.ary[c-1]);
   o.n=n>=0&&n<c?n:0;
   s.style[m[2]]=sz+10+'px';
   o.pgs[o.n][0].className=o.pgs[o.n][2];
   s.style[m[0]]=-sz+'px';
   if (o.w){
    o.ary.push(sz+o.ary[0]);
    mx=p[m[4]]+sz;
    c=s.cloneNode(true);
    while (sz<mx){
     cc=c.cloneNode(true);
     cc.style[m[0]]=sz+'px';
     cc.style[m[1]]='0px';
     s.appendChild(cc);
     sz+=sz;
    }
   }
   s.style[m[0]]=-o.ary[o.n]+'px';
   o.id=id;
   o.s=[s,m[0]];
   o.lgth=o.ary.length-1;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   o.h=typeof(h)=='number'&&h>10?h:o.ms*4;
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   o.days=isFinite(days*1)?days*1:days;
   o.rtn=typeof(o.OnStep)=='function'?o.OnStep:null;
   if (add instanceof Array){
    for (;z3<add.length;z3++){
     if (add[z3]){
      p=document.getElementById(add[z3][0]);
      if (p&&this[add[z3][2]]){
       s=add[z3][1];
       this.addevt(p,s=='click'||s=='mouseover'||s=='mouseout'||s=='mousedown'?s:'mouseup',add[z3][2],o.id,add[z3][3]);
       if (!o.w){
        add[z3][2]=='Next'&&add[z3][3]==1?o.nxt=p:null;
        add[z3][2]=='Next'&&add[z3][3]==-1?o.bak=p:null;
        this.nxt(o,n);
       }
      }
     }
    }
   }
   this['zxc'+id]=o;
   o.rtn?o.rtn(o,n):null;
   typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
  }
 },

 rotate:function(o,a){
  this.Pause(o.id);
  o.auto=a===true;
  var n=o.auto?o.n+o.ud:a,f=-o.ary[o.n];
  if (o.w&&((n>o.lgth&&o.ud>0)||(n<0&&o.ud<0))){
   f=-o.ary[o.ud>0?0:o.lgth];
   n=o.ud>0?1:o.lgth-1;
  }
  if (n>=0&&n<=o.lgth){
   this.nxt(o,n);
   o.pgs[o.w&&o.n==o.lgth?0:o.n][0].className=o.pgs[o.w&&o.n==o.lgth?0:o.n][1];
   a=o.w&&n==o.lgth?0:n;
   o.pgs[a][0].className=o.pgs[a][2];
   this.animate(o,o.s,f,-o.ary[n],new Date(),o.ms);
   o.n=n;
   o.rtn?o.rtn(o,n):null;
   document.cookie=o.id+'='+a+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';');
  }
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
   o.auto?oop.Auto(o.id,o.h):null;
  }
 },

 nxt:function(o,n){
  o.nxt?o.nxt.style.opacity=n>=o.lgth?.5:1:null;
  o.bak?o.bak.style.opacity=n<=0?.5:1:null;
 },

 cookie:function(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }


}

/*]]>*/
</script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
zxcStepCarouselVII.init({
 CarouselID:'mygallery1', // the unique ID name of the carousel parent DIV.                    (string)
 Mode:'Vertical',      //(optional) the display mode, 'Horizontal' or 'Vertical'.             (string, default = 'Horizontal')
 Animate:1000,           //(optional) the step duration in millisec.                          (number, minimum = 21, default = 1000)
// AutoHold:1000,          //(optional) the auto rotation 'hold' delay in millisec.             (number, minimum = 11, default = Animate*4)
 AutoStart:2000,         //(optional) the auto rotation 'start' delay in millisec.            (number, minimum = 21, default = no auto start)
// DisplayIndex:new Date().getDay(),         //(optional) the index number of the initial panel to display.       (number, default = 0)
// Direction:1,            //(optional) the initial direction, >0 = anti-clock, <0 = clockwise. (number, default = 1 = anti-clockwise)
// Wrap:true,              //(optional) false = the carousel will not 'wrap' first to last.     (boolean, default = true = carousel will 'wrap' first to last)
// PaginateID:'paginate',  //(optional) the unique ID name of the paginate parent DIV.          (string, default = no pagination)
// Persistence:'session',  //(optional) restore the last step position for the browser session. (string, default = no persistence)
// Persistence:1,          //(optional) the number of days to restore the step position.        (number, default = no persistence)
// OnStep:function(o,i){   //(optional) a function to call on step.                             (function, default = no function)
  // i = the index number of the step
// },
 AddEvents:[             //(optional) add event calls to page elements(see Script Functions). (array, default = in line event calls)
  // field 0 = the unique ID name of the element.
  // field 1 = the event type.
  // field 2 = the script function to call(see Controlling the Script).
  // field 3 = (optional) the value to pass to the function(see Controlling the Script).
  ['mygallery1','mouseover','Pause'],
  ['mygallery1','mouseout','Auto']
 ]
});

zxcStepCarouselVII.init({
 CarouselID:'mygallery2',
 Mode:'Vertical',
 Animate:1000,
 AddEvents:[
  ['mygallery2','mouseover','Pause'],
  ['mygallery2','mouseout','Auto']
 ]
});

function Swap(n){
 for (z0=1;document.getElementById('mygallery'+z0);z0++){
  document.getElementById('mygallery'+z0).style.visibility=z0!=n?'hidden':'visible';
  zxcStepCarouselVII[z0!=n?'Pause':'Auto']('mygallery'+z0); // Pause the hidden carousel, Auto the visible carousel
 }
}

/*]]>*/
</script>

</body>

</html>

Thread: Step Carousel script to hide inactive panels

Thread Tools

Search Thread

Step Carousel script to hide inactive panels

Similar Threads

Step Carousel wrong animation after 13 panels?

Dynamically Add Panels to Step Carousel

Step Carousel - dynamically load panels and stop autostep

Add Panels dynamically into step carousel

Problem with Panels on Step Carousel Viewer

Bookmarks

Bookmarks

Posting Permissions