www.webdeveloper.com
Results 1 to 5 of 5

Thread: Crossfading specific divs from clickable links

  1. #1
    Join Date
    Oct 2008
    Location
    London
    Posts
    4

    Question Crossfading specific divs from clickable links

    Hi,

    I'm new to javascript and am having partial success with this. I have three divs containing text that I need to change between with a crossfade when the relevant tab link is clicked. I have moderate success changing between two divs as it's simple a case of fading A to B or B to A, but it gets more complex when there are three or more divs. I can do this in Flash without a problem, but in this instance it would be much better to have this working with text in the page. I have tried modifying BrandSpankingNew's excellent Crossfader 1.3 script but can't get it to work properly. Any suggestions for an existing script to do this or how to modify Crossfader 1.3 or similar would be much appreciated.

    Many thanks - Zaphodz

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,684
    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>
    <!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:100px;height:100px;
    }
    .tstItem {
      position:absolute;left:0px;top:0px;width:100px;height:100px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // 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.
    
    // **** 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('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (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)
    //
    //  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.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     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]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show (28-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Utalising
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // The script may be intialised or parameters changed by any event call to funtion
    // zxcFadeSS('tst',1,2000,1000,2000);
    // where:
    //  parameter 0 = the unique id name of the parent element.               (string)
    //  parameter 1 = (if a number) the frame(0 to n) number to be displayed. (digits)
    //  parameter 1 = (if a boolen) false = stop, true = start auto rotation. (true of false)
    //  parameter 2 = (optional) the time before auto rotation.               (digits)
    //  parameter 3 = (optional) the fade effect speed(time).                 (digits, default 1000)
    //  parameter 4 = (optional) the time between each rotation.              (digits, default 2000)
    //  parameter 5 = (optional) 1 = rotate forward, -1 = rotate back.        (1 or -1, default 1)
    
    // Code Size about 1.8K
    
    // Functional Code - NO NEED to CHANGE
    
    function zxcFadeSS(zxcid,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
     var zxcp=document.getElementById(zxcid);
     var zxcoop=zxcp.oop;
     if (!zxcp.oop){
      zxcoop=zxcp.oop=new zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud);
      if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
     }
     else {
      clearTimeout(zxcoop.to);
      clearTimeout(zxcoop.srtto);
      zxcoop.ud=zxcud||zxcoop.ud;
      zxcoop.spd=zxcspd||zxcoop.spd;
      zxcoop.hold=zxchold||zxcoop.hold;
      if (typeof(zxcimgnu)=='number'){
       if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
       else  zxcoop.cng(zxcimgnu+1);
      }
      else if (zxcimgnu) zxcoop.cng();
     }
    }
    
    function zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
     this.p=zxcp;
     this.ary=[];
     var zxcclds=zxcp.childNodes;
     for (var zxccnt=0,zxc0=0;zxc0<zxcclds.length;zxc0++){
      if (zxcclds[zxc0].nodeType==1){
       this.ary[zxccnt]=zxcclds[zxc0];
       zxcclds[zxc0].style.zIndex='0';
       zxcOpacity(zxcclds[zxc0],0);
       zxccnt++;
      }
     }
     this.ary=this.ary.reverse();
     this.cnt=zxcimgnu||0;
     this.lst=this.ary[this.cnt];
     this.lst.style.zIndex='1';
     zxcOpacity(this.lst,100);
     this.ud=zxcud||1;
     this.to=null;
     this.srtto=null;
     this.spd=zxcspd||1000;
     this.hold=zxchold||2000;
    }
    
    zxcFadeSSOOP.prototype.cng=function(zxcnu){
     this.lst.style.zIndex=0;
     var zxcoop=this.lst.opacityoop;
     zxcBAnimator('opacity',this.lst,zxcoop?zxcoop.data[0]:100,0,this.spd);
     if (typeof(zxcnu)!='number') this.cnt+=this.ud;
     else this.cnt=zxcnu-1;
     this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
     this.lst=this.ary[this.cnt];
     this.lst.style.zIndex=1;
     zxcoop=this.lst.opacityoop;
     zxcBAnimator('opacity',this.lst,(zxcoop?zxcoop.data[0]:0)+1,100,this.spd);
     if (!zxcnu) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),this.hold);
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="zxcFadeSS('tst',0,false,1000);">
                             <div id="tst">
                             <div class="tstItem">2</div>
                             <div class="tstItem">1</div>
                             <div class="tstItem">0</div>
                            </div>
    <a onclick="zxcFadeSS('tst',0);" >DIV 0</a>
    <a onclick="zxcFadeSS('tst',1);" >DIV 1</a>
    <a onclick="zxcFadeSS('tst',2);" >DIV 2</a>
    </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/

  3. #3
    Join Date
    Oct 2008
    Location
    London
    Posts
    4
    OK, I'm making progress but still have one problem. The divs crossfade but the first div doesn't disappear until its own link has been clicked once, after that everything works fine. Here are the components:

    The three divs being faded are called "home", "practice" and "services".

    I have two versions of bsn.crossfader.js, one of which is modified to fade backwards, i.e. from 100% to 0%.

    The function that the links call:

    HTML Code:
    <script type="text/javascript">
      function changeDiv(id1,id2,id3) {
        if(document.getElementById(id1).style.opacity >= 1) {
          var cf1 = new Crossfader2( new Array(id1), 500, 0 );
        }
        else {
          var cf = new Crossfader( new Array(id1), 500, 0 );
        }
        if(document.getElementById(id2).style.opacity >= 1) {
          var cf2 = new Crossfader2( new Array(id2), 500, 0 );
        }
        if(document.getElementById(id3).style.opacity  >= 1) {
          var cf3 = new Crossfader2( new Array(id3), 500, 0 );
        }
      }
    </script>
    The links:
    HTML Code:
    <div class="topNavText1">
      <a href="javascript:changeDiv('home','practice','services');">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="javascript:changeDiv('practice','services','home');">Practice</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="javascript:changeDiv('services','home','practice');">Services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="javascript:shiftOpacity()">Contact &amp; Location</a>&nbsp;&nbsp;
    </div>
    As I said before, I'm not experienced with javascript so this may seem a bit "cackhanded" but any input welcome.

    Thanks - Zaphodz

  4. #4
    Join Date
    Oct 2008
    Location
    London
    Posts
    4
    Wow! Thanks Vic. Just tried your demo and it does exactly what I want. A very big THANKYOU for that.

    Cheers - Zaphodz

  5. #5
    Join Date
    Oct 2008
    Location
    London
    Posts
    4

    resolved [Resolved] Crossfading specific divs from clickable links

    Hi Vic,

    Have put your script into use on the site I'm working on and it works perfectly. So once again, THANKYOU. That's a great script BTW, I can see some pretty interesting navigation/menu designs resulting from that by those that understand it well.

    All the best - Zaphodz

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles