Building a Better Busy Box – Ver 1.2

Building a Better Busy Box – Ver 1.2 (Processing… Please Wait)
 
Mark Wagner
Castle Rock Software, LLC

Updates

  • February 16, 2005 – Rewrite to use an IFRAME instead of a DIV tag.
  • January 7, 2005 – Fixed z-Index attribute.
  • November 13, 2004 – Original article

Summary: We often need to provide a user message informing the user that their request is “processing”.  Like the hour-glass mouse pointer lets the Windows user know the system is busy processing their last request, I have a simple, clean, and effect solution to providing this on web pages.

BusyBox Demo

Download Files

Technologies employed

  • JavaScript
  • HTML (ASP.NET)

Supported browsers 

  • Internet Explorer 6
  • Netscape Navigator 7.1, 7.2
  • Firefox 1.0
  • No other browsers have been tested

Introduction
Anyone who has used the Internet for more than a few hours has encountered times when the “Internet” is being slow.  I use the term “Internet” in jest here since it is often the term used when websites are not responding as quickly as we would like.  As most of us know, the problem is more often caused by an over-worked website, one that is unable to handle its current workload.  This article does not address any performance issues as that is a much larger topic for another time.  However, for those well designed and well cared-for websites there are very acceptable times when displaying a “processing” message to the user is very helpful and very appropriate.

I have certainly experienced times; as I am sure you have, where after clicking a submit or search button I began to wonder if the web server was going to process my request successfully.  Why shouldn’t it.  I didn’t expect it to take more than a second or two.  Performing functions like a search, report generation, or the processing of a large order, can often take more time than we would like.  These predictably slow responding places in an application are ideal candidates for user feedback in the form of a processing message.  As long as your website is not normally slow, your users will appreciate being notified of potentially long running processes.

There are a number of different approaches to accomplishing this.  One of the more common methods is to navigate to an intermediate page where an animated image and/or message are presented to the user.  The intermediate page then immediately initiates the process of navigating to the long-processing page.  This allows the intermediate “please wait” page to be displayed to the user while the long-processing target page is crunching away.  When the target page completes its long process it then begins rendering to the user’s browser, thus replacing the “please wait” message.  While this technique works well when navigating from page A to page B, it does not work well when a post-back (from page A to page A) is needed.  Additionally, having the benefits of things like ViewState become discarded.

My Approach
The approach I am about to cover functions just as well during a post-back as it does when navigating from page X to page Y.  Moreover, there is no need (or desire) to have an intermediate processing page.  If you are using a custom base page for your application; (i.e. a MasterPage), it becomes even easier to user.  I have added this to my personal CastlePage class making it very easy to use at anytime.

My approach is to pre-load my busy box message in a hidden IFRAME  tag on any page that will navigate (or post-back) to a potentially long running process. After all, my busy box message has a pretty small code footprint. The page will begin it’s unload process whenever the browser posts to a new page or performs a post-back. By placing JavaScript code in the onbeforeunload event of the body tag I can instantly reveal the busy box message to the user. Since this is part of the original page it will display immediately and remain visible until the new page completes its processing and begins to render in the user’s browser. Best of all, this works great with post-backs too.

My approach is:

  • Render the busy box message in a hidden IFRAME tag wherever we have a page that may post to a long processing page.
  • Display the busy box message before leaving this page (or posting back to the same page) by using the onbeforeunload event on the html body tag.  Note: An alternative method for browsers that do not support the onbeforeunload event is also discussed later.
  • Use JavaScript to perform a simple animation to the client.

Continuing to Learn
My first pass at this was to use an animated GIF image to fulfill my animated desires.  Putting together a quick prototype didn’t take long, but I immediately realized, remembered, discovered (pick one that best flatters me) that the .gif images stop animating once a post-back or navigation to another page is initiated.  This is consistent for all my test browsers (IE, NS, Firefox).  Although this realization didn’t bring my approach to a crashing halt, the thought of having only a static image was less than exciting.  Fortunately, I noticed that my image buttons still alternated to the hover image when I moved the mouse over them.  That’s when I realized that although GIF image may stop animating; JavaScript is still working hard – in all my test browsers.  With this said, I decided to animate the images using JavaScript.  This added a little more work, but as you will see, not much more work.

JavaScript Animation
First and foremost, I used my new copy of JavaScript – The Definitive Guide by David Flanagan as my sole JavaScript resource.  This now famous “Rhino” book continues to be well received by developers.  I have to agree as I found this book to be very well written and packed with excellent information.

An animated .GIF image is nothing more than a series of images that are displayed in rapid succession.  Since the web browsers won’t do this for me, I will do it myself using JavaScript.

My animation will require a number of images that will be displayed in rapid succession.  To allow the animated image to be developer-defined (customizable), I will need to know the number of images and the image names.  To help manage this animation and to keep it clean, the image names must have a predicable sequence number in a predictable position.  To accomplish this I have two image name requirements.

  • The names may be anything the developer wants as long as the image name prefix and suffix are consistent for every image.
  • The first image sequence number will be zero.

Here is the required image name format:

  • PrefixName + SequenceNumber + SuffixName

Here are valid image name examples:

  • BusyImage0.gif,  BusyImage1.gif,  BusyImage2.gif,  BusyImage3.gif, …, BusyImage6.gif
  • Images/BusyImage0.gif,  Images/BusyImage1.gif,  Images/BusyImage2.gif
  • Animate0Image.gif,  Animate1Image.gif,  Animate2Image.gif, …, Animate8Image.gif

The three image name properties used to define the images are ImageNamePrefix, ImageNameSuffix, and ImageCount; each of which are described below.

Before I dive into the details of my JavaScript, I thought it would be helpful to provide a quick overview of what my JavaScript BusyBox object interface will look like.  Here is a quick summary of the interface.

Constructor

BusyBox(id, varName, imageCount, imageNamePrefix, imageNameSuffix, imageDelay, width, height, url)

The parameters provided in this constructor are described in the properties section.

Properties

id

  • Defines the id of the IFrame tag to use with this instance of the BusyBox object.

VarName

  • This string value defines the name of the JavaScript variable containing the instance of this BusyBox object on the client’s machine.  This is needed so that we can use the setTimeout() statement, discussed later.

ImageCount

  • This integer value defines the number of images to use in the animation.

ImageNamePrefix

  • This string value defines the name prefix of the images that are used in the animation.
  • Example: “myBusyBoxImage_” or “images/myBusyBoxImage_”.

ImageNameSuffix

  • This string value defines the extension of the images that are used in the animation.
  • Example: “.gif” or “.jpg” or “_ani.gif”.

ImageDelay

  • This integer value defines the length of time in milliseconds to display each image.

Width

  • This defines the width (in pixels) of the busy box IFRAME tag.
  • Netscape and Firefix require this value to be defined.  For Internet Explorer users, the width is automatically calculated using the BusyBoxDiv tag attributes.

Height

  • This defines the height (in pixels) of the busy box IFRAME tag.
  • Netscape and Firefix require this value to be defined.  For Internet Explorer users, the width is automatically calculated using the BusyBoxDiv tag attributes.

BusyBoxUrl

  • Optional
  • Defines the url to the page containing the custom busy box layout.
  • If this value is omitted or null during the instantiation call, the internally defined layout is used.  The RenderContent() method is used to render the internal default layout.

Images

  • This array contains a reference to every image in the animation.  This property is populated during the constructor via the CacheImages() method.
  • This property should be treated as read-only.

CurrentImageIndex

  • This value is automatically calculated and incremented during the animation process.
  • This value should be treated as read-only.

Enabled

  • Get or set this Boolean value to enable or disable (a false value) the BusyBox using JavaScript.
  • This allows client-side JavaScript to conditionally enable or disable the BusyBox, should that become necessary.  A false value will prevent the busy box from being displayed when the Show method is called.
  • The default value is true.

IsAnimating

  • Returns a boolean value representing the state of the animation.
  • This should be treated as read-only.

IsVisible

  • Returns a boolean value representing the visibility state for the busy box.
  • This should be treated as read-only.

Methods

Show()

  • Displays the busy box by changing its visibility from hidden to visible.
  • Centers the busy box over the current window scroll position.
  • The BusyBox message will be displayed only if the Enabled property is true.  If the Enabled property is false, this Show method will do nothing.

Hide()

  • Hides the busy box by changing its visibility to hidden.
  • Provides a method to hide the BusyBox using JavaScript should it be necessary.  This may be called anytime using client-side JavaScript.
  • Note: This was fixed from the previous version.

Animate()

  • Performs the animation process.
  • This method should be treated as private.  There is no need to call this method directly.  The StartAnimate method should be called to start the animation process.

StartAnimation()

  • Starts the animation process.
  • Provides a method to start the animation process using JavaScript should it be necessary.  This may be called anytime using client-side JavaScript.

StopAnimate()

  • Stops the animation process.
  • Provides a method to stop the animation using JavaScript should it be necessary.  This may be called anytime using client-side JavaScript.

CacheImages()

  • Pre-loads the images from the server to improve the animation performance.  There is no need to directly call this method since it is called by the constructor.
  • This should be treated as private.  There should be no need to call this method.

GetIFrameDocument()

  • Returns a reference to the document object in the IFrame using the appropriate method depending on the browser version.
  • This should be treated as private.  There should be no need to call this method.

LoadUrl()

  • Changing the src attribute for an IFrame tag causes each new page to be added to the browsers history object. This causes undesired results for the user when they click the back button. Instead, we can use the document.location.replace() method to correctly load our busy box page into our IFrame.
  • Arguments: url – url to the busy box page. BusyBox.prototype.LoadUrl = function(url)
  • This should be treated as private.  There should be no need to call this method.

RenderContent()

  • This method is used when the default busy box layout is used; not a custom layout. This method is called when the url argument for the constructor is null.
  • This should be treated as private.  There should be no need to call this method.

Resize()

  • Resizes the busy box IFrame by setting its width and height attributes to the size of its contents for Internet Explorer browers.  For Netscape and Firefox, the width and height defined in the constructor are used to resize the IFrame.
  • This should be treated as private.  There should be no need to call this method.
  • Help: If anyone knows how to reliably determine ths size of the contents for Netscape and Firefox, please let me know.  Thanks.

Center()

  • Centers the busy box IFrame on the page regardless of the browsers scroll position. This ensures the busy box is presented to the user in a visible location in the window.
  • This should be treated as private.  There should be no need to call this method.

JavaScript Code

The JavaScript needed to perform the animation is pretty simple. The JavaScript found in the BusyBox.js file is static and used as is by placing a reference to it via the standard script tag. There is only one line of custom JavaScript code needed for any page, and that is to create an instance of the BusyBox object. Here is a sample of that code where I have chosen to use the variable name of “busyBox”.

var busyBox = new BusyBox(“BusyBoxIFrame”, “busyBox”, 4, “images/gears_ani_”, “.gif”, 125, 147, 206)

You will find the above line of code shown again in the HTML code below. I will not cover each line of JavaScript code; however, there are a couple key items worth pointing out. The first is the BusyBox constructor. The constructor executes the CacheImages method so that all the images used in the animation will be “pre-loaded” and ready for immediate use. The process used to cache the images simply forces the browser to retrieve the images during the initial page load. The images are not actually stored in the Images array. Additionally, the Images array provides an easy reference to each image used in the animation.

The Animate method sets the current image to display and then calls the JavaScript function setTimeout(). The set setTimeout() function executes the next statement in x number of milliseconds. As you can see, setTimeout() continues to call itself to display the next sequential image until the page is unloaded or until the animation is stopped using the StopAnimate() method. This is 100% of the animation process. Again, pretty simple (and straight out of the Rhino book).

The Show method has only a few small tasks, which are 1) to determine the size of the developer-defined busy box (for IE browsers).  2) Position the busy box in the center of the users browser regardless of the scroll position.  3) To begin the animation process.

The following code can be found in the CastleBusyBox.js file.  Note: The actual CastleBusyBox.js file contains a brief summary of comments for each method, and has a few more helper methods.

1function BusyBox(id, varName, imageCount, imageNamePrefix, imageNameSuffix, imageDelay, width, height, url) 2{
3   // Initialize object
4   this.id = id; 5   this.ImageCount = imageCount; 6   this.CurrentImageIndex = 0; 7   this.ImageWidth = 0; 8   this.ImageHeight = 0; 9   this.ImageNamePrefix = imageNamePrefix; 10   this.ImageNameSuffix = imageNameSuffix; 11   this.ImageDelay = imageDelay; 12   this.DivID = "BusyBoxDiv";
13   this.ImgID = "BusyBoxImg";
14   this.Enabled = true;
15   this.Width = width;
16   this.Height = height;
17
18   // Retain the name of the instantiated object variable so that we can animate 
19   // using the setTimeout statement
20   this.VarName = varName; 21
22   // Allows us to stop the animation with clearTimeout(), should we ever want to
23   this.timeout_id = null;
24
25   // Cache (pre-load) images
26   this.CacheImages(); 27
28   // Url to the page containing the busy box.
29   this.BusyBoxUrl = url; 30
31   // Get reference to the IFrame object
32   this.IFrame = document.getElementById(this.id);
33
34   // Hide the busy box
35   this.Hide();
36
37   if( this.BusyBoxUrl ) 38      // Load the busy box contents using a custom layout page.
39      this.LoadUrl(this.BusyBoxUrl); 40   else
41      // Load the busy box contents using the internally defined layout.
42      this.RenderContent(); 43
44   // If this browser does not support IFRAME tags then disable this control. The
45   // next version will implement the use of a DIV instead of the IFRAME tag; 
46   // even though there are a couple minor issues with using DIV tags.
47   if( !frames[this.id] )
48      this.Enabled = false;
49}
50
51BusyBox.prototype.GetIFrameDocument = function() 52{
53  var doc; 54
55   if( this.IFrame.contentDocument ) 56      // For NS6
57  doc = this.IFrame.contentDocument;
58   else if( this.IFrame.contentWindow )
59      // For IE5.5 and IE6
60      doc = this.IFrame.contentWindow.document;
61   else if( this.IFrame.document )
62      // For IE5
63      doc = this.IFrame.document;
64   else
65// TODO: Confirm this should be the default
66      doc = this.IFrame.document;
67
68   return doc;
69}
70
71BusyBox.prototype.LoadUrl = function(url) 72{
73   // Get a reference to the document object in the IFrame
74  var IFrameDoc = this.GetIFrameDocument(); 75
76   // Load the url using the replace method. This will prevent the browsers 
77   // history object from being updated with the new busybox url; thus allowing 
78   // the back button to function as desired for the user.
79  IFrameDoc.location.replace(url); 80}
81
82BusyBox.prototype.RenderContent = function()
83{
84   // Get the IFrame document object
85   var doc = this.GetIFrameDocument();
86
87   var wh = "width:" + this.Width + "; height:" + this.Height;
88   var style = " style='BORDER: navy 3px solid; POSITION: absolute; " + wh + "'";
89
90   doc.open();
91   doc.writeln("0px; Background-Color: white" _mce_style="margin: 0px; background-color: white;">");
92   doc.writeln("   <div id='" + this.DivID + "' align=center " + style + ">");
93   doc.writeln(" <img id='" + this.ImgID + "' src=''>");
94   doc.writeln("      <br><h3>Processing</h3>");
95   doc.writeln("   </div>");
96   doc.writeln("</body>");
97   doc.close();
98}
99
100BusyBox.prototype.Resize = function()
101{
102   // Resize the busy box IFrame.
103   if( BusyBox.IsBrowserIE() )
104   {
105      // Set the width by looking at its contents
106      var div = frames[this.id].document.getElementById(this.DivID); 107      this.IFrame.style.width = div.offsetWidth;
108      this.IFrame.style.height = div.offsetHeight;
109   }
110   else
111   {
112      // Set the width to the value specified.
113      this.IFrame.style.width = this.Width;
114      this.IFrame.style.height = this.Height;
115   }
116}
117
118BusyBox.prototype.Center = function()
119{
120   if( !this.IFrame )
121      return;
122
123   // Center the BusyBox in the window regardless of the scroll positions
124  var objLeft = (document.body.clientWidth - this.IFrame.offsetWidth) / 2;
125  var objTop = (document.body.clientHeight - this.IFrame.offsetHeight) / 2;
126  objLeft = objLeft + document.body.scrollLeft; 127  objTop = objTop + document.body.scrollTop; 128
129   // Position object
130   this.IFrame.style.position = "absolute";
131   this.IFrame.style.top = objTop;
132   this.IFrame.style.left = objLeft;
133}
134
135BusyBox.prototype.CacheImages = function()
136{
137   // Instantiate the array to store the image references
138   this.Images = new Array(this.ImageCount); 139
140   // Load all the images to cache into the aniframes array
141   for(var i = 0; i < this.ImageCount; i++) 142   {
143      this.Images[i] = new Image();
144      this.Images[i].src = this.ImageNamePrefix + i + this.ImageNameSuffix; 145   }
146}
147
148BusyBox.prototype.IsAnimating = function() 149{
150   if( this.timeout_id == null)
151      return false;
152   else
153      return true;
154}
155
156BusyBox.prototype.IsVisible = function() 157{
158  var ifrm = document.getElementById(this.id);
159
160   if( ifrm.style.visibility == "visible" && ifrm.style.width > 0 )
161      return true;
162   else
163      return false;
164}
165
166BusyBox.prototype.Animate = function()
167{
168   // Assign the current image sequence to display
169   if( frames[this.id] )
170      // browser supports frames
171      frames[this.id].document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src; 172   else
173      // browser does not support frames
174      document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src; 175
176   // Auto re-center and re-size the busy box.  This will force the busy box to 
177   // always appear in the center of the window even if the user scrolls.
178   this.Resize();
179   this.Center();
180
181   // Increment the current image index
182   this.CurrentImageIndex = (this.CurrentImageIndex + 1)%this.ImageCount; 183
184   // Display the next image in (imageDelay value) milliseconds (i.e. 125)
185   this.timeout_id = setTimeout(this.VarName + ".Animate();", this.ImageDelay); 186}
187
188BusyBox.prototype.StartAnimate = function() 189{
190   if( this.IsAnimating() ) 191      return;
192
193   this.Animate();
194}
195
196BusyBox.prototype.StopAnimate = function() 197{
198  clearTimeout(this.timeout_id);
199   this.timeout_id = null;
200}
201
202BusyBox.prototype.Hide = function()
203{
204   this.StopAnimate();
205
206   // Hide the busy box.
207   this.IFrame.style.visibility = "hidden";
208   this.IFrame.style.width = 0;
209   this.IFrame.style.height = 0;
210}
211
212BusyBox.prototype.Show = function()
213{
214   if( !this.Enabled )
215      return;
216
217   if( this.IsAnimating() || this.IsVisible() )
218      return;
219
220   this.Resize();
221   this.Center();
222
223   // Set the busy box to be visible and make sure it is on top of all other controls. 
224   this.IFrame.style.visibility = "visible";
225   this.IFrame.style.zIndex = "999999";
226
227   // Start the animation
228   this.StartAnimate();
229
 

The .ASPX (HTML) Code

The required code in the .aspx or html page is quite small and consists of four pieces of code.

The first html piece is the onbeforeunload event on the body tag.  This event is fired just before a page is unloaded.  This includes post-back and hyperlinks to other pages.  In the onbeforeunload event we place the JavaScript to display the Busy Box to the user prior to any action that results in leaving this page or reloading it.

Discuss how to use a SPAN tag around buttons or links instead of the onbeforeunload event of the body tag.

The second html piece is simply the reference to the JavaScript class defining the BusyBox class, which is used to display and animate the busy box.

The third html piece instantiates my BusyBox object and assigns it to my working variable named busyBox.  My sample uses four images and each image is displayed for 125 milliseconds with a width of 147 and height of 206.

Example:

var busyBox = new BusyBox(“BusyBoxIFrame”, “busyBox”, 4, “images/gears_ani_”, “.gif”, 125, 147, 206)

The fourth html piece is my Busy Box iframe tag.  The iframe is used to contain the BusyBox layout.  The BusyBox layout is nothing more than a div tag containing an img tag.  The size, color, and content of this busy box are completely up to you.  This allows you to create a busy box that is as generic or personalized as your site needs.  There are two important components in a busy box, the  div tag and the embedded img tag.  These two tags must contain the same id’s defined in the BusyBox JavaScript object properties DivID and ImgID.  The default values for these two properties are “BusyBoxDiv” for DivID, and “BusyBoxImg” for the ImgID property.  Assigning your html  div and img tags with these id values is the easiest.  However, you may assign any id you wish; however, you will need to assign your custom values to the busybox.DivID and busybox.ImgID properties immediately after the instantiation of your busybox JavaScript object.

Sample .ASPX (HTML)

<body onbeforeunload="busyBox.Show();">
   <script language="javascript" type="text/javascript" src="CastleBusyBox.js"></script>       <form>
         <P>    [Your Page Specific Content Here]    <iframe id="BusyBox1" name="BusyBox1" frameBorder="0" scrolling="no"ondrop="return false;"></iframe></P>
         <P>
	<INPUT id="Submit1" type="submit" value="Submit" name="Submit1"></P>
      <script language="javascript" type="text/javascript">          // Instantiate BusyBox object          var busyBox =    new BusyBox("BusyBox1", "busyBox", 4, "images/gears_ani_", ".gif", 125, 147, 207);       </script>
   </form>
</body>
 

Alternatives to Using the OnBeforeUnload Event

The onbeforeunload is supported by Internet Explorer 6, Netscape 7.2 (not 7.1), and Firefox 1.0.  The onbeforeunload event may not be the best solution for your particular needs.  Another solution is to place the busybox.Show() method in the onclick event of the html elements (button, link etc.) that need to cause the busy box to appear.  If the particular html tag does not have an onclick event, you can wrap your control in a span tag and use the onclick event of the span tag.  I use this all the time.

Example:

<span onclick="busyBox.Show();">
	<a href="anypage.htm">Any Page</a>
</span>

This allows you to specifically control which buttons and/or links cause the busy box to appear.

Another issue surfaced by users of the pervious version was the busy box appearing and remaining on the screen when a popup window was launched.  This assumes your are using the onbeforeunload event, and you want to prevent the busy box from appearing.  You can prevent this from happening by placing a “return false;” after the popup statement in your javascript event code.

Example:

<A onclick="window.open('anypage.htm'); return false;" href="#"> Open window</A>

Creating a BusyBox Web Control

I have created an ASP.NET web control to allow for easy use in ASP.NET pages.  You can find the control in my BusyBox Web Control article – to be posted shortly with a link insterted here.

Advertisements

One thought on “Building a Better Busy Box – Ver 1.2

  1. (Migrated Comments from my old blog) Feedback (Migrated) Feedback # re: Building a Better Busy Box (Processing… Please Wait) 12/14/2004 5:28 PM Justin i think you got that little wheel thingy from the microsoft sharepoint loading page, pretty nice i’ll use it # re: Building a Better Busy Box (Processing… Please Wait) 12/14/2004 9:11 PM Michael Pak Great Article!!! One of the best I have read # re: Building a Better Busy Box (Processing… Please Wait) 12/15/2004 4:12 PM Adam Webber Agreed, excellent article – the layout, flow and content is very professional, it should form the basis of an article – “How to write tutorials/examples the professional way” # re: Building a Better Busy Box (Processing… Please Wait) 12/15/2004 8:29 PM Mark Wagner Thanks everyone for your positive comments! # re: Building a Better Busy Box (Processing… Please Wait) 12/20/2004 1:02 AM T. Odeny Perfect: Just what I was looking for. Well-written article, logical code. Just perfect # re: Building a Better Busy Box (Processing… Please Wait) 12/20/2004 9:33 AM J. Bostic Absolutely awesome. This is exactly what I needed. Very well written and put together. You the Man! Thanks so much. # re: Building a Better Busy Box (Processing… Please Wait) 12/20/2004 8:37 PM Mark Wagner Yes, I did get the animated gif from SharePoint; however, I did have to split the animated gif into four single gif still images. # re: Building a Better Busy Box (Processing… Please Wait) 12/20/2004 8:39 PM Mark Wagner Also, I used the gif image from SharePoint purely due to ease of access. I had hoped to get another image later. If anyone has any good samples, please share :). Thanks. # re: Building a Better Busy Box (Processing… Please Wait) 12/22/2004 10:06 AM PC User, Mac Lover The “onBeforeUnload” event is a Microsoft-specific addition, and therefore won’t always work. It does not work with the Safari Web browser, which is the standard browser for Mac OS X users. With Safari, Microsoft’s onBeforeUnload event is ignored, so at least there’s no damage. Hope this helps. Thanks for the good article and the clear write-up. # re: Building a Better Busy Box (Processing… Please Wait) 12/22/2004 10:42 AM Mark Wagner Sorry to hear that Safari does not support this. I tried to download Safari, but it is apparently only available for the Mac OS. I’m not sure how I will ever be able to test the Mac browser. I certainly wont be buying a Mac just to test it, yet I wouldn’t mind using it as one of my test browsers. # re: Building a Better Busy Box (Processing… Please Wait) 12/24/2004 10:32 PM Michael I have used nothing but VB all my life and know nothing of C# – Is it possible to provide an example in VB? # re: Building a Better Busy Box (Processing… Please Wait) 12/25/2004 8:56 AM Mark Wagner Hi Michael, This sample is 100% JavaScript and HTML. There is no server-side processing; therefore, there is no C# (or VB) used or needed. On a side note, I was a heavy VB user prior to C# and .NET. I would suggest learning the basics of C# – at a minimum. I know you will find the learning curve quite small, especially since you are a VB.NET developer. # re: Building a Better Busy Box (Processing… Please Wait) 1/3/2005 10:48 AM Bruce This is really great…works as advertised. My problem is that I have a page with more than one button, but I only need the BusyBox to show for one of them. Can I fire this off from one button click, rather than onbeforeunload, and how? Thanks # re: Building a Better Busy Box (Processing… Please Wait) 1/3/2005 11:53 AM Mark Wagner Hi Bruce, Yes you can have only one (or two, or three) buttons (or links) show the busy box while all other buttons and links do not activate the busy box. Simply remove the onbeforeunload=”busyBox.Show();” in the body tag and add a SPAN tag with the onclick=”busyBox.Show();”. You can use other tags, but I like to use a SPAN tag since it works well “in-line” and will cascade a user’s click inward to all controls/tags within the SPAN. And, it works with IE, Netscape, and Firefox. Sample Code: # re: Building a Better Busy Box (Processing… Please Wait) 1/4/2005 5:00 AM Bart Coelus We’ve implemented the BusyBox in our intranet healthcare solution. Our learnings: 1./ In your code, don’t use this outdated javascript tag, it couses problems and is outdated: Better use: To make sure busybox is not shown on pop-ups (stays visible after close) 2./ We added the possibility to set the busybox centered or not function BusyBox(instanceVarName, imageCount, imagePrefix, imageSuffix, imageDelay, centered) 3./ Set the z-index to 999 to make sure the box always comes in front of the other controls # re: Building a Better Busy Box (Processing… Please Wait) 1/4/2005 8:37 AM Mark Wagner Good feedback Bart. Thanks! # re: Building a Better Busy Box (Processing… Please Wait) 1/5/2005 8:58 PM Rahul Borade Hi, Please allow me to introduce myself. I am Rahul Borade, working in Maximize Technologies on ASP .NET. I have seen your progressing bar from below link___ http://blogs.crsw.com/mark/samples/BusyBoxSample/Page1.aspx I really like the progressbar which you made here. I was looking for such a bar from many days. Can you please tell me something about this code or if possible can you send me the codefor this progressbar. If possible please send me the details aboput this on my below e-mail adress __ Rahul.Borade@maximizetechnologies.com Best Regards,_________________________________ Rahul N. Borade. Maximize Technologies, Pune, India Behind hotel Woodland, Cell – 9890473700 Rahul.Borade@maximizetechnologies.com # re: Building a Better Busy Box (Processing… Please Wait) 1/6/2005 3:06 PM David Every Hi Michael, this looks really good. Thanks for making this available, it will solve a few problems for me. One question: I have a large text box right in the middle of my screen. The animation is appearing “behind” the textbox. How do I make sure that the animation is always on top ? Regards David E # re: Building a Better Busy Box (Processing… Please Wait) 1/6/2005 3:33 PM Mark Wagner David, Set the z-index to 999 to make sure the box always comes in front of the other controls. I hope to add this to the javascript to automatically handle this, but this will fix it to. Thanks, Mark – not Michael ;) # re: Building a Better Busy Box (Processing… Please Wait) 1/6/2005 3:39 PM David Every whoops sorry Mark, I had been reading another reply from a guy called Michael and inadvertently typed his name instead of yours. I’ll try the z-order and hopefully that will solve it… Regards David E # re: Building a Better Busy Box (Processing… Please Wait) 1/6/2005 4:51 PM David Every Mark , I am using IE 6 I have a simple VS.NET C# demo project which shows the problem, can I send it to you ? Regards David # Busy Box – 1/6/2005 8:00 PM David Every’s Automation Blog # re: Building a Better Busy Box (Processing… Please Wait) 1/6/2005 8:17 PM Mark Wagner Thanks for the code David. I was able to reproduce it with your code. The problem had to do with using a grid-layout page vs. as flow-layout page. I have attached a new BusyBox.js javascript file that should correct the problem simply by using this newer file. Or, you can correct the problem by setting the Z-INDEX: 9999 in the style attribute of the tag and remove it from the textbox control. I was able to get it to appear correctly after doing this also. The new javascript file I included in this email sets the z-index attribute automatically to a value of “999999”. That should be large enough. :) My email keeps getting rejected by, I believe my email server, when I try to send it to your email address. To get around this temporarily I will post the contents of the new BusyBox.js file in another feeback post for this article. # re: Building a Better Busy Box (Processing… Please Wait) 1/7/2005 8:52 AM Nick Excelent article Mark! One thing I noticed. If the BusyBox is displayed over a SELECT control in I.E. the BusyBox appears behind the SELECT control. I got around it by placing an IFRAME behind the BusyBox and that seemed to do the trick. # re: Building a Better Busy Box (Processing… Please Wait) 1/7/2005 9:13 AM Mark Wagner Thanks for the feedback Nick. I will look into that to see if the javascript can account for that. Thanks! # re: Building a Better Busy Box (Processing… Please Wait) 1/17/2005 5:25 AM Nick Hey Mark, Any luck coming up with something? # re: Building a Better Busy Box (Processing… Please Wait) 1/17/2005 10:31 AM Mark Wagner Hi Nick, I updated the article with pointing the SELECT problem you mentioned. I have not made the changes I intend to, but here is what I plan to do. http://blogs.crsw.com/mark/articles/642.aspx#LastUpdated Use an IFRAME instead of a DIV tag and reference a seperate common .html or .aspx page containing the busy box code. This will also improve the implementation time and effort anywhere the busy box is needed. I have been busy on another project, but I can probably get this completed sometime this week. # re: Building a Better Busy Box (Processing… Please Wait) 1/18/2005 11:18 AM Nick Sorry Mark … Should have looked a bit closer. Can’t wait for the new version! # re: Building a Better Busy Box (Processing… Please Wait) 1/21/2005 11:54 AM Mark M Hi, thanks for the great solution. Had a lot of trouble getting it to work, only to eventually find out that it doesn’t work with Smart Navigation. So if anybody is having mysterions problems, that may help # re: Building a Better Busy Box (Processing… Please Wait) 1/21/2005 4:04 PM Mark Wagner Mark M. – Thanks for the feedback. I did not try to test with Smart Navigation so this is a good item to point out. I will have to include that in my next test. Thanks again. # re: Building a Better Busy Box (Processing… Please Wait) 1/26/2005 12:40 PM Henrik When I run the test page, the pics don’t show. All I see is the frame and please wait text. It did work the first time I tested the page… but not anymore :/ whats wrong? /henrik # re: Building a Better Busy Box (Processing… Please Wait) 1/27/2005 7:23 AM Mark Wagner Henrik, What browser and version are you using? Also, if your sample code is short, post it in a reply and I will have a look at it. If not, send me your email using my blog Contact link and I will send you my email address so that I can have a look are your code. Mark # re: Building a Better Busy Box (Processing… Please Wait) 1/30/2005 2:40 PM Steve I love your control, thank you for putting it together and sharing it with us. I am having a problem when I click on a hyperlink that opens a popup page — the animations remains visible in the calling window. I tried to add an onclick=”busyBox.Hide();” in my hyperlink but it seems to have no affect. I noticed the onbeforeunload is fired when Hyperlinks are clicked, since I am opening a popup via a hyperlink on my page I want to be ablet o turn off the animation when it’s displayed. Any suggestions? # Wait please 1/31/2005 5:31 AM Martin Chundela Ka # re: Building a Better Busy Box (Processing… Please Wait) 2/9/2005 9:08 AM Ron I am having the same problem. Control stays visible when a hyperlink opens a new window. Also, is there a way to turn on the box when page starts to load and then hide it @ onload so that pages that take a long time to load have the control visible? # re: Building a Better Busy Box (Processing… Please Wait) 2/15/2005 2:48 PM Ben Newcomb I had the link problem as well. Instead of using the onbeforeunload event, I directly called busybox.Show(); by adding the “onclick” attribute to the button I wanted to load the busybox. i.e. Button.Attributes.Add(“onclick”,”busybox.Show();”) Then, when the button, link, is clicked, loads busy box, when other links are clicked, it is not. # re: Building a Better Busy Box (Processing… Please Wait) 2/16/2005 8:59 AM Mark Wagner Ben, you are correct. I have a new version of the BusyBox that I hope to post today. In addition to the new version, I cover exactly what you have noted here. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/16/2005 1:17 PM Mark Wagner New version 1.2 has been posted. Thanks for your patience. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/17/2005 8:22 AM Ram Krishnamurthy Excellent piece of work, very nice and deceptively simple. Has anyone tried to work with this with smartnavigation set to ‘true’ ? The images seem to swap at twice the rate as the previous postback when you click on the button multiple times on a postback. Any idea how to avoid that? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/17/2005 9:14 AM Mark Wagner Thanks Ram, I have been unable to speed up the image animation by clicking the postback button more than once. Even if the postback button is clicked more than once, the animation should (by design) not start the animation if the animiation is currently active. This appears to be working correctly for me when I test it. If you have any more information on how to reporduce your experience, please let me know. Thanks again. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/17/2005 10:59 AM Ram Krishnamurthy Sorry, I didn’t explain that properly. In the previous version of the BusyBox, if you to page1.aspx and include smartnavigation=true on the top of the page, Then load the page and CLICK on the Load Processing post-back button. You will see the animation working well. Now once the postback is complete, and once you are back to page1, Click on the Load Processing post-back button again. Now you will see the animation refresh images at twice the previous rate. Continue this and you will see the behaviour reset after a while and then continue doing the same thing. I know that smartnavigation can mess up our javascript and iam trying to get a handle on what might fix this. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/17/2005 11:08 AM Mark Wagner Thanks for the update Ram. The previous version did not check of the busy box was already animating, and would therefore duplicate the animation calls causing the animated image to speed up. If you need to use the older version, you should be able to add the following line of code to the beginning of the Show() method. if( this.IsAnimating() ) return; You will also have to create an IsAnimating() method to correctly return the state of the animation. The code from the new version would be good to look at since it handles this correctly. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/17/2005 11:54 AM Ram Krishnamurthy I was trying out the same thing when i saw your mail, It took me a while to figure out what will exactly tell me if an animation is kicked off since i don’t call the stopanimate method in my code. It works like charm now. Thanks. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/21/2005 6:11 PM Scott Elkin Here is a bug I didn’t expect: When I implemented your BusyBox solution in my base page, I noticed that while the image was running in my page, I could no longer mouse-over my variables in Visual Studio. I checked other projects, and they didn’t have a problem. So then I wrapped your IFrame with a panel, and set it to invisible while in debug mode. This fixed it. It’s a hack since I don’t know the *real* reason this is happening. I can assume it has something to do w/ the javascript loop. Anyone else seen this behavior? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/21/2005 10:25 PM Nandu Hi Mark, The “onbeforeunload” event doesn’t seem to fire while i try to navigate under your demo pages using “Back” or “Refresh”. Is this some sort of BUG? Thanks, Nandu # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/22/2005 9:41 AM Mark Wagner Nandu, Using the Back or Refresh buttons will fire (for browsers that support the onbeforeunload event); however, if the new page is immediately ready by the server and sent immediatly to the clients browser, the busy box may not appear. There is no need to show the busy box if the server can immediatly serve the requsted page (either by Back or Refresh button) to the client’s browser. This is why I have one or more “Long processing” buttons and links that either postback or navigate to a page that performs a process that is not immediately ready to send the requested page to the client. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/22/2005 9:53 AM Mark Wagner Scott Elkin, That sounds like an odd behavior to me as well. Sounds like the javascript is causing a problem – which I thought was ignored by VS in design mode – I thought. The ASP.NET control I have does not render any javascript while in design mode. Make sure you are doing this. I hope to make my control available soon. You can look at that source code to compare our soulution techniques. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/22/2005 5:23 PM Simon Mark, Firstly, what an excellent article. Hats off to ya. Very concise, very informative and very thought provoking. I have not started to play yet, but I am in a dilema. I have had a “Please Wait” type display on my sites for a few years now and I use a simple hidden that I display based on an event occuring on the page. I spent ages getting it just the way I wanted, which was simple……. “Display in a position as you leave the page and in the same position as you re-enter the page. Then re-hide!” The primary necessity for this is when I have a prolonged server activity I want to get some confirmation back to the user – that I have reached the processing page and something is happening. For example if I have a menu page which provides selection on data and press the “search”, the list page is then called. As I am leaving the menu page I display the “Please Wait”. As I am entering the list page I display the “Please Wait” again because I have multiple Response.Write’s with Response.Flush’s which complete the list of data in stages (otherwise the users get really bored). Is this a form of interface you have seen before or am I being a bit strange in my requirements? I am hoping that through a combination of .Show()’s and .Hide()’s in the right place, I will be able to achieve the desired interface using your most excellent component. Do you think it’s possible? btw: Where do I send the cheque? Kind Regards ………. Simon. PS: I cant see the cogs in your demo’s – any idea why? PPS: What would be really neat is a flash movie of a large egg-timer that sits in the middle of the screen, funnelling sand through the neck and flipping over when it gets to the end of a sand cycle. I’m sure there must be one out there already. Hedger! If you see this, then there’s a challenge! (See Hedger in action at http://www.siteexperts.com – He’s a JavaScript/css/HTML Wiz!) # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/22/2005 5:38 PM Mark Wagner Simon, thanks for the feedback! You should be able to Show() and Hide() anytime you like. You should be able to even Show() during a page load – as long as the busy box and javascript are rendered to the browser first. If I understand your intended use – I think it will work. A flash movie could be use also! I hadn’t thought of that, but you could use flash, movies, or any other browser friendly media. Good point. I’m curious about you not seeing any cogs – the gif images. I may need to double check the image caching to make sure this is working correctly in the new version. Thanks again for the feedback. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/24/2005 8:58 AM Ben Scheirman I like it! One of the issues I ran across was that we have a few Long loading pages and I don’t want to put it in the onbeforeunload because I need it to load each time the page is loaded (it takes a good 20 seconds for the report to compile and display) If I do it in the body onload it displays after the page is already rendered, and never stops…. My first thought was to render the iframe and create the busybox object in the Page_Init, then call the Show() immediately… then at the end of the page load, call Hide(). This didn’t work, however, and the iframe pushed my page down about 4 inches with whitespace. Am I attacking this the wrong way? I’d like to use this method (on every page load, before any real content is on the browser) on many pages, and want to encapsulate this into a control. Keep up the good work! # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/24/2005 9:14 AM Simon Mark, I have added your “Most Excellent” BusyBox control to a web application that I have developed to try it out. It was working great! I was able to extend BusyBox to encorporate a parameterised HTML string which gets displayed in the Render function and I was over the moon. I have List screens that have sortable columns, selections controls (Search facilities) etc…. and it all works when these controls are accessed and the page is refreshed. However, I have encountered a real bugger of an issue. Within the List of data I have hyperlinks which call a Javascript function to launch other windows, passing the name of the URL to load + lots of QueryString parameters. The other window launches and all the data gets displayed as I would expect. The BusyBox even appears in the child window – Just as I would expect! Unfortunately, the BusyBox then appears in the original page from which the window was launched. And, since there are no “close” features it just stays there in the middle of the screen. The JavaScript to launch the window is simply something like :- var obj_Window = window.open(s_URL, s_Win_Name , s_Open_Parameters); Where :- s_URL is the URL to launch + QueryStrings s_Win_Name is the name I want for the window being launched s_Open_Parameters are just the standard bunch of open parameters :- toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=1,height=” + lk_Default_Height + “,width=” + lk_Default_Width; Have you ever seen this behaviour? I even tried calling busyBox.Hide() immediately after the window.open but to no avail. I can’t see any other point at which the control will display itself – other than in the window.onbeforeunload. My assumption is the window.onbeforeunload is somehow being fired when I envoke window.open. But I code the busyBox.Hide() immediately after and it does not hide the box. Please tell me I’m not going mad! Any pointers would be much appreciated. Kind Regards ……….. Simon # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 2/24/2005 9:55 AM Mark Wagner Hi Simon, I’m happy to hear you are having success with the busy box – for the most part. A couple suggestions you should try are to 1) place a (return false;) after the window.open statement – or the function it is in. 2) Try to disable (busyBox.Enabled = false;) the busy box before you call the window.open. The only potention problem with this that you will need to re-enable it. You may be able to “hack” the onbeforeunload to have a conditional statement that only re-enables the busy box if it is disabled, and executes the Show() if it is already enabled. Something like this: if(busyBox.Enabled == false) busyBox.Enabled == true; else busyBox.Show(); You may want to place this in a function and call the functon in the onbeforeunload. # IFrame & Https 3/3/2005 6:16 AM Jochen Jonckheere Hi Mark, When I was using the BusyBox on a secure https connection and it was causing an annoying warning. After some googeling I found the solution: http://gemal.dk/blog/2005/01/27/iframe_without_src_attribute_on_https_in_internet_explorer/ The IFrame always needs a scr attribute to work correctly. It seemed intresting to notify you about the small bug. Kind regards, Jochen # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/3/2005 7:32 AM Mark Wagner Jochen, Thanks for the great feedback. I will have to make the change you have noted. Thanks again. Mark # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/3/2005 1:39 PM Sean Giesen To follow suit, this is a great bit of code, and will provide many great uses. I just have one question. I have many fields that have Required Field Validators and Regular Expression Validators on them. When I click on my load button if a field is not filled in I get my message telling me to fill it in, but then the Processing Image pops up and stays on the screen. Any idea how to only fire the processing script if the page is valid and ready to be sent to the sever?? Thanks for any insight you might have. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/6/2005 10:52 PM Michael Robinson Hi, Thanks for your busybox. I’ve implemented it but have a problem. When I press the browsers stop button the busybox remains with the animation running even though underneath the page has stopped loading. Thanks in advance. Regards, Michael R. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/7/2005 9:16 AM Adrian Ramsey This is absolute brilliance. I love this thing. Works perfectly. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/11/2005 4:47 AM Dan Mark — Good stuff. I’ve been reading the feedback since you posted the original; very impressive. A small comment/addition: To eliminate the need to add the onbeforeunload attribute/event to your body tag, try adding the following to your busybox.js file: // add after ‘BusyBox.prototype.Show = function()’ // and before ‘busyBox = new BusyBox(…’ function show() { busyBox.Show(); } // add after ‘busyBox = new BusyBox(…’ window.onbeforeunload = show; You still need to add the div tag code in your aspx file, but I’m sure this can also be added in the .js file; therefore eliminating all aspx code except the script reference. I anticipate trying to create a custom control for this, so I’ll keep you updated. Another issue: feedback on use with smartNavigation shows that the code does not work with smartnav enabled. I have made (with the assitance of others) an alternative to smartNav that is cross platform and does not interfere with busybox. It is a compiled control, so adding a web reference and drag and drop and your ready to go. Let me know if you want the code so you can post it, use it, or burn it… :-) Thanks man, keep up the great work… # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/11/2005 8:59 AM Mark Wagner Dan, Thank you for the kind words and your excellent suggestions. I would very much like to get your custom smartnav control. It sounds like something I could use. If you could send me an email using my Contact link at the top of my blog, I can get you my email address. Thanks again! Mark # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/17/2005 12:55 PM Sagar R Great article Mark. something I have been looking for a long time. Jut wanted to let you know that. Thanks, Sagar. # modified busybox using in page with custom content 3/23/2005 2:13 PM Warren Hedley This is a great article and script. I spent some time messing around with it because I wanted to specify the busybox content in the page, and not have to worry about having a separate file. The demo at the URI below accomplishes this and allows allows makes the busybox the size that the browser thinks the div should be. This is accomplished by rendering it offscreen, at position -1000, -1000, instead of hiding it. http://users.sdsc.edu/~whedley/20050322_busyboxmod/ Unfortunately, Safari’s page load model, where the user proceeds to the new page immediately after clicking, even before any content has been recieved, prevents me from using this. Wish I’d tested that first :-( Opera also has issues, as described on the demo page. If anyone figures out how to get Mark’s or my busybox script working properly in Opera and/or Safari, please post your fixes. Thanks, Warren # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/24/2005 9:38 AM Mark Wagner Warren, good work. My original 1.0 and 1.1 version used a DIV instead of an IFRAME which allowed the developer to define the busy boxy contect in the page, just as you have. I should have keept those version article instead of replacing them with the latest updated document. Sometimes I learn the hard way :) I do like having that ability also – for certain pages. One of the issues surfaced using the DIV was that combo-boxes will appear on top of the busy box. This may not be a problem for your pages, but others had this as a need. It sure would be nice to get the best of both worlds. Maybe some day I will try that quest. Or, maybe someone else will improve and share their work just as you have. Good feedback/post and thanks for sharing your changes and url. It will help others. Mark # re: Costruire una pagina di attesa in ASP.NET utilizzando XmlHttp 3/26/2005 1:45 PM Lorenzo Barbieri @ UGIblogs! # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 3/29/2005 11:55 AM Ekta The Busy Box works perfectly fine and is a very good approach. However I am having one problem in implementing it. I call BusyBox.Show on my form Submit which waits for about 3 mins to show me the download window with options- Save, Open and Cancel. When I press Cancel, I can still see the BusyBox on the page but with no animation. How can I solve this. Please advise. Thanks Ekta # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/15/2005 6:54 AM Joseph Hi, I’m Trying to use this Busy Box in a ASP.NET application. I’m Joseph and I work in the researching departement of a french bank, but this doesn’t work… Mark could u tell the steps to use it correctly??? Which code i have to put in the pages .js, .aspx and .aspx.vb??? Realy Thanks… # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/17/2005 10:36 AM Ian Coetzer Hi Mark Great work, mind if I use it as is, running under some pressure here to implement a new Asp.Net application and this busy box thing is really a big advantage because I do some Remote Function Calls to SAP and they are usually not very quick and I need something better than the IE progressbar to indicate progress to the user, I have tested the busy progress bar and showed it to some of my colleagues and they love it! Will be visiting your site a lot in future! Thanks Ian Coetzer Systems Analyst # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/17/2005 5:43 PM Mark Wagner Hi Ian. Please feel free to use it as needed. If you run across any needed improvements you end up adding, I would like to hear about what they are. Good luck with your project and I am happy to hear this will help you. Mark # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/18/2005 3:06 AM Joseph Hello Mark, I’m Joseph and I work in a french bank, as you know the transactions in the banks take a lot of time and we needed a soft code to comunicate to user the waiting time. I was searching a BusyBox time ago. We use VB and ASP.NET. Your BusyBox works really good, great work, thanks. Joseph Cruz Computer Engineer # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/18/2005 8:39 AM Ted Mark, Is there a license required to use this control? We are looking at using it in an application that we’re creating for one of our clients. Ted Thomasson Managing Partner Tenaz, L.L.C. http://www.tenazllc.com # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/26/2005 11:49 AM Ken Updike Mark, Excellent. Thoughtful. Useful. Warmest regards, # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/28/2005 7:09 PM Curt Broyles Mark, First of all I would like to thank you for this well documented example. I’ve been developing windows applications in .net for some time but recently started a web application. I have place the example code in a test project and all works well. My main objective is to have this busybox kick off in the page load event as a dataset is loading and then being assigned to a Crystal Viewer. If I place a button at the top of the form above the report viewer all works well, but I’d rather do without the user having to click a button. Any assistance would be appreciated. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 4/29/2005 9:39 AM Prashanth Mark, Excellent article. You have done a great job. I am using your code in of my applications. Every thing works fine when my web application is on my local web server, but when I copy the application to one of the dev web server, I dont see the image. I just see the frame with the Processing text. Do you know why image doesnot show up? Your input is highly appreciated. Thanks Here is the code. In the aspx page var busyBox = new BusyBox(“BusyBoxIFrame”, “busyBox”, 4, “gears_ani_”, “.gif”, 125, 147, 207); # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/5/2005 7:07 AM John Underwood Mark, Great article and really useful. I have a small problem though. I am using a span onclick busyBox.Show which shows the busybox as I would expect. However in the C# code behind the button I call a sql query. When the sql query has completed I am trying to save the result set to an excel file. A file download dialog box is displayed to allow me to download and save the dataset. When this dialog box is complete/closed the original screen is displayed but the busybox is still visible (animation has stopped) and an IE warning box is shown in the task bar at the bottom of my window (error appears to be busyBox.Center function – though I cant see why). Is there a way to hide the busybox before the file save dialog box is displayed. My C# code is as follows to save the data. response.Clear(); response.Charset = “”; response.ContentType = “application/vnd.ms-excel”; StringWriter stringWrite = new StringWriter(); HtmlTextWriter htmlWrite = new System.Web.UI.HtmlTextWriter(stringWrite); DataGrid dg = new DataGrid(); dg.DataSource = ds.Tables[0]; dg.DataBind(); dg.RenderControl(htmlWrite); response.Write(stringWrite.ToString()); Any help would be greatly appreciated # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/6/2005 6:08 AM John Hi Mark, Great work. Could you respond to Ted Thomasson’s query regarding licensing. Can you confirm people are allowed to use this on client sites? Thanks, John # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/6/2005 6:22 AM John Hi Mark, You can ignore my previous post. I saw your response to Ian which answered Ted’s question. “Hi Ian. Please feel free to use it as needed. If you run across any needed improvements you end up adding, I would like to hear about what they are. Good luck with your project and I am happy to hear this will help you. Mark” John # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/10/2005 12:15 PM Adam I know that you’ve said it is okay to use the control, but are there any licensing issues in using the images that you have gotten? It’s been a while since I’ve read the ariticle so I forget where you’ve said you got them from. Thanks, Adam # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/10/2005 1:17 PM Mark Wagner ======================================= Licensing for the BusyBox – Processing Please Wait ======================================= Copyright (c) 2004, 2005 Castle Rock Software, LLC Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/10/2005 1:23 PM Mark Wagner ======================================= Notice using the images ======================================= The images provided are from Microsoft SharePoint 2001 and are the property of Microsoft. They are provided only as an example and they should not be used in any other context. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/11/2005 2:58 PM Mike Jason Good Job Mark. I have a small problem. I donot know before hand how much time it takes for my query to execute and populate a datagrid (The time varies according to the dynamic query that a user selects). How can I implement the busybox in my webpage. Thanks, Mark. # BusyBox Web Control 5/11/2005 4:41 PM Alain Rostain Hi… I think you were going to post information on the web control, but I didn’t see anything.. maybe I missed it? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/12/2005 10:45 AM Matt Is there a way to hide the busybox, which i have in a user control when the user clicks the stop button? # Going underground 5/12/2005 7:09 PM Mark Wagner’s .NET C# Cogitation # Busy Box Server Control 5/16/2005 12:48 AM p u b l i c v o i d . d k # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/19/2005 4:01 PM Pieter Fantastic! Been looking for something like this for ages! # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 5/24/2005 4:11 AM titch The BusyBox is great, I just can’t work out how to hide it. This is similiar to the request from John Underwood above. I want to show the busybox when the user is uploading a file (HttpPostedFile). I test to see if the file isn’t null or of zero length and then return an error if it is, yet the BusyBox is still shown. Is it possible to hide it from inside code? Can you grab java objects in the code? Cheers, Titch # Going underground 6/6/2005 1:54 PM Mark Wagner’s .NET C# Cogitation I tend to get quite a few emails via my blog so I thought I would post a quick note to say that I will not be able to respond to emails for the next three weeks. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/8/2005 6:47 AM Sean Hi Mark, Great article! I am having trouble getting this to work (if indeed it is even possible) under XHTML Transitional. Has anyone had any success? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/17/2005 6:16 AM Eric I cannot tell you how awesome this is! Thanks so much # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/18/2005 10:05 PM Ruben Nice article. Another trick that works for me is after doing a postback with javascript, if you change the .src of an image to an animated gif and IE will continue to animate it after the form post. -R # Building a Better Busy Box 6/20/2005 6:52 AM help.net # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/21/2005 11:38 AM Eric Zechman Did the .net server control ever get created? I was looking for it and didn’t seem to find it. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/21/2005 4:33 PM Neil Excellent script. I’ve added an extra method that allows the script to be shown after a specified delay. BusyBox.prototype.ShowAfterDelay = function(inDelay) { if( !this.Enabled ) return; if( this.IsAnimating() || this.IsVisible() ) return; window.setTimeout(this.VarName + “.Show();”, inDelay); } You then change the body tag to be Which will mean if the page takes longer than 1/2 second to process the BusyBox is shown, less than that time and we don’t see the BusyBox. I use this on my pages were processing could be quick or not so quick dependant upon what the user has entered. I’ve also changed the Show method slightly so that if the BusyBox is hooked up and you have ASP.NET validators on the page which don’t validate, the box doesn’t get shown. The Show method I’m using is … BusyBox.prototype.Show = function() { if( !this.Enabled ) return; if( this.IsAnimating() || this.IsVisible() ) return; // check that validators on the page are ok with things if((Page_IsValid != null) && (Page_IsValid == false)) { return; } this.Resize(); this.Center(); // Set the busy box to be visible and make sure it is on top of all other controls. this.IFrame.style.visibility = “visible”; this.IFrame.style.zIndex = “999999”; // Start the animation this.StartAnimate(); } Anyway a most excellent and useful script # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 6/27/2005 9:20 AM Charlie I have a page that loads, and in the pageload i am calling a webservice. Any way to get this to work so it shows while the page is processing and when the page is done rendering display the real info and make the status hide? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/7/2005 12:34 PM Hemanth Hi Mark, It’s a great article and very helpful. I’m able to make it work for my webpage but I’ve one concern. I want to make the busybox appear on the page where user is entering rather the one the user is leaving. For example, The busybox (works fine) appears on the current page, with the following code, till the result page replaces it (target =”_top”) Click here When I make target=”_blank” (a new page) the busybox still appears on the current (or parent) page and doesn’t stop though the new page has loaded. Is there a way I can make the busy box appear on the new page rather than current page and stop it when the page has loaded? TIA, Hemanth # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/8/2005 11:37 AM Neel Mark, I am trying to incorporate your code, I am not able to make it run. I copied the javascript file and used the iframe tag and show method as mentioned in the article. I am using below code as is Here is the code. In the aspx page var busyBox = new BusyBox(“BusyBoxIFrame”, “busyBox”, 4, “images/gears_ani_”, “.gif”, 125, 147, 207); Do you have a web control , i can use? do you have the syntax Neel # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/12/2005 3:43 AM Alaistair Jerrom-Smith Amazing bit of script, worked first time really really pleased, we are using it on the following clients website for the creditcard processing : http://www.dotcomdvd.com Thanks again, Alaistair # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/15/2005 3:02 AM Sanjay Nipane Hi, Very good article. I have serached somny days for this on net for my project work. At last I got this here. Very good work that u have implemented. Thanks, Sanjay Nipane NAGPUR. # PROBLEM re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/20/2005 5:13 AM Sanjay Nipane Hi, I am using your script for my project. But busy box does not appear when postback on the same page. it is working finely while navigating from one page to another. Please help in this regard. Sanjay # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/20/2005 11:00 AM Thomas Andersson Hi Mark, I am trying to incorporate your code, I am not able to make it run. I copied the javascript file and used the iframe tag and show method as mentioned in the article. I am using below code as is Here is the code. In the aspx page var busyBox = new BusyBox(“BusyBoxIFrame”, “busyBox”, 4, “images/gears_ani_”, “.gif”, 125, 147, 207); Do you have a web control , i can use? do you have the syntax Thomas # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/20/2005 11:02 AM Thomas Andersson Hi again Mark, You wrote : You can find the control in my BusyBox Web Control article – to be posted shortly with a link insterted here. When will you release the BusyBox Web Control article? Thomas # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/22/2005 6:26 AM Scott S Great Code. I am using this in an intranet reporting app that I have just rewritten in asp.net. The busy box is the perfect solution to processing some of the long running crystal reports that we have. Thanks for making this available to everyone. Also, I have learned quite a bit about working with IFrames by looking through your code. Thanks Again Scott # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/25/2005 2:51 AM Sandip B Hi Mark, This utility code is gr8. I was just looking at the demo page. While testing I found that when user clicks the STOP button on the browsers std buttons bar. Progress bar animation still remains on the screen. Could something be done about this issue.? Thanks Sandip # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/25/2005 4:46 AM J Stuart Hi Has anybody been able to get this to work with IE5? The DIV method works fine, but suffers by all of the combo boxes appearing above the animation. The IFRAME method works great on IE6, but wont work at all on older browsers. I’m using a span to start the animation, eg: Thanks James # some common used tips in web development 7/25/2005 7:11 PM Gordon Golden Shining TrackBack From:http://gozh2002.cnblogs.com/archive/0001/01/01/192085.html # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/26/2005 5:25 AM Kelly Siefert Hi Mark, the busybox is wonderful! I use it except for when I have to save a dataset as Excel. John Underwood posted the question on 5/5/05 to see about hiding the busybox after the excel save. Have you had a chance to solve this? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/26/2005 6:12 PM Rashy I’d like to see an independent PHP embeded code example. Does anyone have insight to share? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/27/2005 1:09 PM Dave hartless Mark, Great article. Have trying for some time to incorporate an appropriate long running notification for the GIS part of our web sites. This is the first ‘logical’ method I have come across. Thanks for taking the time and posting the article. Dave # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 7/30/2005 7:06 AM David Morgan Hi Mark, Thanks for this. Just to point out an idiosyncrasy in that the animated gifs do not display in IE6 if the browser is configured to “Check for newer versions of stored pages:” on “Every visit to the page”. David. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/1/2005 9:34 AM Tim Harms Mark, This busy box has provided me with a great solution. Thank you very much for providing the code. I was wondering if anyone could help me with some ideas about my problem. I have a datagrid on my page and I’ve allowed the datagrid to be sorted through server side code, which is called when the user clicks a column header. I’m trying to get the busy box to show when any column header of the datagrid is clicked. The reason I’m using the busy box is because the page can take 10-15 seconds to load and I don’t want my user to sit there staring an idle page. I first tried to use RegisterStartupScript(“ShowBusyBox”, “busyBox.Show();”) in the code behind but quickly realized that this was a server side solution, which would not have the effect that I desired. I then tried to enclose the datagrid within a tag and use its onClick event. … … … This worked until I randomly clicked on the body of the datagrid (not a column header). The busy box showed and did not hide because there was no postback after I clicked the datagrid. I then tried to add an onClick attribute to the header of the BoundColumn during the ItemDataBound event, which didn’t work because I didn’t really have an element to add an attribute to. I tried to define my datagrid and then pull out the BoundColumn header, but I couldn’t find anything to add the onClick event to. I even tried to modify the text of the column header, as is commented out. Private Sub dgrResults_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgrResults.ItemDataBound If e.Item.ItemIndex = -1 Then Dim dgrTemp As DataGrid dgrTemp = e.Item.Parent.NamingContainer() ‘dgrTemp.Columns.Item(0).Attributes.Add(“onclick”, “busyBox.Show();”) ‘invalid syntax ‘dgrTemp.Columns.Item(0).HeaderText = “Sample ID” End If End Sub Does anyone have any ideas how I can achieve what I’m looking for? I want the busy box to show when I click a column header to resort my datagrid and not to show when I click anywhere else in the datagrid. Thank you in advance, Tim Harms harmst@saic.com # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/1/2005 1:43 PM David Morgan Tim, I had a similiar issue with my DataGrid. The only difference is I wanted the BusyBox to show when a user clicked on the page hyperlink at the bottom of the grid. The code I used is as follows – you will need to change it for your circumstances but it should give you the jist: Add the following code to the ItemCreated event of the DataGrid If e.Item.ItemType = ListItemType.Pager Then Dim objTableCell As TableCell Dim objLinkButton As LinkButton Dim obj As Object Dim i As Int32 objTableCell = e.Item.Controls(0) While i < objTableCell.Controls.Count obj = objTableCell.Controls(i) If obj.GetType().Name = "DataGridLinkButton" Then objLinkButton = obj objLinkButton.Attributes.Add("onclick", "busyBox.Show();") End If i += 1 End While End If # Displaying Elapsed Time on Busy Box 8/1/2005 1:54 PM David Morgan Mark, Again thanks for this. I have a suggestion for an improvement and the code change is quiet simple. It can be useful to show the elapsed time in minutes and seconds on the BusyBox so that "0 mintues 0 seconds" first appears and then this gets incremented every second so it becomes "0 minutes 1 seconds", "0 minutes 2 seconds" and so on. This is useful, for example, if the same users are hitting the same slow running web pages regularly. By displaying the elapsed time it gives users feedback and allows them to gauge approximately when the screen will load based on previous experience (sort of like a progress bar). It is also useful for developers as users can give more accurate feedback on how long the screen is actually taking to load. Anyway, I have coded this and it works very well. The code change is as follows, if you're interested: Add the following placeholder for the elapsed time to BusyBox.htm: 0 minutes 0 seconds Make the following changes to CastleBusyBox.js: #1. Add the following line to function RenderContent() after line -> doc.writeln(” Processing “); doc.writeln(” <div id='" + this.DivElapsedTime + "' 0 minutes 0 seconds “); #2. Add the following line just before function BusyBox() so it exists on its own outside of any function (i.e. a gloabal variable): var startTime; #3. Add the following line to function BusyBox() just after the line -> this.DivID = “BusyBoxDiv”; this.DivElapsedTime = “divElapsedTime”; #4. Add the following lines to function Show() just before the line -> this.StartAnimate(); var date = new Date(); startTime = date.getTime(); #5. Add the following lines to the very begining of function Animate() var present, presentTime, elapsed, minElapsed, secElapsed present = new Date(); presentTime = present.getTime(); elapsed = (presentTime – startTime) / 1000; minElapsed = Math.floor(elapsed / 60); secElapsed = Math.floor(elapsed – (minElapsed * 60)); if( frames[this.id] ) // browser supports frames frames[this.id].document.getElementById(this.DivElapsedTime).innerText = (minElapsed + ” minutes ” + secElapsed + ” seconds”); else // browser does not support frames document.getElementById(this.DivElapsedTime).innerText = (minElapsed + ” minutes ” + secElapsed + ” seconds”); #6. That’s it. When the busy box appears with these code changes the elapsed time should increment every second. Note that I have only tested this with IE6. Cheers David (david.morgan@iconxsolutions.com) # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/2/2005 7:26 AM Tim Harms David, Your suggestion was excellent! The datagrid works just as I want it to now. For anyone looking for the code I used: If e.Item.ItemType = ListItemType.Header Then Dim objTableRow As TableRow Dim objHeaderCell As TableHeaderCell Dim objLinkButton As LinkButton Dim obj As Object Dim i As Int32 objTableRow = e.Item While (i 0 Then obj = objHeaderCell.Controls(0) If obj.GetType().Name = “DataGridLinkButton” Then objLinkButton = obj objLinkButton.Attributes.Add(“onclick”, “busyBox.Show();”) End If End If i += 1 End While End If Thanks, Tim # PleaseWait control 8/4/2005 4:29 AM Dino Esposito # Excel 8/7/2005 5:29 PM John Krawl HI, great application. I would like to know how can i make the busybox hide once my results from my datagrid are to be exported to excel. It seems that the busybox stays on the screen even after excel is opened with my results. i wanna make the busybox hide jsut before excel opens. tks # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/10/2005 3:36 AM shahab Is it possible to use this control while processing a JS function which takes bit of time to load.I have a tree view which loads the data from xml but it takes too long. any help would be most appreciated. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/11/2005 2:01 PM Alain ROUEN Really great work. But, i found an issue with Firefox when the DOCTYPE is XHTML Transitional : the iframe never appear because of a missing “px” in the function resize and center: Center: ” this.IFrame.style.position = “absolute”; this.IFrame.style.top = objTop+”px”; this.IFrame.style.left = objLeft+”px”; ” Resize: ” else { // Set the width to the value specified. this.IFrame.style.width = this.Width+”px”; this.IFrame.style.height = this.Height+”px”; } ” # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/15/2005 4:45 PM Noel Willis Excellent work with this – looks great. I, as are others I am sure, are very interested in the ASP.NET Web Control you mention – do you have any idea when your article referenced will be online? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/18/2005 9:52 AM Ed Comment # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/20/2005 3:04 AM Robert Goldman Hi Mark, I’m still having problems with https. Everytime someone accessed the page they got the message “This page contains both secure and nonsecure items”. Then after fixing the IFrame and added a scr, now there’s only a message when the user is about to leave the secure page and ask for confirmation to access a nonsecure page. Regards, Robert # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/25/2005 6:32 AM Robert Smith Excellent work! However, I could not hide the busy box when click the save button with some required fields unfilled. has anybody figured out how to integrate the busy box with .net validation controls. When click the save button, the page will do the validation first, if validation passes, save it with the busy box displaying in the process. If it does not pass validation, how can I prevent displaying the busy box. Any idea, anybody? Thank you for your help. Robert # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/25/2005 4:53 PM Evren Perfect article.. Perfect control.. Nice Job Mark.. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/29/2005 3:35 AM M I have button on left frame but i want to show busybox on my right frame, any suggestions?! # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/29/2005 7:39 PM John Doe Try to use the code in your Main Frame Page.. I hope it would work.. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/30/2005 7:35 PM CAlvin how to use the progress bar on page load? any codes? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/31/2005 1:22 AM Miralem Note that this wont work if SmartNavigation=”true” (onbeforeunoad) # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/31/2005 1:34 AM claus Hi Mark, This is really usefull. Nice explanation of what is going on – usefull examples with complete code – I like it!! But (there is always a but) – i am using smartnavigation on my primary page – so busybox won’t work here. I saw that on 3/11/2005 Dan mentioned an alternative to smartnav – have you tried this ? Is it publicly available ? If anyone could guide me to somewhere to find an alternative to smartnav – I am even willing to buy a component if just I am sure it works with busybox :-) Best regards Claus # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 8/31/2005 1:37 AM Miralem Because in smartnav.js there is this line of code: window.attachEvent(“onbeforeunload”, window.__smartNav.saveHistory); Workaround is to edit smartnav.js and on onbeforeunload call window.__smartNav.saveHistory ?!?! # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/1/2005 1:07 AM claus Hi, i am using smartnav – but i have no smartnav.js. I have just added a smartnavigation=true in my aspx page – i am using vs.net so i assume it is standard part of the system. how can i use the workaround then ?? /Claus # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/1/2005 7:14 AM Z Hi Mark, Great work, just wondering if anyone found other pictures to use? I’m having a tough time googling for them. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/2/2005 2:01 AM shaun Hi Mark, Great job. Ur code (as well as ur largeheartedness in sharing it) saved me a lot of trouble at my workplace. I have used a modified version of ur busybox for our webapplication. But a bug has popped up. We require to export reports into excel into our application which we do using .nets content type methods. Now even after the export process is over, i.e. the user has saved the excel file( after the ‘open/save’ dialog), the busybox continues to appear on the page. The ‘return false’ here is n/a since this would kill the functionality of the export button. As a quick fix, i applied this ‘busyBox.Enabled = false’ on the export button. But this would cause the busyBox to remain invisible on the page for any other click. Any suggestions? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/6/2005 12:27 PM skicow Sweet. This is exactly what I was looking for, and the article explains it very well. Thanks for this Mark. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/12/2005 8:02 PM Rodney Awesome, very helpful. I got into a little snug though. How come even if i set the z-index to 999 it still shows under my listbox webcontrol? Any thoughts on this. Thanks # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/14/2005 10:29 PM sdfd dsfdsf # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/18/2005 8:24 AM Alan Excellent work, will written and easy to use. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 9/29/2005 10:37 AM cweave Good work! I would like to use your BusyBox Web Control in an ASP.net application. Do you have your control completed? If so where could I download it? # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 10/5/2005 4:08 PM Simone Busoli I’m replying to those who asked how to hide the BusyBox in case the response was redirected to create an Excel (or any other type of) document. I simply modified the solution proposed by Neil (http://blogs.crsw.com/mark/articles/642.aspx#1117) and created a similar function that hides the box automatically after a certain delay. Here’s the code, which must be called in place of the Show() method, and supplying the startup delay, and the hide delay: // ShowAfterDelayAndHideAfterDelay: // This function displays the busy box to the user after inDelay milliseconds // and hides it after outDelay milliseconds. This function centers the // busy dialog box, makes it visible, and starts the animation. This function // will typically be called by the body event. // // Example: // BusyBox.prototype.ShowAfterDelayAndHideAfterDelay = function(inDelay, outDelay) { if(inDelay >= outDelay) return; if( !this.Enabled ) return; if( this.IsAnimating() || this.IsVisible() ) return; window.setTimeout(this.VarName + “.Show();”, inDelay); window.setTimeout(this.VarName + “.Hide();”, outDelay); } # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 10/5/2005 4:14 PM Simone Busoli I would like to add, after my previous post, that since no control has been developed, I’d be available to do it in collaboration to someone else interested in doing it. Let me know something at my email address: simone_b@tin.it. # re: Building a Better Busy Box (Processing… Please Wait) Ver 1.2 10/7/2005 1:23 PM Andrew Finney Hello Mark, Many Atta Boys for this control, and

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s