JavaScript: jQuery Plugin to fade Background but not Content: no css hacks, no *.png files, no problems ...

UPDATE: the toNum method must be changed to this:

function toNum(strNum) {
if (strNum && strNum != "") {
var i = parseFloat(strNum);
if (i.toString() == "NaN")
return 0;
else
return i;
}
return 0;
};


I scoured the web in search of a jQuery plugin that allows me to fade the background but not the contents of a div. I found this article: Cross Browser Transparent Background with jQuery, no css hacks, no *.png files by Mihaistancu and noted that there were a lot of problems with the plugin. It didn't work for me -> but I'm sure it's great code once I figure out the particulars.

I decided to write my own plugin that can take some of these issues into account. The below jQuery plugin has been tested in IE7, Firefox, Opera and Safari and it works.

It takes padding and borders into account so your padding will be enforced and so will your background borders (background can have borders!!). Infact, anything that is not a child element will be applied to the background fade.

How it works:
1) Get the dimensions of TheDiv we want to fade (top, left, height, width - if these are not set in css it will default to the default style for that html element type).
2) Get the inner html of TheDiv and add it to a NewDiv (with id: TheDiv.id + "_content"), and append that NewDiv to TheDiv's parent.
3) Fade TheDiv out ...

Give it a shot and let me know what you think.

You can call the plugin like so:

$(document).ready(function() {
$("#outer").fadeBack();
});

You can download a zip file example /plugin from my Windows Live Space here.

You can see the raw plugin source code below:

(function($) {


$.fn.fadeBack = function(options) {

var _s = $.extend($.fn.fadeBack.defaultOptions, options);

return this.each(function() {

var t = $(this);
var oh = t.height();
var ow = t.width();
var ih = t.html();
var p = t.parent();
var tl = t.position();
var id = t[0].id + "_content";

t.css({ height: oh, width: ow }).html("").fadeTo("fast", _s.opacity);

var padding = dimSum(getPadding(t), getBorderSizes(t));

var ncss = { top: tl.top, left: tl.left,
position: "absolute", height: oh, width: ow,
paddingTop: padding.top, paddingBottom: padding.bottom,
paddingLeft: padding.left, paddingRight: padding.right };

$("

" + ih + "

").css(ncss).appendTo(p);

});

function dimSum(dim1, dim2) {
return { top: dim1.top + dim2.top,
bottom: dim1.bottom + dim2.bottom,
left: dim1.left + dim2.top,
right: dim1.right + dim2.right
}
};

function getBorderSizes(sel) {
return {
top: toNum(sel.css("borderTopWidth")),
bottom: toNum(sel.css("borderBottomWidth")),
left: toNum(sel.css("borderLeftWidth")),
right: toNum(sel.css("borderRightWidth"))
};
};

function getPadding(sel) {
return { top: toNum(sel.css("paddingTop")),
bottom: toNum(sel.css("paddingTop")),
left: toNum(sel.css("paddingLeft")),
right: toNum(sel.css("paddingRight"))
};
};

function toNum(strNum) {
if (strNum && strNum != "") {
var i = parseFloat(strNum);
if (i.toString() == "NaN")
return 0;
else
return i;
}
return 0;
};

}

})(jQuery);

$.fn.fadeBack.defaultOptions = { opacity: 0.4 }

Over and Out