Results 1 to 4 of 4

Thread: Step Carousel script to hide inactive panels

  1. #1
    Join Date
    May 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel script to hide inactive panels

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Last edited by tpc; 05-09-2014 at 12:04 PM.

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

    Default

    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>
    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/

Similar Threads

  1. Step Carousel wrong animation after 13 panels?
    By kudy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-06-2011, 03:30 PM
  2. Dynamically Add Panels to Step Carousel
    By MDCragg in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-04-2011, 05:38 PM
  3. Step Carousel - dynamically load panels and stop autostep
    By neil123 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-26-2011, 02:20 PM
  4. Add Panels dynamically into step carousel
    By Paci88 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-17-2009, 03:48 PM
  5. Problem with Panels on Step Carousel Viewer
    By Digital.Patience in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 02-02-2009, 07:28 PM

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
  •