PNG Transparency

avatar Andrea Pro May 21. 2008. 9:03 am #1
I'm trying to develop a new theme, but I need support for png transparency for it to work. I found this nice plugin for jquery, but until now It didn't work for me.

http://jquery.andreaseberhard.de/pngFix/

I placed the plugin in the js directory, side by side with jquery, and called it from js.php.
Now for the problematic part... Where the hell should I place the little <script></script> code to activate the plugin? I cannot figure it out...
Any insight?


P.S.: I'm running ac 1.1 RC1
avatar Ilija Studen Staff May 22. 2008. 7:02 am #2
If you included pngFix file into the system than you can add this to the end of jquery.pngFix.js file:

$(document).ready(function(){ 
  $(document).pngFix(); 
});


Note that pngFix needs to be included AFTER jQuery has been included in order to work. Also note that we do not support this type of addons because they can interfere with working JavaScript code. It can cause some really weird problems that are hard to track and solve so AVOID if possible.
Follow @activecollab and activeCollab on Facebook.
avatar Andrea Pro May 22. 2008. 8:36 am #3
Thank you Ilija, unfortunately it doesn't work for me.
1- Added jquery.pngfix.js in "public > assets > javascript"
2- Added the following line of code in "public > assets > js.php", after jquery

ASSETS_PATH . '/javascript/jquery.pngfix.js',

3- Added the trigger at the end of jquery.pngfix.js

What would you suggest as an alternative to support png transparency? TwinHelix iePNGfix? Would you mind to support it as standard in ac?
avatar Andrea Pro May 23. 2008. 7:12 am #4
Ehy Ilija, maybe the problem is the blank.gif image... Just because I didn't understand ac directory structure, I uploaded it in the same js directory of jquery.pngFix.js (because the png fix calls it directly). But it doesn't work... Where should I place this blank.gif?
avatar Andrea Pro May 26. 2008. 7:07 am #5
Tried different approaches, but no one worked. Any insight, please?
avatar Guido May 28. 2008. 3:38 am #6
Place the file image blank.gif in the /public/assets/images/ folder.

Edit the jquery.pngFix.js. Find:

// Settings
settings = jQuery.extend({
        blankgif: 'blank.gif'
}, settings);


And change the path to the blank image to '/public/assets/images/blank.gif'.

If you've followed Ilija's instructions the PNG Fix should work.
avatar Andrea Pro May 28. 2008. 6:37 am #7
Wow, it... works! :-) Thank you, Guido!
BTW it's curious, once explorer applies the png fix, it resizes the images to fill the entire <span> in which it resides.
I'm going to investigate a bit and will report here.
Thanks!
avatar Guido May 28. 2008. 6:44 am #8
There is another version of the PNG fix. Located at: http://www.campbellsdigitalsoup.co.uk/about/png-fix/.

Maybe this will solve your problems. Although I've never come across a version of PNG fix that is perfect.
avatar Andrea Pro May 28. 2008. 6:57 am #9
Thanks again Guido. Back to jquery.andreaseberhard.de/pngFix I found that you actually have the option to choose the rendering method for AlphaImageLoader to use. So, if you don't want the scaling to happen, just edit jquery.pngFix.js and replace every "scale" sizing option with "crop". Unfortunately, this method renders every image starting from the top-left corner and there's nothing you can do about it...
avatar Andrea Pro May 28. 2008. 6:58 am #10
PS: of course... you can always add as much transparent pixels as you need... This problem affects every PNG fix method, even cambell's one.