SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Fading Effect

  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading Effect

    Hi Guys,

    below is a fading script i got from the web. what it does is that it fades in and out of an src image. this works with explorer, but not with firwfox. aprat from validation my js is crap, can anyone fix this script so it work on firefox too?

    JavaScript:
    Code:
    nereidFadeObjects = new Object();
              nereidFadeTimers = new Object();
                  function nereidFade(object, destOp, rate, delta){
                     if (!document.all)
                           return
                      if (object != "[object]"){  //do this so I can take a string too
                         setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                            return;
        }
            
                              clearTimeout(nereidFadeTimers[object.sourceIndex]);
        
                         diff = destOp-object.filters.alpha.opacity;
                    direction = 1;
               if (object.filters.alpha.opacity > destOp){
            direction = -1;
        }
                       delta=Math.min(direction*diff,delta);
                           object.filters.alpha.opacity+=direction*delta;
    
                             if (object.filters.alpha.opacity != destOp){
                                 nereidFadeObjects[object.sourceIndex]=object;
                                   nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }
    HTML:
    Code:
    <img src="nhs.jpg" border="0" style="filter:alpha(opacity=8);" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,20,50,5)">
    cheers

    dug

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mozilla uses the -moz-opacity attribute to set opacity. In styles it is done with:

    Code:
    -moz-opacity: 0.6 (60% opacity)
    filter: alpha(opacity=60) (same)
    in javascript:

    Code:
    //IE
    object.filters.alpha.opacity = newOpacity;
    //Mozilla style
    imgobj.style.MozOpacity=newOpacity/100;

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    chris thanks for your reply.

    i replaced the code with yours, but still not working.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    The moz-opacity style has a range of 0-1 not 1 - 100.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    Transparency object Javascript
    Code:
    function TRANSPARENCY(object) {
      this.object = object;
      this.setObject = setObject;
      function setObject(x) {
        this.object = x;
      }
      this.opacity = 50;
      this.image;
      this.setImage = setImage;
      function setImage(x) {
        this.image = x;
      }  
      this.setOpacity = setOpacity;  
      function setOpacity(x) {
        if(arguments.length != 1) return alert('The setOpacity Method is only allowed one argument.');
        if(typeof x != 'number') return alert('The opacity must be set with a number.');
        if(x < 0 || x > 100) return alert('0-100 are the only valid numbers ');
        this.opacity = x;
      }
      this.ApplyTransparency = browserDetection();
      function browserDetection() {
        if(typeof object.style.opacity != 'undefined') {
          //'w3c'
          return DefaultApply;
        } else if(typeof object.style.MozOpacity != 'undefined') {
          //'moz'
          return MozApply;
        } else if(typeof object.style.KhtmlOpacity != 'undefined') {
          //'khtml'
          return KHTMLApply;
        } else if(typeof object.filters == 'object') {
          if(object.filters.length > 0 && typeof object.filters.alpha == 'object' && typeof object.filters.alpha.opacity =='number') return IEApply;
        } else {
          //'none';
          return alert('This browser does not support transparency.');
        }
      }
      function DefaultApply() {
      this.object.style.opacity = this.opacity/100;  
      }
      function MozApply() {
      this.object.style.MozOpacity = this.opacity/100;
      } 
      function KHTMLApply() {
      this.object.style.KhtmlOpacity = this.opacity/100;
      }
      function IEApply() {
      this.object.filters.alpha.opacity = this.opacity;
      }
    }
    
    TRANSPARENCY.prototype.Fade = Fade;
    function Fade(end,speed) {
      this.interval = setInterval(MakeFade,speed,this,end);   
    }// end of function/methof Fade
      
    TRANSPARENCY.prototype.MakeFade = MakeFade;
    function MakeFade(object,end) {
      if(object.opacity == end) clearInterval(object.interval);
        object.opacity += 1;
        object.ApplyTransparency();
    } // end of function/method MakeFade
    Javascript cont.
    Code:
    window.onload = function() {
      var trans = new TRANSPARENCY(document.getElementById('box'));
      trans.setOpacity(0);
      trans.ApplyTransparency();
      trans.Fade(100,50);
    }
    * The first element in bold is name of the node that has the image or object in HTML you would like to apply the effect to. In this case the node id is "box". The setOpacity method sets the opacity for that element. In this case its 0 – fully transparent. However, it can be anything from 0-100. The Fade method controls the fade interval. The first argument is the end transparency and the second is the speed for the interval. In this case the box will fade from 0 to 100(opaque) in 50.


    XHTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Menu</title>
        <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
        <script language="javascript" type="text/javascript" src="transparency.js"></script>
    </head>
    <body style="background-color:white;">
    
    <div style="background-repeat:no-repeat;background-image:url(hotel.jpg);top:50px;left:50px;position:relative;width:500px;height:200px;" id='box'>
    </div> <!-- end of wrapper -->
    
    </body>
    </html>

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oddz thats some great code but it only works on firefox, also i wanted to maintain the same effect as in my original code. that is:

    onmouseover="nereidFade(this,100,30,5)" - fade
    onmouseout="nereidFade(this,20,50,5 - fade to original

    see this link for a sample: http://www.webdelux.co.uk/newsite/portfolio.html

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    really?

    What browser isn't it working on?

    I developed it on a mac where I could only test it in safari and firefox so I'm interested in knowing. The problem in your code like I stated is moz-opacity has a range of 0-1. Therefor, you need to divide the currect value by 100 to get the correct moz-opacity value. You'll also want to round it off.

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    javascript
    Code:
    nereidFadeObjects = new Object();
              nereidFadeTimers = new Object();
                  function nereidFade(object, destOp, rate, delta){
                     if (!document.all)
                           return
                      if (object != "[object]"){  //do this so I can take a string too
                         setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                            return;
        }
            
                              clearTimeout(nereidFadeTimers[object.sourceIndex]);
        
                         diff = destOp-object.filters.alpha.opacity;
                    direction = 1;
               if (object.filters.alpha.opacity > destOp){
            direction = -1;
        }
                       delta=Math.min(direction*diff,delta);
                           if(typeof object.style.MozOpacity != 'undefined') object.style.mozOpacity +=((direction*delta)/100); else object.filters.alpha.opacity+=direction*delta;
    
                             if (object.filters.alpha.opacity != destOp){
                                 nereidFadeObjects[object.sourceIndex]=object;
                                   nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }

  9. #9
    SitePoint Evangelist
    Join Date
    Apr 2005
    Location
    London, UK
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    really?

    What browser isn't it working on?

    I developed it on a mac where I could only test it in safari and firefox so I'm interested in knowing. The problem in your code like I stated is moz-opacity has a range of 0-1. Therefor, you need to divide the currect value by 100 to get the correct moz-opacity value. You'll also want to round it off.

    It does not work on IE. Quite a surprise as IE tends to be more forgiving about rendering code

    I replaced my code with yours, but still no joy on firefox, it's fair to give-up on this. Most of my programming has been on the server side, so I'm rough when it comes to javascript.


    dug


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
  •