jquery png fix on hidden div and jquerybrowser question

Question

Hello,

I have some code that if Javascript is available, it will remove a GIF image and replace it with a PNG image. The PNG is display:none and the GIF is visible.

Since IE6- browsers can't load PNG, I have loaded the jquery PNG fix. But it only seems to work if the image is already visible.

The other issue is I am trying to get the jquery.browser function to apply to less than version 6, and I am not having much luck.

<script type="text/javascript">
    $(document).ready(function(){
     $("#gif").hide();



     jQuery.each(jQuery.browser, function(i, val) {
  if($.browser.msie && jQuery.browser.version <="6"){
     $("#png").show(); 
     $('.png').pngFix()
  }else{
     $("#png").fadeIn("slow");

  }
});





    });

</script>

HTML

<img class="png" id="png" src="images/main_elements/one-2-flush-it-campus-challenge.png" style="display:none;" />
<img id="gif" src="images/main_elements/one-2-flush-it-campus-challenge.gif"/>

Answer 1

Alternatively, you could use IE PNG Fix and just use PNG for all browsers. It still requires JS, but it can be useful.

Answer 2

Hello Guyz, Here is my Fix to this problem! i've posted it before but in the wrong topic... Just replicating!!!

Download jQuery-Plugin “pngFix” from (http://jquery.andreaseberhard.de)

Great PlugIn By The Way!!!

–Change these lines like the following:

// this line
jQuery(this).find(“img[src$=.png]:visible”).each(function() {
// this line
jQuery(this).find(“:visible”).each(function(){
// and this line
jQuery(this).find(“input[src$=.png]:visible”).each(function() {

–Before the end Place this Code

// Store a reference to the original method.
var _show = jQuery.fn.show; 

// Overriding Show method.
jQuery.fn.show = function(){
// Execute the original method.
_show.apply( this, arguments );
// Fix Png
return $(this).pngFix();
} 

//No more problems with hidden images 

})(jQuery); 

//The End

Answer 3

This one helped me:

http://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8

Thank you so much