Results 1 to 3 of 3

Thread: Have you seen this effect?

  1. #1
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Have you seen this effect?

    I've seen it somewhere, but it's not in script-a-culous…
    http://www.fkq.com/ It's the sliding tabbed-divs effect (here is flash)

    It was as easy as creating the different content divs and name them consecutively.

    If you haven't seen it, How would you look for it? (English is just my second language)

    Thanks.

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    I suggest looking through jquery to find the sliding panels effect you are looking for.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 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:480px;height:200px;border:solid black 1px;
    }
    
    .frame {
      position:relative;overflow:hidden;width:50px;height:200px;background-Color:#FFCC66;float:left;margin-Left:5px;
    }
    
    .framemax {
      position:absolute;left:0px;top:0px;width:250px;height:200px;background-Color:#FFFFCC;
    }
    
    .active {
      position:relative;width:250px
    }
    
    .content {
      position:absolute;left:0px;top:205px;width:250px;height:100px;background-Color:#CCFFFF;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (14-May-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    //  parameter 0 = the mode(see Note 2).                                                                     (string)
    //  parameter 1 = the unique ID name or element object.                                                     (string or element object)
    //  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    //  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    //  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    //  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //  Note 6: parameters 2 and 3 must be different values to execute the script.
    //
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms,scale,curve);
     }
     else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
     return oop;
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     clearTimeout(this.to);
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.ms=this.mS;
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     this.ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
     this.apply();
     if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Bounce&&this.Bounce[2]>0) this.bounce();
     }
    }
    
    zxcBAnimatorOOP.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.bounce=function(){
     if (this.Bounce[2]%2==0)
     this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
     this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
     this.Bounce[2]--;
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // by Vic Phillips http://www.vicsjavascripts.org.uk  (23-June-2009)
    
    function zxcSlider(id,fcls,fmcls,ccls,ms){
     var obj=document.getElementById(id);
     var frames=zxcByClassName(fcls,obj,'DIV');
     var content=zxcByClassName(ccls,obj,'DIV');
     this.ms=ms||1000;
     this.frames=[];
     this.mm=[0,0];
     for (var z0=0;z0<frames.length;z0++){
      if (frames[z0].offsetWidth>this.mm[1]){
       this.mm[1]=frames[z0].offsetWidth; this.lst=z0;
      }
      else {
       this.mm[0]=frames[z0].offsetWidth;
      }
      this.addevt(frames[z0],'mouseup','Expand',z0);
     }
     for (var lft=frames[0].offsetLeft,fm,z1=0;z1<frames.length;z1++){
      this.frames.push([zxcBAnimator('width',frames[z1],frames[z1].offsetWidth-2,this.mm[z1!=this.lst?0:1],10),zxcBAnimator('opacity',zxcByClassName(fmcls,frames[z1],'DIV')[0],2,z1!=this.lst?0:100,10),(this.mm[0]+lft)*z1+lft,zxcBAnimator('left',content[z1],-2,frames[this.lst].offsetLeft,10),zxcBAnimator('opacity',content[z1],5,z1!=this.lst?0:100,10)]);
     }
    }
    
    zxcSlider.prototype.Expand=function(nu){
     if (nu!=this.lst){
      this.frames[this.lst][0].update([this.frames[this.lst][0].data[0],this.mm[0]],this.ms);
      this.frames[this.lst][1].update([this.frames[this.lst][1].data[0],0],this.ms);
      this.frames[this.lst][4].update([this.frames[this.lst][4].data[0],0],this.ms);
      this.lst=nu;
      this.frames[this.lst][0].update([this.frames[this.lst][0].data[0],this.mm[1]],this.ms);
      this.frames[this.lst][1].update([this.frames[this.lst][1].data[0],100],this.ms);
      this.frames[this.lst][4].update([this.frames[this.lst][4].data[0],100],this.ms);
      for (var z0=0;z0<this.frames.length;z0++){
       this.frames[z0][3].update([this.frames[z0][3].data[0],this.frames[this.lst][2]],this.ms);
      }
     }
    }
    
    zxcSlider.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
      else o['on'+t]=o[f];
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    function zxcSV(obj,par){
     if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
     return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
    }
    
    function zxcSVInt(obj,par){
     if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
     return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
    }
    
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="S=new zxcSlider('tst','frame','framemax','content',1000);">
    <div id="tst" >
    <div class="frame active" >0<div class="framemax" >0</div></div>
    <div class="content" >0</div>
    <div class="frame" >1<div class="framemax" >1</div></div>
    <div class="content" >1</div>
    <div class="frame" >2<div class="framemax" >2</div></div>
    <div class="content" >2</div>
    <div class="frame" >3<div class="framemax" >3</div></div>
    <div class="content" >3</div>
    <div class="frame" >4<div class="framemax" >4</div></div>
    <div class="content" >4</div>
    </div>
    
    
    
    </body>
    
    </html>

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
  •