Page 1 of 1
Conditionally load Javascript
Posted: Wed May 09, 2007 8:40 pm
by 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!
Re: Conditionally load Javascript
Posted: Wed May 09, 2007 9:24 pm
by Nullig
Perhaps, if you posted your code, we could see what the problem is.
Nullig
Re: Conditionally load Javascript
Posted: Wed May 09, 2007 9:49 pm
by 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
Re: Conditionally load Javascript
Posted: Thu May 10, 2007 12:31 am
by 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.
Re: Conditionally load Javascript
Posted: Thu May 10, 2007 9:12 am
by 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.