Over the past couple of weeks I've been asked this same question several times, 'how do I create a popup window'. When the alt and title HTML tags just wont do, the next best thing is the use of JavaScript in conjunction with a div tag. This allows for custom styled tooltips that can match the style of your website and hold much more content rich information. The fact that I use this technique in most applications to show the user additional information, such as help snippets or even additional reports, shows how useful it is.

You will be surprised just how simple it is to create a popup tooltip. All that is required is a div tag with an ID somewhere on your page, set its display to 'none' and use JavaScript to switch the box between 'block' and 'none' property values on onmouseover and onmouseout JavaScript events.

An example of a custom tooltip in action...

There are three main sections, the JavaScript code, the element that calls the JavaScript (in our case an image) and the finally the div element.

<script type="text/javascript">
<--
function ShowPopup( evt )
{
    //Get the popup div tag by its ID
    tt = ( document.all ) ? document.all.divTooltip :
       document.getElementById( "divTooltip" );

    tt.style.display = "block";

    //Set position of hover-over popup
    tt.style.top = evt.clientY + document.body.scrollTop + 9 + "px";
    tt.style.left = evt.clientX + document.body.scrollLeft + 20 + "px";
}

function HidePopup()
{
    tt = ( document.all ) ? document.all.divTooltip :
       document.getElementById( "divTooltip" );

    tt.style.display = "none";
}
-->
</script>

Place the above snippet of code between the head tags of your page. Please note that I have appended "px" to the positon of the tooltip, this is necessary for it to work in Firefox!

In the code snippet above the divTooltip HTML element is found and stored in a local variable. This allows us access to all of its properties, enabling us to change it from hidden to fully visible. Also the position of the popup is set by getting the co-ordinates of the mouse when the ShowPopup fuction is called.

<img src="Images/comment.jpg" onmouseover="ShowPopup(event);"    onmouseout="HidePopup();" />

<div id="divTooltip" class="tooltipStyle">
   <strong>Rich Information Popup Example</strong>
   <br />
   <i>Place any text, picture, web controls here...</i>
   <br />
   <img src="App_Themes/Images/google_analytics_dashboard.jpg" />
</div>

.tooltipStyle { border: #333 1px outset; width: 400px; height: auto;
    background-color: #ffffd9; padding: 5px; display: none; position:
    absolute; }

Place the image were required and the div element at the bottom of your page. Also copy the sytle into your websites' style sheet as required.

This example uses a hidden div tag containing various elements, which forms the main part of the popup. The image is the element that calls our JavaScript events, but this could be any element you liked (as long as it supports the necessary events).

That ends this example of a basic popup, please note that this wont work properly in Firefox, but I'll be doing a more advanced version further down the line.

As I was trawling the internet for inspiration for what I could do with my sites background image and style (you can see I’ve settled for something plain and simple, there was a lot of head banging and wasted time trying out stuff) I came across this site and was blown away.

Basically, Filter Forge is ‘A plug-in for Adobe Photoshop that allows you to build your own filters’ that was easy, but the results from this plug-in and the filter examples available on their site are some of the best I’ve seen. I’m looking at it with my web development tinted glasses on, but I guess there’s many uses for this plugin, one been creating amazing backgrounds tiles and patterns for web pages.

Have a look below through some examples from Filter Forge, head over there to view 5000+ user created filters, which you may want to sift through.

Microsoft.NET framework provides many rich class libraries, which makes the life of a developer easy. Sending emails could not be more simple than using the System.Net.Mail namespace that is provided in ASP.NET v2.0. In this post we will see how we can make use of the MailMessage class to send emails.

The System.Net.Mail namespace contains classes used to send electronic mail to a Simple Mail Transfer Protocol (SMTP) server for delivery. The MailMessage class represents the content of a mail message. Instances of the MailMessage class are used to construct e-mail messages that are transmitted to an SMTP server for delivery using the SmtpClient class.

using System.Net.Mail;
using System.Text.RegularExpressions;

Make sure to add a reference to the above two namespaces

Note: System.Web.Mail is obsolete in .NET 2.0 and superseded by System.Net.Mail. I am also using System.Text.RegularExpressions namespace to check for invalid emails.

ArrayList brokenEmails = new ArrayList();
Regex rgxEmail = new Regex( @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$" );
MailMessage message = new MailMessage();

//split email address if multiple entries exist
string[] splitToEmails = to.Split( new Char[] { ',', ';' } );

//Check for valid email addresses
foreach( string address in splitToEmails )
    if( rgxEmail.IsMatch( address ) )
        message.To.Add( new MailAddress( address.Trim() ) );
    else
        brokenEmails.Add( address );

The above regular expression is sufficent for email validation. If not, you can pick from a list here or if you’re feeling brave create your own.

In the above snippet of code we can see that I have setup the string pattern for the regular expression, which will match strings against most email formats. In this example I’m expecting multiple recipients’ email addresses to be entered into the textbox. Hence I split the string against ‘,’ and ‘;’ characters to get an array of individual email addresses.

Next we loop through the list of email addresses in the array and check if it matches the string pattern we declared earlier. If the email is valid and matches the expression then we add the email to our message instance, else we add the broken email to a list, which can be displayed later when required.

message.From = new MailAddress( from );
message.Subject = subject;
message.Body = body;
message.IsBodyHtml = isHtml;

SmtpClient emailClient = new SmtpClient();
emailClient.Send( message );

System.Net.Mail reads SMTP configuration data out of the standard .NET configuration system (so for ASP.NET applications you would configure this in your application’s web.config file). If your site is hosted then the following snippet isn’t required as it should be setup to defaults on the host server, but should be used for intranet development and developing/tesing on your local PC. Here is an example of how to configure it:

<system.net>
 <mailSettings>
   <smtp from="test@foo.com">
     <network host="smtpserver1" port="25" userName="username"
         password="secret" defaultCredentials="true" />
   </smtp>
 </mailSettings>
</system.net>

Hope this helps, if you have any questions hit the contact link.

If you have an ASP.NET web application site and you place a file named "App_Offline.htm" in the root of the site, all requests to that website will be redirect to that App_Offline.htm file. Basically, if you need to take an entire ASP.NET site offline, you can place a nice little message to the user in that file. Then, any new requests to a URL, any URL, in that website will redirect to that file allowing you to do maintenance to the site, upgrades, or whatever.

<html>
   <body>
       <p>
            This website is down for scheduled maintenance.  
            Please check back soon.
       </p>
   </body>
</html>

Example of a 'App_Offline.htm' file (note example file is <512 bytes!)

A side effect of this is that any files that are locked by the site, such as a database or other resources, are freed since the application domain has been unloaded from the server. This allows you to remove the locks from those files and replace them, without the need to do a full IISRESET, taking down other sites on the server. One thing to keep in mind with this file however, make sure you put enough content in it so it is larger than 512 bytes or IE will consider it a 404 and will display the 404 instead of the contents of your app_offline.htm file.