Quick jquery / png help

[decksnap]

I'm using jquery and the ifixpng plugin on this page... and I can't figure out if I am doing something really stupid or what, but the ifixpng script isn't working yet.

The script is to force transparency in pngs in IE6. I'm only using this method because I'm already using jquery for other things on the page. Anyway, the sample png is on the right side of the page (snowball with flag stuck in him)... still not transparent in IE6.

Anybody have any ideas of what I'm doing wrong? Also... about the rest of the content.. don't ask! still in development.

Solved... link removed.

 

[SrWebDeveloper]

Make sure you saved "images/pixel.gif" as the instructions on the plugin site state.

Then, based on your source, try this...

Find:

$('img[@src$=.png], #top-left-graphics-one, #top-left-graphics-two').ifixpng();

Change to:

$('img[@src$=.png], div#png-inset-right').ifixpng();

If that doesn't work, not a clue. There are other plugins that do the same, too, so you're not married to this one.

-jim

 

[decksnap]

thanks - that doesn't seem to work either.

Does this look correct at it's most basic syntax level? I am an idiot with js.

<script language="javascript" src="js/jquery.ifixpng.js" type="text/javascript"></script>

<script language="javascript">
$(document).ready(function() {
$('img[@src$=.png]').ifixpng();
});
</script>

 

[SrWebDeveloper]

Hmmm...

The "img[@src$=.png]" part is the selector and it bothers me. It means select any image with an attribute named src that ends in .png. But nowhere in the JQuery selector docs could I find reference to the "@" character (at least so far, as of this writing) so maybe try simply removing that one @ character? I still recommend using my code (without the @) as I checked your source and that div and ID surround your image. Just guessing since you asked.

FYI, I prefer not to intensely debug plugin code which extends jQuery which in turn extends the DOM. I might try a few combinations, sure, but if my code accurately reflects the documentation and it still farts (which might be happening here, I saw the @ char in the code comments, maybe its a typo) I usually just re-visit the plugin site and check the FAQs or forum. When all else fails, try another plugin or a different approach, such as:

Simply convert the image to a .gif with transparency and optimize properly. No reliance on JS, problem solved. I know png's are a little higher resolution, I'm just sayin'.

-jim

 

[decksnap]

Thanks - I agree I have spent too much time on this particular bit not to move on. The way the instructions read, the @ part somehow makes it so you don't have to directly target each id... so that it applies to all .pngs on the page.

I think I'll try another implementation. The gif method (index transparency) makes the results a little too harsh for my taste. My fault for trying to float transparent graphics over a gradient!

Thanks for your help anyway.

 

[decksnap]

hmmmm... I actually just got the same advice from someone else about removing the @.

Guess I'll give it one more go tomorrow.

 

[decksnap]

worked!!!

Thanks Jim! Boy, the documentation on implementing that is supremely lame/misleading.

 

[SrWebDeveloper]

Wouldn't be the first time open source third party code documentation was wrong. It's the "price" one pays for getting something free, sometimes. Usually it's a simple matter of the plugin author using some other jQuery plugin for a different project and they simply get used to using the "@" or whatever and forget to remove it in their docs. But glad we figured it out and all is well. Cheers.

-jim