Conditionally load Javascript

[versatility]

I have some javascript that addresses png transparency that I want only to load for IE 6.  I have tried everything under the sun, conditional comments wrapped in literal tags, external js file, inline js file, and nothing works.

The script works fine when i do not attempt to make it ie6 conditional.

Can anyone tell me the absolutely proper way to do this?  Am making myself crazy with the trial and error!

Thanks!

[Nullig]

Perhaps, if you posted your code, we could see what the problem is.

Nullig

[versatility]

Well, ok, the code itself is fine:

Code: Select all

var bgsleight	= function() {
	
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
	
	function fnLoadPngs() {
		var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
		var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
		for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
			if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
				fnFixPng(obj);
				obj.attachEvent("onpropertychange", fnPropertyChanged);
			}
		}
	}

	function fnPropertyChanged() {
		if (window.event.propertyName == "style.backgroundImage") {
			var el = window.event.srcElement;
			if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
				var bg	= el.currentStyle.backgroundImage;
				var src = bg.substring(5,bg.length-2);
				el.filters.item(0).src = src;
				el.style.backgroundImage = "url(x.gif)";
			}
		}
	}

	function fnFixPng(obj) {
		var bg	= obj.currentStyle.backgroundImage;
		var src = bg.substring(5,bg.length-2);
		var sizingMethod = (obj.currentStyle.backgroundRepeat == "no-repeat") ? "crop" : "scale";
		obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
		obj.style.backgroundImage = "url(../images/blank.gif)";
	}
	return {
		init: function() {
				if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
				addLoadEvent(fnLoadPngs);
			}
		}
	}
}();

bgsleight.init();

I tried this conditional:

Code: Select all

<!--[if IE6]>
<__script__ language="JavaScript" type="text/javascript" src="bgsleight.js"></__script>

<![endif]-->

which didn't remotely work

I tried this

Code: Select all

{literal}<!--[if IE6]>
<__script__ language="JavaScript" type="text/javascript" src="bgsleight.js"></__script>

<![endif]-->{literal}

I read this http://msdn2.microsoft.com/en-us/library/ms537512.aspx but had some difficult grasping the downlevel hidden and downlevel revealed.

I either break the site and get smarty errors, or do not get the script to apply to any browser, or apply it successfully to all 3.  Can't select just IE6

[Greg]

Try (note the space)

Code: Select all

<!--[if lte IE 6]>
<__script__ language="JavaScript" type="text/javascript" src="bgsleight.js"></__script>
<![endif]-->

You may need more info in the path to bgsleight.js   i.e.  uploads/js/bgsleight.js or whereever you stored it.

[Pierre M.]

Hello,

May be another way : switch at the webserver level to the right .js file according to the browser.

Something like this in .htaccess or httpd.conf :
RewriteCond %{HTTP_USER_AGENT} ^MSIE6.*
RewriteRule ^/file\.js/$ /file-ie6.js [L]
This "MSIE6" regexp needs to be tuned, I haven't tested this. It should serve file-ie6.js instead of file.js to IE6.

Pierre M.