jquery png fix on hidden div and jquerybrowser question

Question

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"/>

I should probably set the images as background elements, and use conditional CSS formatting to only apply the GIF on IE6- as well.. — Jared, Dec 11 '09 at 21:09
I don't see why you need to put that code in a loop/each, it shouldn't be necessary. — meder omuraliev, Dec 11 '09 at 21:11
I tried to just straight up apply the PNG code, and it didn't work either, so I was wondering if fadeIn() was incompatible, and tried show() instead. No, it's not necessary, but either way I can't get the PNG code to work. — Jared, Dec 11 '09 at 21:13
This one helped me: http://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8 Thank you so much — paul, Jun 10 '10 at 04:46

score 0 · Accepted Answer · answered Dec 11 '09 at 21:16

0

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

answered Dec 11 '09 at 21:16

Peter Rowell

17,605
2
49
65

score 0 · Answer 2 · edited Mar 24 '13 at 14:42

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

–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

jquery png fix on hidden div and jquerybrowser question

2 Answers2