SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery fadein / fadeout of transparent png in IE7 and Chrome

    Hi,

    I've been looking for any solution to a problem I am having, but have of yet found no such solution. I am using the jquery fadein and fadeout on a transparent png. In firefox, this works great. However, in IE7, during the fade, the transparent area is black. In Chrome, this area is white.

    This may have something to do with the way these browsers handle opacity on transparent png's? I'm just not sure, and I didn't find much help on the net.

    Any suggestions / solutions would be much appreciated. Thanks!

    Jason

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    It looks like someone succeeded by putting the png inside a container and fading that container instead.
    jQuery Development - IE7 .png transparency bug on fadeIn and fadeOut

    It's a known issue though and no doubt one that the jQuery development team aren't pleased about.
    Last edited by paul_wilkins; Dec 21, 2008 at 08:22.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pmw57...

    I attempted to wrap the element both in a div and span tag, but neither method seemed to work for me. Perhaps I'm implementing the strategy wrong? Below is the code that I'm using.

    HTML:
    Code HTML4Strict:
    <span id="logoRoll">
    	<a href="index.php">
    		<img src="assets/images/logoRollover.png" alt="Osteopathic Physicians" />
    	</a>
    </span>

    CSS:
    Code CSS:
    span#logoRoll { position: absolute; left: 250px; top: 23px; width: 73px; height: 21px; display: none; z-index: 1000; }

    JS:
    Code JavaScript:
    $(function(){
    	$("img#logo").hover(function(){
    			$("span#logoRoll").fadeIn(250);
    		},function (){
    			$("span#logoRoll").fadeOut(300);
    		}
    	);
    });

    Using this method, there is still a black border in IE and a white border in Chrome during the fade.

    The only solution may be graceful degradation?

  4. #4
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has anyone successfully achieved this by wrapping a transparent png within a div and faded the div in? It certainly didn't work for me using the above method.

  5. #5
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution I came up with is not ideal, so first let me start by asking anyone who comes up with a solution and runs across this thread, to please post.

    I first checked to see what kind of degradation I would get using transparent gif's. While this worked to an extent, the quality and transparency was not acceptable, so I moved on.

    I resorted to only performing the fadeIn and fadeOut function when the user was browsing from Firefox or Safari. These browsers are able to perform a fadeIn and fadeOut on a transparent png.

    I first marked the problem images with a specific class. Then, Using Peter-Paul Koch's JavaScript browser detection object (found here), I only allow the fade to occur if the user's browser is Firefox or Safari. Otherwise, these specific images will not fade, the image will simply switch to the transparent image on rollover.

    For this to work in IE 6, you need to make sure to use one of the transparent png fixes on the image. I use an edited version of Unit Interactive's PNG fix (found here). My edit takes out the background fix code and targets only specified images.

    While I'm still searching for a true fix to this issue, this will suffice for now. It minimally effects this website and still keeps the nice transparent images.

    Best,
    Jason

  6. #6
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimonJ621 View Post
    Hi,

    I've been looking for any solution to a problem I am having, but have of yet found no such solution. I am using the jquery fadein and fadeout on a transparent png. In firefox, this works great. However, in IE7, during the fade, the transparent area is black. In Chrome, this area is white.

    This may have something to do with the way these browsers handle opacity on transparent png's? I'm just not sure, and I didn't find much help on the net.

    Any suggestions / solutions would be much appreciated. Thanks!

    Jason

    Hi,

    I kind of made up a solution, by changing opacity values for IE and disabling opacity change for Chrome.

    Here you go:
    Code JavaScript:
    //jQuery.browser alteration for Google Chrome detection
    //source: javascriptly.com/2008/09/javascript-to-detect-google-chrome/
    var userAgent = navigator.userAgent.toLowerCase();
    jQuery.browser = {
      version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
        chrome: /chrome/.test( userAgent ),
        safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
    };
     
    rolloverFade = {
      init: function() {
        if (jQuery.browser.chrome) { 
          this.preloadWithoutFade(); //rollover without fade for chrome
        }
        else {
          if (jQuery.browser.msie) { //IE
            minOpacity = "0.4"; maxOpacity = "0.6"; 
          }
          else { //other browsers
            minOpacity = "0.8"; maxOpacity = "1.0"; 
          }
          this.preloadWithFade();
        }
     
        function rolloverMouseOver () { $(this).attr( 'src', rolloverFade.newimage($(this).attr('src'))); if (!jQuery.browser.chrome) { $(this).fadeTo("slow", maxOpacity)}};
        function rolloverMouseOut  () { $(this).attr( 'src', rolloverFade.oldimage($(this).attr('src'))); if (!jQuery.browser.chrome) { $(this).fadeTo("slow", minOpacity)}};
     
        //hoverIntent config start
        var config = {    
         sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)    
         interval: 50, // number = milliseconds for onMouseOver polling interval    
         over: rolloverMouseOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 0, // number = milliseconds delay before onMouseOut    
         out: rolloverMouseOut // function = onMouseOut callback (REQUIRED)    
        };
        //hoverIntent config end
     
        $(".rolloverFade").hoverIntent(config);
      },
      preloadWithFade: function() {
        $(window).bind('load', function() {
          $('.rolloverFade').each( function( key, elm ) { $('<img>').attr( 'src', rolloverFade.newimage( $(this).attr('src') ) ); });
          $(".rolloverFade").fadeTo("fast", minOpacity); 
        });
      },
      preloadWithoutFade: function() {
      $(window).bind('load', function() {
        $('.rolloverFade').each( function( key, elm ) { $('<img>').attr( 'src', rolloverFade.newimage( $(this).attr('src') ) ); });
        });
      },
      newimage: function( src ) { 
        return src.substring( 0, src.search(/(\.[a-z]+)$/) ) + '_hover' + src.match(/(\.[a-z]+)$/)[0]; 
      },
      oldimage: function( src ) { 
        return src.replace(/_hover\./, '.'); 
      }
    };
    //--> 
     
    <!--
    $(document).ready( function() {
      rolloverFade.init();
    });
    //-->

    If you don't want to use hoverIntent, just delete everything between "hoverIntent config start" and "hoverIntent config end" and change

    Code JavaScript:
    $(".rolloverFade").hoverIntent(config);

    with

    Code JavaScript:
    $(".rolloverFade").hover(config);


    Hope it works.

    Cheers,
    Stefan

  7. #7
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Almost gave up on the black borders/shadow on PNGs in IE7 and IE8 but finally solved this using Unit's PNG fix. Try it.. works a charm on Jquery cycle and other animated effects.

    (I'd post the URL but I'm newly registered and can't)

  8. #8
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The unitpng fix does work to fix both images with transparent png's as well as transparent png's used as element background images. It doesn't work well with a css-sprite implementation though as it alters background positioning.

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FIXED!

    I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.

    Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...

    Code:
    .item img {
    	background: transparent;
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    	zoom: 1;
    
    }

    Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.

  10. #10
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dan.tello thak you! Old post I know but this is just great. I have been wrestling with the transparecy issue for days


    Paul MacLean
    <snip/>
    Last edited by ScallioXTX; Dec 11, 2010 at 07:19. Reason: old fake sig - snipped but no action taken

  11. #11
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dan.tello,

    Thank you, thank you, thank you for the solution! I've been struggling with this for over a week and was about to give up, until I stumbled across your post. Good sleuthing!

    -Steve

  12. #12
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you dan.tello,

    You saved my day !


Tags for this Thread

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
  •