.Net Custom Panel Control with Transparent Background (no png's, css hacks, or problems)

I'm making a really quick post on how you can wrap the jQuery fadeBack control into a .Net Web Custom Control. If you haven't read the article on the fadeBack control, you will have to go here and grab the source.

Save the scripts in a script folder inside your Web Site / Web Application.

To use this control you need to add a reference to the Web Server Control project you have built the code in.

To use this control in your WebForm please Register the Web Server Control dll and namespace on the page like:
<%@ Register Assembly="<<NAME OF WEB SERVER CONTROL PROJECT DLL>>" Namespace="<< THE NAME OF THE NAMESPACE>>" TagPrefix="ctl" %>

Then you can start using the control like so:

<ctl:TransBackPanel ID="backTest" runat="server"
Width="400px" Opacity="20" BackColor="Aquamarine"
BorderColor="Red" BorderWidth="10px" BorderStyle="Solid">
<ctl:TransBackPanel ID="TransBackPanel1" runat="server"
Width="300px" Opacity="20" BackColor="Red"
BorderColor="Green" BorderWidth="10px" BorderStyle="Solid">
<div>Hello World!</div>
</ctl:TransBackPanel>
</ctl:TransBackPanel>

Below is the source code for the .Net Web Custom Control, add this to a Web Server Control project and build:

[ToolboxData("<{0}:TransBackPanel runat=server></{0}:TransBackPanel>")]
public class TransBackPanel : Panel
{

// the jQuery script reference
public const string JQUERY_KEY = "jquery-1.3.2.min.js";
public const string JQUERY_URL = "script/jquery-1.3.2.min.js";

// the transparent background plugin reference
public const string TRANSBACKPANEL_KEY = "jQuery.fadeBack.js";
public const string TRANSBACKPANEL_URL = "script/jQuery.fadeBack.js";

/// <summary>
/// Declare a local variable with the default opacity
/// </summary>
private int _Opacity = 20;

/// <summary>
/// Get / Set opacity to an int - 100 to 0 with 100 being a completely transparent background.
/// </summary>
public int Opacity { get { return _Opacity; } set { _Opacity = value; } }

/// <summary>
/// Override the create child controls method and add the scripts from our constants
/// </summary>
protected override void CreateChildControls()
{

// Register jQuery like so
if (!Page.ClientScript.IsClientScriptIncludeRegistered(JQUERY_KEY))
Page.ClientScript.RegisterClientScriptInclude(JQUERY_KEY, JQUERY_URL);

// Register the fade back external script
if (!Page.ClientScript.IsClientScriptIncludeRegistered(TRANSBACKPANEL_KEY))
Page.ClientScript.RegisterClientScriptInclude(TRANSBACKPANEL_KEY, TRANSBACKPANEL_URL);

base.CreateChildControls();
}

/// <summary>
/// Render the panel control
/// </summary>
/// <param name="writer"></param>
protected override void Render(HtmlTextWriter writer)
{

// Register the startup script to fade the background to another color
if (!Page.ClientScript.IsStartupScriptRegistered(this.ID))
Page.ClientScript.RegisterStartupScript(typeof(string), this.ID, GetOnloadScript(), true);

base.Render(writer);

}

/// <summary>
/// Produce a jQuery on load thingy to geter done.
/// </summary>
/// <returns></returns>
private string GetOnloadScript()
{
return "$(document).ready(function() {\n" +
"$('#" + this.ClientID + "').fadeBack({opacity:" + Convert.ToDouble(Opacity) / 100 + "});\n" +
"});";
}

}

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

JavaScript: Chaining Cancelable Events - If you're not first, you're last

Another quick post on cancelable events in JavaScript. An example of a cancelable event is the keydown method. If I return false from a keydown method JavaScript will not allow the action of that keydown event to proceed. For example, I could return false on a document keydown event to cancel the ctrl+c behaviour etc. etc.

The following is a nice method I've built and tested only in IE 7 which allows users to chain JavaScript events together.

Obviously this could be compressed significantly.

addToObject: the HtmlElement we want to attach the cancelable event to.

eventName: the name of the event we want to trap.

methodDelegate: a JavaScript function delegate / closure for the JavaScript method to attach to the event.

order: First or Last. You can build on this however you want.

Enjoy,

function AddCancelableEvent(addToObject, eventName, methodDelegate, order) {
if (addToObject[eventName] != null) {
var oe = addToObject[eventName];
if (order == "first")
addToObject[eventName] = function(e) {
var r = methodDelegate(e);
if (r == false) return false;
return oe(e);
};
else // "if you're not first you're last" - Ricky Bobby
addToObject[eventName] = function(e) {
var r = oe(e);
if (r == false) return false;
return methodDelegate(e);
};

} else {
addToObject[eventName] = methodDelegate;
}
};


Over And Out