Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    FadeIn Script FF opacity?

    Hey I got this really nice little script here that first detects the browser to isolate IE.. cause well.. you know. Then it fades in desired page elements. Problem is haha and I think this is a first is that it works in IE just fine but not in FF..

    anyone got any ideas?
    Thanks

    Code:
    	var browserName=navigator.appName;
    		if (browserName=="Netscape")
    		{ 
    			browser="Mozilla";
    			
    		}
    		else 
    		{ 
    		 if (browserName=="Microsoft Internet Explorer")
    		 {
    			
    			browser="IE";
    			
    		 }
    		 else
    		  {
    			browser="Mozilla";
    		   }
    		}
    
    //Called to fade element
    function fadeIn(element)
    {
      //We will fade the object in 10 steps
      var steps = 25;
      
      //Set the starting opacity
      setOpacity(element, 0);
      
      //Loops the timer function
      for(i=0; i<steps; ++i) {
        setTimeout(function(){fadeCallback(element);}, (30*i));
      }
    }
    
    //Callback to timer function
    function fadeCallback(element)
    {
      //Get the current opacity
      var opacity=getOpacity(element);
      
      //Set the new opacity
      setOpacity(element, opacity+0.05);
    }
    
    //Gets an element's opacity
    function getOpacity(element)
    {
      var opacity = null;
      
      //Get the opacity based on the current browser used
      if(browser=="IE") {
        filter = element.style.filter;
        if(filter) {
          alpha = filter.split("alpha(opacity=");
          opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
        }
      }
      else {
        opacity = element.style.opacity;
      }
        
      return opacity;
    }
    
    //Sets an element's opacity
    function setOpacity(element, o)
    {
      //Set the opacity based on the current browser used
      if(browser=="IE") {
        element.style.filter = "alpha(opacity=" + (o*100) + ")";
      }
      else {
        element.style.opacity = o;
      }
    }
    You can call it inline or from a function with this,
    Code:
    fadeIn(logo);
    Last edited by ubh; 10-06-2008 at 10:57 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ubh (10-06-2008)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 Posts
    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function fadeIn(element,inc,srt){
     inc=inc||1;
     if (!srt) element.cnt=0;
     element.cnt+=inc;
     zxcOpacity(element,element.cnt);
     if (element.cnt-inc<100) element.to=setTimeout(function(){fadeIn(element,inc,true);},10);
    }
    
    
    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></head>
    
    <body>
    <input type="button" name="" value="Test" onclick="fadeIn(document.getElementById('tst'),5);" />
    <div id="tst" style="width:100pz;height:100px;background-Color:red;"></div>
    </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/

  • Users who have thanked vwphillips for this post:

    ubh (10-06-2008)

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    WOW awesome thanks guys!! I will give your code a shot vwphillips. I have a one more question. Same scenario, I moved away from that script and found JS Motion Tween class with opacity class. I really like it quite user friendly.

    JS Motion Tween

    Same problem though FF wont work the script right but IE will.

    Code:
    //This function gets called in body onload=""
    function onload()
    {
    opacityTween = new OpacityTween(document.getElementById('logo'),Tween.bounceEaseOut, 0, 100, 1);
    opacityTween.start();
    }
    I in fact do have the classes linked in the correct order

    Code:
    <script type="text/javascript" src="scripts/tween.js"></script>
    <script type="text/javascript" src="scripts/opacityTween.js"></script>
    And my element is ready for IE to use CSS filter
    Code:
    style="filter:Alpha(opacity=0);"
    This works with IE but not FF.
    On the demos page of JS Motion Tween all demos work perfectly in both IE/FF... I am lost... that or sleep deprived.

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Duh I figured it out. I was calling the function onload() and placing it in an onload attribute. oops, soon as I changed the name oh and also added opacity:0; to the inline of my element everything worked perfect.

    Anyone know how far back is CSS opacity supported on FF and IE?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 Posts
    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>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (04-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
    // with 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('left','tst1',20,260,2000,10,2,500);'
    // 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)
    // parameter 5 = (optional) the maximum bounce.                                                            (digits)
    // parameter 6 = (optional) the number of bounces.                                                         (digits or defaults to 2)
    // parameter 7 = (optional) the bounce duration in milliseconds.                                           (digits or defaults to parameter 4/10)
    //
    //  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(1.8 to 2.5K) 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,zxcbsz,zxcbnu,zxcbspd){
     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,zxcbsz,zxcbnu,zxcbspd);
      else zxcoop.update([zxcsrt,zxcfin],zxctime,zxcbsz,zxcbnu,zxcbspd);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime,zxcbsz,zxcbnu,zxcbspd);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime,zxcbsz,zxcbnu,zxcbspd){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime,zxcbsz,zxcbnu,zxcbspd);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime,zxcbsz,zxcbnu,zxcbspd){
     this.time=zxctime||this.time||2000;
     if (zxcbsz){ this.bnu=zxcbnu; this.bsrt=this.bnu; this.bnc=zxcbsz; this.bspd=zxcbspd||this.time/10; }
     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  this.opacity(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  this.opacity(this.data[0]);
      if (this.bnu&&this.bnu==this.bsrt) this.bounce(this.data[0]);
     }
    }
    
    // Optional Function
    zxcBAnimatorOOP.prototype.bounce=function(zxcfin){
     this.bnu--;
     this.update([this.data[0],this.bnu%2==0?zxcfin:this.bnc],this.bspd);
     if (this.bnu%2==0){
      if (this.bnc>zxcfin) this.bnc/=2;
      else this.bnc=zxcfin-((zxcfin-this.bnc)/2);
     }
     if (this.bnu>0) this.to=setTimeout(function(zxcoop){return function(){zxcoop.bounce(zxcfin);}}(this),this.bspd);
    }
    
    // Optional Function
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div id="tst" style="position:absolute;left:100px;top:100px;height:100px;width:100px;background-Color:red;" ></div>
    <input type="button" name="" value="Test 1" onclick="zxcBAnimator('opacity','tst',100,0,1000,10,4,500);"/>
    <input type="button" name="" value="Test 2" onclick="zxcBAnimator('opacity','tst',0,100,1000,50,4,500);"/>
    <input type="button" name="" value="Test 2" onclick="zxcBAnimator('height','tst',0,100,1000,90,4,500);"/>
    </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/

  • Users who have thanked vwphillips for this post:

    ubh (10-06-2008)


  •  

    Posting Permissions

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