Monday, August 17, 2009

A "Subtle" MessageBox

For years now, whenever I wanted to display a message box to the user I'd use some variation of the following:

// Displays an alert message box to the user.
public static void ShowMessage(string msg)
{
msg = Tools.FixJavaScriptString(msg);
Page page = HttpContext.Current.CurrentHandler as Page;
ScriptManager.RegisterStartupScript(page, page.GetType(),
Guid.NewGuid().ToString(), "alert('" + msg + "');", true);
}

// A single apostrophe is not allowed in a SQL string
// on its own so we need to prefix it with a backslash
.
public static string FixJavaScriptString(string text)
{
string text2 = text;
if (text.IndexOf("'") != -1)
text2 = text.Replace("'", "\\'");

return text2;
}

This works fine but the drawback is that the user must press the OK button on every Alert box.

Inspired by a feature I first noticed in FaceBook, I decided to create a MessageBox that would appear but then fade away after a developer-defined period of time. You can see it in action in this video:
video

The solution works with all of the following, which I use in most of my web development work:
  • The ASP.Net AJAX UpdatePanel
  • C#
  • jQuery
To get it working, first you must add this markup code to every page you wish to display a Subtle MessageBox on:




I always place this code right near the bottom of every Content page, just above "".

Then add the following server-side code to your web app (I have it in a shared code file called "Common.cs") :

// Displays a message box that disappears on its own.
public static void ShowSubtleMessage(string msg, int duration, string[,] cssParams)
{
msg = Tools.FixJavaScriptString(msg);
string script = "$('div#msg').empty().html('" + msg + "'); $('div.subtleMsg')";

if (cssParams != null)
{
string property = "";
foreach (string cssItem in cssParams)
{
if (property == "")
property = cssItem;
else
{
string propVal = cssItem;
script += ".css('" + property + "', '" + propVal + "')";
property = "";
}
}
}

Page page = HttpContext.Current.CurrentHandler as Page;
script += ".fadeIn(1000).animate({ opacity: 1.0 }, " + duration.ToString() + ").fadeOut(2000);";
ScriptManager.RegisterStartupScript(page, page.GetType(), Guid.NewGuid().ToString(), script, true);
}

Here is the CSS code that I use:

div.subtleMsg
{
display:none;
float: left;
position:absolute;
left:360px;
top:220px;
width:300px;
height:100px;
background:#0e90e6 url(../Images/Gradients/blueRectGradient4.jpg);
text-align:center;
padding:10px;
font-size:16px;
font-weight:bold;
color:White;
border:ridge 5px darkgray;
}


And here's a typical call to the method:

string msg = "Blank descriptions are not allowed!";
Common.ShowSubtleMessage(msg, 2000, new string[,] { { "left", "470px" }, { "top", "310px" }, { "width", "330px" }, { "height", "60px" } });



There are several improvements that could be made:
  • The HTML markup code could potentially be created with jQuery, via a call from the server-side code. I tried to do this but after several hours gave up. Perhaps someone reading this will come up with a solution!
  • Potentially the minimum required dimensions of the message box could be automatically calculated using some method in the .Net library.
But I think it's a good start and it works well for me! You can download a copy of everything here.

5 comments:

  1. Does it still fade away if the user mouses over it?

    In the demo video I just saw I didnt have time to read the messagebox text before it dissolved.

    ReplyDelete
  2. It does not fade away if the user mouses over it but you could add that feature if you wanted it. The duration it stays visible for is completely up to you!

    ReplyDelete
  3. Hi,
    You can put the following line in your function and you won't be required to pass currently executing page.

    mypage=HttpContext.Current.CurrentHandler as Page;

    Thanks for this function.. :)

    ReplyDelete
  4. Nilesh, thank you for that tip! I was not aware one could do that. I have updated the code in this posting, as well as my own code, to make use of it. It provides for more streamlined code, which I always like!

    ReplyDelete
  5. thanks a lot for this.
    also thank you to all those that contributed to make it what it is today

    ReplyDelete