Remember the "good old days" when you were still using Windows XP? If so, I'm pretty sure you remember the loads of error dialogs that would pop up at a totally random time. Although these dialogs always show up at a bad time, you could do something pretty neat with them. Drag the window around and it would duplicate itself over and over!

Sadly, I haven't seen this effect alive in Windows 7, so to keep those memories alive for XP, I re-created the effect using HTML/CSS with jQuery and jQuery UI.

Simply check out the demo to see if you can remember how it would look like. Be creative and fill up the screen with some beautiful error dialogs.

  

I hope you understand that I'm pretty sarcastic; I don't like these kind of error messages that would make your PC crash. Yet, I wanted to give it a try to bring this effect to your browser. Now let's see on how you can create this fantastic effect yourself!

HTML

The HTML used is pretty basic: A simple container resembling Windows XP and a division that will be used as the error dialog. This is what I came up with.

 
<div id="windowsxp">
   <div id="errordialog" class="dialog">
      <h3>Windows XP Error Dialog</h3>
      <img src="images/error.png" alt="Error image" />
      <p>Lorem Ipsum</p>
      <p><a href="#" class="button">Get me out!</a></p>
   </div>
</div>

As you can see, nothing really special going on here. Take note about the button class and the h3 used as the header of the dialog.

CSS

Using CSS, we can style our HTML. Just like the HTML, nothing really spectecular is going on here:

 
#windowsxp { width:800px; height:640px; background-image:url("../images/background.jpg"); }
 
.dialog { width:400px; background-color:#f0ede0; position: absolute; background-image:url("../images/dialogheader.jpg"); background-repeat:repeat-x;
   border-bottom:3px ridge #0034b0; border-left:2px solid #1783f2; border-right:2px solid #1783f2; }
.dialog h3 { height:29px; font-size:16px; color:#eee; padding:5px 0 0 10px; }
.dialog img { float:left; padding:20px; }
.dialog p { padding:10px; font-size:12px; color:#000 !important; }
.button { text-decoration:none; color:#000; display:block; margin:0 auto; width:75px; height: 20px; border:1px solid black; text-align:center; }

Just take note to see the .dialog has been placed on a absolute position. We'll need to in order to place the clones on top of each other. Also note the ridge borders of the .dialog, to make it look even more like the Windows XP dialog.

On the demonstration page, a couple of CSS3 features have been added too, just to make the demo better. Now to something more interesting: The effects with jQuery!

jQuery

Great! Now that we have our backbone created using HTML and CSS, we can now create the desired effect (interaction) using jQuery. I've added comments in the source code to make some things clear.

First, we'll need some variables to store some global data. When you download this script, you can easily modify these variables to influence the outcome.

 
// Time for the interval to duplicate the dialog
var DUPLICATIONTIME = 100;
 
// Maxium count of windows before BSOD
var MAXWINDOWCOUNT = 100;

When the document is finished with loading, we can start manipulating the content.

 
$(document).ready(function()
{
   // Place the error dialog in the center of the screen
   var offset = $("#errordialog").offset();
   var xPos = offset.left;
   var yPos = offset.top;
   $("#errordialog").css({
      'top' : yPos + 200 + 'px',
      'left' : xPos + 200 + 'px'   
   });
   
   
   // Handle for the intervalID
   var intervalId;
   
   // Make the dialog draggable
   $("#errordialog").draggable({
      handle : 'h3', // Only the heading is draggable
      containment : 'parent', // Prevent the window getting dragged out the parent
      start: function(event, ui) {
         // Create an interval when the user starts dragging the window
         intervalId = setInterval("duplicateWindow()", DUPLICATIONTIME);
      },
      stop: function(event, ui) {
         // Clear the interval when the user stopped dragging
         clearInterval(intervalId)
      }
   });
});

As you can see, we're using the setInterval method to call a function called duplicateWindow. The setInterval method is executed in a loop, which means that after the given time (second input parameter), it executes the method duplicateWindow again and again until the interval is cleared. Since we don't want the script to be in an infite loop, we clear the interval as soon as the user stops dragging. Take note that dragging is part from the jQuery UI framework.

Our last step is to implement the duplicateWindow function. Let's see how this can be created:

 
var windowCount = 0;
var errorDialogZIndex = 1;
function duplicateWindow() {
   // Clone the error dialog and append it to the Windows XP screen
   var clone = $("#errordialog").clone().appendTo('#windowsxp');
   
   // Bring the dragging error dialog up front by changing the Z-index
   errorDialogZIndex++;
   $("#errordialog").css('z-index', errorDialogZIndex);
   
   // Check if the maximum window count has been reached
   windowCount++;
   if(windowCount == MAXWINDOWCOUNT) {
      $("#windowsxp")
         .empty()
         .css('background-image', 'url(images/bsod.jpg)');
   }
}

As you can see, we clone the errordialog in this function and append it directly to the Windows XP container. Once the maximum amount of windows has been reached, we'll remove all the error dialogs and throw a fancy BSOD.

And that's about it! Have fun messing around with the error dialogs - I'm sure it'll bring up some pleasant memories.

Conclusion and Download

Besides the fact this proof of concept will probably give you more hate-memories than good ones, I still think it's a pretty good example showing the power of jQuery and using setInterval.

  

What do you think? Did you learn something new today, or did I only help you remember some bad memories?

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• Experimenting with the element() CSS function
• jQuery quickie: Unlimited Scroll using the Twitter API
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• jQuery 1.3 and PHP: Book review and Giveaway

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: