Help me find my code glitch?

javascript for cross-browser compatability

[AutumnTD]

Hi all,

I've been working with this code for 6 hours straight, so I'd love a fresh set of helper eyes. The project is to make PNGs work well across browsers, using the alpha filter for IE5+.

My PNGS are table background images, so the proper output should generally be:

<td background="images/textbox.png" width="667">

However, on IE/Windows, it should look like this:

<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/textbox.png',sizingMethod='scale');" width="667">

And on non-supporting browsers, or browsers without Javascript, we'll settle for:

<td background="images/textbox.GIF" width="667">

Here's the code:

<script language="javascript">
// JavaScript Document
if ((browser.isIE55 ¦¦ browser.isIE6up) && browser.isWin32) {
var pngAlpha = true;
// else, if the browser can display PNGs normally, then do that
} else if ((browser.isGecko) ¦ ¦ (browser.isIE5up && browser.isMac) ¦ ¦ (browser.isOpera && browser.isWin && browser.versionMajor >= 6) ¦ ¦ (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) ¦ ¦ (browser.isOpera && browser.isMac && browser.versionMajor >= 5) ¦ ¦ (browser.isOmniweb && browser.versionMinor >= 3.1) ¦ ¦ (browser.isIcab && browser.versionMinor >= 1.9) ¦ ¦ (browser.isWebtv) ¦ ¦ (browser.isDreamcast)) {
var pngNormal = true;
}

function od_displayImage(strPath) {
if (pngAlpha) {
document.write('<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\''+strPath+'.png\',sizingMethod=\'scale\');" width="667">');
} else if (pngNormal) {
document.write('<td background="'+strPath+'.png" width="667">');
} else {
document.write('<td background="'+strPath+'.gif" width="667">'); }
}

</script>

...

<script language="JavaScript">
od_displayImage(images/textbox);
</script>
<noscript><td background="images/textbox.png" width="667"></noscript>

Looks perfect to me, but when executed, nothing happens. Any ideas?

p.s. Google "Cross-Browser Variable Opacity with PNG: A Real Solution" to see the solution I'm basing this on: an article at A List Apart.

[rocknbil]

This is probably going to be no help at all, but since no one has answered . . . .

Where are you getting thse variables?
browser.isIE55,browser.isIE6up,browser.isWin32,browser.isGecko,browser.isIE5up . . . .

Did you insert alerts (alert(browser.isIE55), should return a true or false) along the line?

My "guess" is that this part of it is not working. A long time ago I came across an excellent article on the old devedge.netscape.com (now apparently defunct) the laid out all the really really bad things about performing actions based on browser identification.

They proposed testing for certain object's existence: for example, instead of what browser, platform, and revision level (which changes semi-monthly and requires insane updates to your code,)

if (document.getElementById('layer'); { modern; }
else if (document.all('layer'); { IE 4; }
else if (document.layers('layer'); { NN 4; }
else { some graceful degradation; }

The idea being it's the object we want to operate on, not the browser. If the object is there, who cares what browser it is?

I know this is a layers example, but perhaps a simpler solution may lie in it's concept. I've not worked with these objects you're dealing with, but my first guess would be

if (test for filter object support) { IE; }
else if (test for png support) { png; }
else { gif; }

Surely there must be some common element in those browsers that will equate to filter and png support. Hope this helps unsort your tangled mass. :-)

[AutumnTD]

It sounds like I may be getting in over my head here. I've taken a course in JavaScript, but I'm far from proficient. I think the code I started with a few years out dated, and I'm not quite qualified to revamp the whole thing.

Perhaps its time to give up on the PNGs...

[Solarus]

Hehe funny thing.
I'm working on the same thing right now.
The page you probably found the code on [#*$!.com...]

If you read the text you will notice that the author mentions that all html and scripts is included in a file that you can find in the bottom of the text.

The script you'r talking about is one part of a modified version of browserdetect_lite which can also be downloaded from that site.
"http://oaksanderson.com/opacity/opacity1.zip"
If you include the browserdetect_lite script in you html document the problem should be solved :)

[rocknbil]

It sounds like I may be getting in over my head here ... I'm far from proficient.

Nonsense! :-) The only way to get "proficient" is to keep hacking away at it. I look at those long browser ID scripts and feel over my head myself . . . I hope my post didn't discourage you, and hope it helps you find a simpler solution . . .