busybox... image is not displaying

i have download a busybox javascript from online and i modify the
--css
--div and also i change my own little cute 2 images

but it does not display my image, im pasting the javasdcript as well as .aspx code for reference and also on my web site i upload the images in order to get an idea of what im talking . - thanks a lot


/// my new image looks like this:

http://www.geocities.com/dsmportal/progress.gif      <<<this is my image
http://www.geocities.com/dsmportal/progress_bg.gif <<<this is m background of image

///aspx code
============
<BODY onbeforeunload="busyBox.Show();" MS_POSITIONING="GridLayout">
<form id="Form2" method="post" runat="server">

<SCRIPT>
// Instantiate our BusyBox object
//OLD CODE HERE
//var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 4, "images/gears_ani_", ".gif", 125, 147, 207);

//NEW CODE HERE
var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 4, "Images/progress.gif",  125, 147, 207);

</SCRIPT>
</form>
</BODY>
</HTML>

/// javasdcript code --PLEASE SEE THE FUNC >>>>(BusyBox.prototype.RenderContent = function())<<<<<
==============


// ---------------------------
// Constructor
// ---------------------------
// BusyBox class constructor
// Arguments:
//   id - id of the IFrame tag to use.
//   varName - name of the variable this instance of the busy box is assigned to.
//   imageCount - number of image in the animation sequence.
//   imageNamePrefix - name prefix for each image.
//   imageNameSuffix - name suffix for each image.
//   imageDelay - number of milliseconds to display each image.
//   width - defines the width of the busy box (required for Netscape and Firefox)
//   height - defines the height of the busy box (required for Netscape and Firefox)
//   url - (optional) url to the page containing the custom busy box layout.
//
//   This example uses the default busy box layout defined internally (in the javascript).
//   var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_", ".gif", 125, 147, 206)
//
//   This example uses a custom busy box layout defined in the BusyBox.htm file.
//   var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_", ".gif", 125, 147, 206, "BusyBox.htm")
//
function BusyBox(id, varName, imageCount, imageNamePrefix, imageNameSuffix, imageDelay, width, height, url)
{
      // Initialize object
      this.id = id;
      this.ImageCount = imageCount;
      this.CurrentImageIndex = 0;
      this.ImageWidth = 0;
      this.ImageHeight = 0;
      this.ImageNamePrefix = imageNamePrefix;
      this.ImageNameSuffix = imageNameSuffix;
      this.ImageDelay = imageDelay;
      this.DivID = "BusyBoxDiv";
      this.ImgID = "BusyBoxImg";
      this.Enabled = true;
      this.Width = width;
      this.Height = height;
      
      // Retain the name of the instantiated object variable so that we can animate
      // using the setTimeout statement
      this.VarName = varName;
      
      // Allows us to stop the animation with clearTimeout(), should we ever want to
      this.timeout_id = null;
      
      // Cache (pre-load) images
      this.CacheImages();
      
      // Url to the page containing the busy box.
      this.BusyBoxUrl = url;
      
      // Get reference to the IFrame object
      this.IFrame = document.getElementById(this.id);
      
      // Hide the busy box
      this.Hide();
      
      if( this.BusyBoxUrl )
            // Load the busy box contents using a custom layout page.
            this.LoadUrl(this.BusyBoxUrl);
      else
            // Load the busy box contents using the internally defined layout.
            this.RenderContent();
      
      // If this browser does not support IFRAME tags then disable this control.  The
      // next version will implement the use of a DIV instead of the IFRAME tag;
      // even though there are a couple minor issues with using DIV tags.
      if( !frames[this.id] )
            this.Enabled = false;
}

// --------------------------------
// Instance Methods
// --------------------------------

// GetIFrameDocument:
// Returns a reference to the document object in the IFrame.
BusyBox.prototype.GetIFrameDocument = function()
{
      var doc;
      
      if( this.IFrame.contentDocument )
            // For NS6
            doc = this.IFrame.contentDocument;
      else if( this.IFrame.contentWindow )
            // For IE5.5 and IE6
            doc = this.IFrame.contentWindow.document;
      else if( this.IFrame.document )
            // For IE5
            doc = this.IFrame.document;
      else
// TODO: Confirm this should be the default
            doc = this.IFrame.document;
      
      return doc;
}

// 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)
{
      // Get a reference to the document object in the IFrame
      var IFrameDoc = this.GetIFrameDocument();
      
      // Load the url using the replace method.  This will prevent the browsers
      // history object from being updated with the new busybox url; thus allowing
      // the back button to function as desired for the user.
      IFrameDoc.location.replace(url);
}

// 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.
BusyBox.prototype.RenderContent = function()
{

 
      // Get the IFrame document object
      var doc = this.GetIFrameDocument();
      
//OLD CODE COMMENT
//var style = " style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
var style = "style= body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}" //" style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
      doc.open();
      doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
      doc.writeln("   <div id='" + this.DivID + "' align=center style='position:absolute; left:326px; top:275px; z-index:1'>");
      doc.writeln("      <img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11''>");
      doc.writeln("      <div id='" + this.ImgID + "' >Building data lists ...</div>");
      doc.writeln("   </div>");
      doc.writeln("</body>");
      doc.close();
      
/* // OLD CODE
      doc.open();
      doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
      doc.writeln("   <div id='" + this.DivID + "' align=center " + style + ">");
      doc.writeln("      <img id='" + this.ImgID + "' src=''>");
      doc.writeln("      <br><h5>processing...</h5>");
      doc.writeln("   </div>");
      doc.writeln("</body>");
      doc.close();*/
       /*
              
}

// Resize:
// Resizes the busy box IFrame by setting its width and height attributes
// to the size of its contents.
BusyBox.prototype.Resize = function()
{
 
      // Resize the busy box IFrame.
      if( BusyBox.IsBrowserIE() )
      {
            // Set the width by looking at its contents
            var div = frames[this.id].document.getElementById(this.DivID);
            this.IFrame.style.width = div.offsetWidth;
            this.IFrame.style.height = div.offsetHeight;
      }
      else
      {
            // Set the width to the value specified.
            this.IFrame.style.width = this.Width;
            this.IFrame.style.height = this.Height;
      }
}

// 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.
BusyBox.prototype.Center = function()
{
      if( !this.IFrame )
            return;
      
      // Center the BusyBox in the window regardless of the scroll positions
      var objLeft = (document.body.clientWidth - this.IFrame.offsetWidth) / 2;
      var objTop = (document.body.clientHeight - this.IFrame.offsetHeight) / 2;
      objLeft = objLeft + document.body.scrollLeft;
      objTop = objTop + document.body.scrollTop;
      
      // Position object
      this.IFrame.style.position = "absolute";
      this.IFrame.style.top = objTop;
      this.IFrame.style.left = objLeft;
}

// CacheImages:
// Pre-loads the images from the server and stores a reference to each
// image.  This allows the images to be presented to the user quickly
// for smooth image animation.
BusyBox.prototype.CacheImages = function()
{
      // Instantiate the array to store the image references
      this.Images = new Array(this.ImageCount);
      
      // Load all the images to cache into the aniframes array
      for(var i = 0; i < this.ImageCount; i++)
      {
            this.Images[i] = new Image();
            this.Images[i].src = this.ImageNamePrefix + i + this.ImageNameSuffix;
      }
}

// IsAnimating:
// Returns a boolean value representing the state of the animation.
BusyBox.prototype.IsAnimating = function()
{
      if( this.timeout_id == null)
            return false;
      else
            return true;
}

// IsVisible:
// Returns a boolean value representing the visibility state for the busy box.
BusyBox.prototype.IsVisible = function()
{
      var ifrm = document.getElementById(this.id);
      
      if( ifrm.style.visibility == "visible" && ifrm.style.width > 0 )
            return true;
      else
            return false;
}

// Animate:
// Performs the animation process.  This is accomplished by showing the "current"
// image in the animation sequence process; and then submitting a timed statement
// to execute in x number of milliseconds.
BusyBox.prototype.Animate = function()
{
      // Assign the current image sequence to display
      if( frames[this.id] )
            // browser supports frames
            frames[this.id].document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src;
      else
            // browser does not support frames
            document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src;
      
      // Auto re-center and re-size the busy box.  This will force the busy box to
      // always appear in the center of the window even if the user scrolls.
      this.Resize();
      this.Center();
      
      // Increment the current image index
      this.CurrentImageIndex = (this.CurrentImageIndex + 1)%this.ImageCount;
      
      // Display the next image in (imageDelay value) milliseconds (i.e. 125)
      this.timeout_id = setTimeout(this.VarName + ".Animate();", this.ImageDelay);
}

// StartAnimation:
// Starts the animation process.
BusyBox.prototype.StartAnimate = function()
{
      if( this.IsAnimating() )
            return;
      
      this.Animate();
}

// StopAnimation:
// Stops the animation process.
BusyBox.prototype.StopAnimate = function()
{
      clearTimeout(this.timeout_id);
      this.timeout_id = null;
}

// Hide:
// Hides the busy box making it invisible to the user.
BusyBox.prototype.Hide = function()
{      
      this.StopAnimate();
      
      // Hide the busy box.
      this.IFrame.style.visibility = "hidden";
      this.IFrame.style.width = 0;
      this.IFrame.style.height = 0;
}

// Show:
// This function displays the busy box to the user.  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:
//            <body onbeforeunload="busyBox.Show();" >
BusyBox.prototype.Show = function()
{
      if( !this.Enabled )
            return;

      if( this.IsAnimating() || this.IsVisible() )
            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();
}

// --------------------------------
// Class Methods
// --------------------------------

// IsBrowserIE:
// Returns true if the executing browser it a Microsoft Internet Explorer browser.
BusyBox.IsBrowserIE = function()
{
      try
      { return (window.navigator.userAgent.indexOf("MSIE ") > 0); }
      catch(x)
      { return false; }
}

// IsBrowserNS:
// Returns true if the executing browser it a Netscape browser.
BusyBox.IsBrowserNS = function()
{
      try
      { return (window.navigator.userAgent.indexOf("Netscape") > 0); }
      catch(x)
      { return false; }
}

// IsBrowserFirefox:
// Returns true if the executing browser it a Firefox browser.
BusyBox.IsBrowserFirefox = function()
{
      try
      { return (window.navigator.userAgent.indexOf("Firefox") > 0); }
      catch(x)
      { return false; }
}
//end

//css
#busy_box {
      FILTER: alpha(opacity=90);
      background-image: url(Images/progress_bg.gif);
      moz-opacity: .90;
      height: 85px;
      width: 350px;
      background-repeat: no-repeat;
      margin: 0px;
      padding: 0px;
      background-position: 0px 0px;
}
#message_body {
      height: auto;
      width: 350px;
      font-family: Tahoma, Verdana, Arial, sans-serif;
      font-size: 11px;
      padding: 15px 0px 0px;
      text-align: center;
      font-weight: normal;
}
#progress_bar {
      height: auto;
      width: 350px;
      font-family: Tahoma, Verdana, Arial, sans-serif;
      font-size: 11px;
      padding: 15px 0px 0px;
      text-align: center;
      font-weight: bold;
}
madina1Asked:
Who is Participating?
 
ZvonkoSystems architectCommented:
Is your page accessible online?
0
 
madina1Author Commented:
here is the core javascritp heart:, wants to get to an attention:
//

// 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.
BusyBox.prototype.RenderContent = function()
{

 
     // Get the IFrame document object
     var doc = this.GetIFrameDocument();
     
//OLD CODE COMMENT
//var style = " style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
var style = "style= body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}" //" style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
     doc.open();
     doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
     doc.writeln("   <div id='" + this.DivID + "' align=center style='position:absolute; left:326px; top:275px; z-index:1'>");
     doc.writeln("      <img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11''>");
     doc.writeln("      <div id='" + this.ImgID + "' >Building data lists ...</div>");
     doc.writeln("   </div>");
     doc.writeln("</body>");
     doc.close();
     
/* // OLD CODE
     doc.open();
     doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
     doc.writeln("   <div id='" + this.DivID + "' align=center " + style + ">");
     doc.writeln("      <img id='" + this.ImgID + "' src=''>");
     doc.writeln("      <br><h5>processing...</h5>");
     doc.writeln("   </div>");
     doc.writeln("</body>");
     doc.close();*/
      /*
           
}

0
 
udaymsCommented:
shouldnt -

doc.writeln("      <img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11''>");

be -

doc.writeln("<img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11'>");

? I think u have an extra quote after the height attrib. pls check.

-uday
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
madina1Author Commented:
oops i missed that single quote

but still image is not showing

im getting a white blank div
0
 
BogoJokerCommented:
if you give the img an alt attribute, does the alt value show?
alt=testing
0
 
madina1Author Commented:
nothing is coming

im getting a white blank div without any image

thanks for your reply, apprecate if you please please look
0
 
madina1Author Commented:
>>>Is your page accessible online?

unfortunately not
0
 
ZvonkoSystems architectCommented:
Your //NEW CODE HERE removes one parameter: imageNameSuffix
Do you see that?
0
 
ZvonkoSystems architectCommented:
And it seams you do not use the functionality of that script library at all!
Why do you mess with it then?

0
 
madina1Author Commented:
you mean:

//OLD CODE HERE
//var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 4, "images/gears_ani_", ".gif", 125, 147, 207);

//NEW CODE HERE
var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 4, "Images/progress.gif",  125, 147, 207);

?  ".gif",

I have tried giving exactly what was there before like...

//?
var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 4, "Images/progress", ".gif",  125, 147, 207);


0
 
smaccariCommented:
Looks like the problem comes from here:

     doc.writeln("   <div id='" + this.DivID + "' align=center style='position:absolute; left:326px; top:275px; z-index:1'>");
     
You position your DIV in absolute, in left 326px and in top 275px. Just try to put 0 and 0, this should make the div visible in your iframe.

I had to correct some syntax errors though to test this code, but i suppose you did not have any errors, did you?

0
 
madina1Author Commented:
i mess because i wanted to replace the image to :  

/// my new image looks like this:

http://www.geocities.com/dsmportal/progress.gif      <<<this is my image
http://www.geocities.com/dsmportal/progress_bg.gif <<<this is m background of image
0
 
ZvonkoSystems architectCommented:
Try this:

var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 1, "Images/progress", ".gif",  125, 147, 207);

And name you image like this:

       Images/progress1.gif

and place them in a subdirectory relative to the dir where your page is in.

0
 
madina1Author Commented:
im getting this error:

line 304
char: 6
error: BusyBox is undefined
0
 
madina1Author Commented:
Zvonko : let me try this
0
 
smaccariCommented:
Again, position your DIV to 0,0.

Here is the RenderContent I use - I see the image - even if it's broken (look at Zvonko advice)

// 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.
BusyBox.prototype.RenderContent = function()
{

 
     // Get the IFrame document object
     var doc = this.GetIFrameDocument();
     
//OLD CODE COMMENT
//var style = " style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
     doc.open();
     doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
     doc.writeln("   <div id='" + this.DivID + "' align=center style='position:absolute; left:0px; top:0px; z-index:1'>");
     doc.writeln("      <img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11''>");
     doc.writeln("      <div id='" + this.ImgID + "' >Building data lists ...</div>");
     doc.writeln("   </div>");
     doc.writeln("</body>");
     doc.close();            
}
0
 
madina1Author Commented:
Zvonko : i add one more image with the name images/progress1.gif  foler


smaccari : i have changed to 0

but somehow when i run my page i get the error:


line 304
char: 6
error: BusyBox is undefined


0
 
madina1Author Commented:
no error now

but i dont able to see the image its blank white background

i think we are pretty close to fix this

 
0
 
smaccariCommented:
I had some errors too to make it work.
So here is the code I use, it works for me: (I replaced the busyBox declaration as Zvonko showed)

<BODY onbeforeunload="" MS_POSITIONING="GridLayout">
<form id="Form2" method="post" runat="server">
<script>

/// javasdcript code --PLEASE SEE THE FUNC >>>>(BusyBox.prototype.RenderContent = function())<<<<<



// ---------------------------
// Constructor
// ---------------------------
// BusyBox class constructor
// Arguments:
//   id - id of the IFrame tag to use.
//   varName - name of the variable this instance of the busy box is assigned to.
//   imageCount - number of image in the animation sequence.
//   imageNamePrefix - name prefix for each image.
//   imageNameSuffix - name suffix for each image.
//   imageDelay - number of milliseconds to display each image.
//   width - defines the width of the busy box (required for Netscape and Firefox)
//   height - defines the height of the busy box (required for Netscape and Firefox)
//   url - (optional) url to the page containing the custom busy box layout.
//
//   This example uses the default busy box layout defined internally (in the javascript).
//   var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_", ".gif", 125, 147, 206)
//
//   This example uses a custom busy box layout defined in the BusyBox.htm file.
//   var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_", ".gif", 125, 147, 206, "BusyBox.htm")
//
function BusyBox(id, varName, imageCount, imageNamePrefix, imageNameSuffix, imageDelay, width, height, url)
{
     // Initialize object
     this.id = id;
     this.ImageCount = imageCount;
     this.CurrentImageIndex = 0;
     this.ImageWidth = 0;
     this.ImageHeight = 0;
     this.ImageNamePrefix = imageNamePrefix;
     this.ImageNameSuffix = imageNameSuffix;
     this.ImageDelay = imageDelay;
     this.DivID = "BusyBoxDiv";
     this.ImgID = "BusyBoxImg";
     this.Enabled = true;
     this.Width = width;
     this.Height = height;
     
     // Retain the name of the instantiated object variable so that we can animate
     // using the setTimeout statement
     this.VarName = varName;
     
     // Allows us to stop the animation with clearTimeout(), should we ever want to
     this.timeout_id = null;
     
     // Cache (pre-load) images
     this.CacheImages();
     
     // Url to the page containing the busy box.
     this.BusyBoxUrl = url;
     
     // Get reference to the IFrame object
     this.IFrame = document.getElementById(this.id);
     
     // Hide the busy box
     this.Hide();
     
     if( this.BusyBoxUrl )
          // Load the busy box contents using a custom layout page.
          this.LoadUrl(this.BusyBoxUrl);
     else
          // Load the busy box contents using the internally defined layout.
          this.RenderContent();
     
     // If this browser does not support IFRAME tags then disable this control.  The
     // next version will implement the use of a DIV instead of the IFRAME tag;
     // even though there are a couple minor issues with using DIV tags.
     if( !frames[this.id] )
          this.Enabled = false;
}

// --------------------------------
// Instance Methods
// --------------------------------

// GetIFrameDocument:
// Returns a reference to the document object in the IFrame.
BusyBox.prototype.GetIFrameDocument = function()
{
     var doc;
     
     if( this.IFrame.contentDocument )
          // For NS6
          doc = this.IFrame.contentDocument;
     else if( this.IFrame.contentWindow )
          // For IE5.5 and IE6
          doc = this.IFrame.contentWindow.document;
     else if( this.IFrame.document )
          // For IE5
          doc = this.IFrame.document;
     else
// TODO: Confirm this should be the default
          doc = this.IFrame.document;
     
     return doc;
}
// 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)
{
     // Get a reference to the document object in the IFrame
     var IFrameDoc = this.GetIFrameDocument();
     
     // Load the url using the replace method.  This will prevent the browsers
     // history object from being updated with the new busybox url; thus allowing
     // the back button to function as desired for the user.
     IFrameDoc.location.replace(url);
}


// 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.
// 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.
BusyBox.prototype.RenderContent = function()
{

 
     // Get the IFrame document object
     var doc = this.GetIFrameDocument();
     
//OLD CODE COMMENT
//var style = " style='BORDER: navy 1px solid; POSITION: absolute;' ";

//NEW CODE HERE
     doc.open();
     doc.writeln("<body ondragstart='return false;' style='Margin: 0px; Background-Color: white'>");
     doc.writeln("   <div id='" + this.DivID + "' align=center style='position:absolute; left:0px; top:0px; z-index:1'>");
     doc.writeln("      <img id='" + this.ImgID + "' src='Images/progress.gif' width='189' height='11''>");
     doc.writeln("      <div id='" + this.ImgID + "' >Building data lists ...</div>");
     doc.writeln("   </div>");
     doc.writeln("</body>");
     doc.close();            
}


// Resize:
// Resizes the busy box IFrame by setting its width and height attributes
// to the size of its contents.
BusyBox.prototype.Resize = function()
{
 
     // Resize the busy box IFrame.
     if( BusyBox.IsBrowserIE() )
     {
          // Set the width by looking at its contents
          var div = frames[this.id].document.getElementById(this.DivID);
          this.IFrame.style.width = div.offsetWidth;
          this.IFrame.style.height = div.offsetHeight;
     }
     else
     {
          // Set the width to the value specified.
          this.IFrame.style.width = this.Width;
          this.IFrame.style.height = this.Height;
     }
}

// 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.
BusyBox.prototype.Center = function()
{
     if( !this.IFrame )
          return;
     
     // Center the BusyBox in the window regardless of the scroll positions
     var objLeft = (document.body.clientWidth - this.IFrame.offsetWidth) / 2;
     var objTop = (document.body.clientHeight - this.IFrame.offsetHeight) / 2;
     objLeft = objLeft + document.body.scrollLeft;
     objTop = objTop + document.body.scrollTop;
     
     // Position object
     this.IFrame.style.position = "absolute";
     this.IFrame.style.top = objTop;
     this.IFrame.style.left = objLeft;
}

// CacheImages:
// Pre-loads the images from the server and stores a reference to each
// image.  This allows the images to be presented to the user quickly
// for smooth image animation.
BusyBox.prototype.CacheImages = function()
{
     // Instantiate the array to store the image references
     this.Images = new Array(this.ImageCount);
     
     // Load all the images to cache into the aniframes array
     for(var i = 0; i < this.ImageCount; i++)
     {
          this.Images[i] = new Image();
          this.Images[i].src = this.ImageNamePrefix + i + this.ImageNameSuffix;
     }
}

// IsAnimating:
// Returns a boolean value representing the state of the animation.
BusyBox.prototype.IsAnimating = function()
{
     if( this.timeout_id == null)
          return false;
     else
          return true;
}

// IsVisible:
// Returns a boolean value representing the visibility state for the busy box.
BusyBox.prototype.IsVisible = function()
{
     var ifrm = document.getElementById(this.id);
     
     if( ifrm.style.visibility == "visible" && ifrm.style.width > 0 )
          return true;
     else
          return false;
}

// Animate:
// Performs the animation process.  This is accomplished by showing the "current"
// image in the animation sequence process; and then submitting a timed statement
// to execute in x number of milliseconds.

BusyBox.prototype.Animate = function()
{
     // Assign the current image sequence to display
     if( frames[this.id] )
          // browser supports frames
          frames[this.id].document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src;
     else
          // browser does not support frames
          document.getElementById(this.ImgID).src = this.Images[this.CurrentImageIndex].src;
     
     // Auto re-center and re-size the busy box.  This will force the busy box to
     // always appear in the center of the window even if the user scrolls.
     this.Resize();
     this.Center();
     
     // Increment the current image index
     this.CurrentImageIndex = (this.CurrentImageIndex + 1)%this.ImageCount;
     
     // Display the next image in (imageDelay value) milliseconds (i.e. 125)
     this.timeout_id = setTimeout(this.VarName + ".Animate();", this.ImageDelay);
}

// StartAnimation:
// Starts the animation process.
BusyBox.prototype.StartAnimate = function()
{
     if( this.IsAnimating() )
          return;
     
     this.Animate();
}

// StopAnimation:
// Stops the animation process.


BusyBox.prototype.StopAnimate = function()
{
     clearTimeout(this.timeout_id);
     this.timeout_id = null;
}

// Hide:
// Hides the busy box making it invisible to the user.

BusyBox.prototype.Hide = function()
{    
     this.StopAnimate();
     
     // Hide the busy box.

     this.IFrame.style.visibility = "hidden";
     this.IFrame.style.width = 0;
     this.IFrame.style.height = 0;

}

// Show:
// This function displays the busy box to the user.  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:
//          <body onbeforeunload="busyBox.Show();" >

BusyBox.prototype.Show = function()
{
     if( !this.Enabled )
          return;

     if( this.IsAnimating() || this.IsVisible() )
          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();
}

// --------------------------------
// Class Methods
// --------------------------------

// IsBrowserIE:
// Returns true if the executing browser it a Microsoft Internet Explorer browser.
BusyBox.IsBrowserIE = function()
{
     try
     { return (window.navigator.userAgent.indexOf("MSIE ") > 0); }
     catch(x)
     { return false; }
}

// IsBrowserNS:
// Returns true if the executing browser it a Netscape browser.
BusyBox.IsBrowserNS = function()
{
     try
     { return (window.navigator.userAgent.indexOf("Netscape") > 0); }
     catch(x)
     { return false; }
}

// IsBrowserFirefox:
// Returns true if the executing browser it a Firefox browser.
BusyBox.IsBrowserFirefox = function()
{
     try
     { return (window.navigator.userAgent.indexOf("Firefox") > 0); }
     catch(x)
     { return false; }
}

</script>
<iframe id=BusyBoxIFrame scrolling=no frameborder=0></iframe>
<SCRIPT>

var busyBox = new BusyBox("BusyBoxIFrame", "busyBox", 1, "Images/progress", ".gif",  125, 147, 207);
busyBox.Show();
</SCRIPT>
</form>
</BODY>
</HTML>
0
 
madina1Author Commented:
i dont see the image but i see white background and text says "Building data lists  "

i have a image :

//progress image
http://www.geocities.com/dsmportal/progress.gif     

//bacground image for that progress image
http://www.geocities.com/dsmportal/progress_bg.gif 
0
 
madina1Author Commented:
smaccari : you want me to copy and paste the whole js ?
0
 
ZvonkoSystems architectCommented:
I do not see why you want to use that script library.
You removed the original style and put your own fixed position style (and perhaps expect it to scroll)
You give the this.ImgID  to several elements and woder why they cannot be accessed...

Without seeing your page does this support frustrate you and us.
Either post your complette page here or zip it and uplode it like the gif images to a server.

0
 
smaccariCommented:
copy and paste the whole code to a new htm page to see if it's working.

If so, then yes, copy the JS from the frist SCRIPT tag.
0
 
madina1Author Commented:
smaccari :   as i have said that i see only the white background with the text on it "building list"

Zvonko: sorry if this is frustration and i will try to upload to the site, again please bare with me.
0
 
madina1Author Commented:
i upload the:

1) busybox.htm ( htm page (its include the javascript inside the page)
http://www.geocities.com/dsmportal/busybox.htm


2) images/progress.gif & images/progress1.gif & images/progress_bg.gif

http://www.geocities.com/dsmportal/images/progress.gif
http://www.geocities.com/dsmportal/images/progress1.gif
http://www.geocities.com/dsmportal/images/progress_bg.gif

3) busybox.css

http://www.geocities.com/dsmportal/busybox.css 


i hope this helps you

thanks
0
 
ZvonkoSystems architectCommented:
How about this:



<body onLoad="pleaseWait()">
<script>
function pleaseWait(){
  var theDiv = document.createElement("div");
  document.body.appendChild(theDiv);
  divContent  = "<div id='busy_box' align=center style='position:absolute; left:326px; top:275px; z-index:1'>";
  divContent += "<div id='message_body'>Building data lists ...</div>";
  divContent += "<div id='progress_bar'><img src='Images/progress.gif' width='189' height='11'></div>";
  divContent += "</div>";
  theDiv.innerHTML += divContent;
}
</script>
</body>




0
 
ZvonkoSystems architectCommented:
Or with CSS:

<style>
#waitDiv {
  display: none;
  position: absolute;
  left: 326px;
  top:275px;
  z-index:1;
}
</style>
<script>
function pleaseWait(){
  var theDiv = document.getElementById("waitDiv");
  theDiv.style.display="block";
}
</script>
<body onLoad="pleaseWait()">
<div id="waitDiv">
<div id='message_body'>Building data lists ...</div>
<div id='progress_bar'><img src='Images/progress.gif' width='189' height='11'></div>
</div>

</body>

0
 
madina1Author Commented:
Zvonko :

i get no errors but also i dont see anything in the screen
i tried both your examples
0
 
ZvonkoSystems architectCommented:
Check this:


<style>
#waitDiv {
  display: block;
  background-color: yellow;
  position: absolute;
  left: 326px;
  top:275px;
  z-index:1;
}
</style>
<script>
function pleaseWait(){
  var theDiv = document.getElementById("waitDiv");
  theDiv.style.display="block";
}
</script>
<body onLoad="pleaseWait()">
<div id="waitDiv">
<div id='message_body'>Building data lists ...</div>
<div id='progress_bar'><img src='http://www.geocities.com/dsmportal/images/progress.gif' width='189' height='11'></div>
</div>

</body>


0
 
madina1Author Commented:
Zvonko : i hate to say that when i paste your code in my .aspx code i do not see anything at all
but when i put the same code in the html page its showing the progress bar.

in my aspx page, i have couple of drodownlist that take lot of time to load because of heavy duty load, thats the reason i wanted to have a progress bar or some sort of indication to the user that still loading the page


//here is my .aspx code
//////////////////////////////start
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>People Reporting</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="C#" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

            <LINK href="Images/busyBox/busybox_styles.css" type="text/css" rel="stylesheet">
            
            <script language="javascript" src="Includes/Utilities.js"></script>
            <script language="javascript" src="Includes/_MouseOver.js"></script>
 
 
      <script type="text/javascript" language="javascript">
function pleaseWait(){
  var theDiv = document.getElementById("waitDiv");
  theDiv.style.display="block";
}
</script>
 
      </HEAD>
      <BODY onLoad="pleaseWait();" MS_POSITIONING="GridLayout">
      
      
      <div id="waitDiv">
      <div id='busy_box' align=center style='position:absolute; left:326px; top:275px; z-index:1'>
      <div id='message_body'>Building data lists ...</div>
      <div id='progress_bar'><img src='http://www.geocities.com/dsmportal/images/progress.gif' width='189' height='11'></div>
      </div>
 
            <form id="Form2" method="post" runat="server">
                  <table id="tblQuerybyZipCode" style="Z-INDEX: 110; LEFT: 348px; WIDTH: 312px; POSITION: absolute; TOP: 216px; HEIGHT: 42px"
                        cellSpacing="0" cellPadding="0" width="312" border="0">
                        <TR>
                              <TD style="WIDTH: 47px"><asp:label id="lblZipCode" runat="server" Width="55px" Font-Names="Verdana" Font-Size="11px">Zip Code</asp:label></TD>
                              <TD></TD>
                        </TR>
                  </table>
                  <TABLE id="tblQueryFreeTextSearch" style="Z-INDEX: 112; LEFT: 342px; WIDTH: 320px; POSITION: absolute; TOP: 272px; HEIGHT: 56px"
                        cellSpacing="0" cellPadding="0" width="320" border="0">
                        <TR>
                              <TD></TD>
                        </TR>
                  </TABLE>
                  <TABLE id="tblCreateHeadingReport" style="Z-INDEX: 111; LEFT: 680px; WIDTH: 312px; POSITION: absolute; TOP: 216px; HEIGHT: 40px"
                        cellSpacing="0" cellPadding="0" width="312" border="0">
                        <TR>
                              <TD></TD>
                        </TR>
                  </TABLE>
                  <TABLE id="tblQuerybyAdditionalOptions" style="Z-INDEX: 109; LEFT: 680px; WIDTH: 312px; POSITION: absolute; TOP: 80px; HEIGHT: 96px"
                        cellSpacing="0" cellPadding="0" width="312" border="0">
                        <TR>
                              <TD style="WIDTH: 76px; HEIGHT: 41px"><BR>
                                    <asp:label id="lblCIO" runat="server" Width="56px" Font-Names="Verdana" Font-Size="11px">CIO</asp:label></TD>
                              <TD style="WIDTH: 199px; HEIGHT: 41px"></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 76px; HEIGHT: 24px"><asp:label id="lblEmpType" runat="server" Width="65px" Font-Names="Verdana" Font-Size="11px">Emp Type</asp:label></TD>
                              <TD style="WIDTH: 199px; HEIGHT: 24px"></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 76px"></TD>
                              <TD style="WIDTH: 199px"></TD>
                        </TR>
                  </TABLE>
                  <TABLE id="tblQuerybyGeography" style="Z-INDEX: 108; LEFT: 348px; WIDTH: 312px; POSITION: absolute; TOP: 88px; HEIGHT: 88px; Design_Time_Lock: True"
                        cellSpacing="0" cellPadding="0" width="312" border="0" Design_Time_Lock="True">
                        <TR>
                              <TD style="WIDTH: 56px; HEIGHT: 29px"><BR>
                                    <asp:label id="lblCountry" runat="server" Width="40px" Font-Names="Verdana" Font-Size="11px">Country</asp:label></TD>
                              <TD style="HEIGHT: 29px"><asp:dropdownlist id="ddlCountry" style="Z-INDEX: 107; LEFT: 61px; POSITION: absolute; TOP: 12px; Design_Time_Lock: True"
                                          runat="server" Width="248" Design_Time_Lock="True" Height="88" AutoPostBack="True"></asp:dropdownlist></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 56px; HEIGHT: 25px"><asp:label id="lblState" runat="server" Width="40px" Font-Names="Verdana" Font-Size="11px">State</asp:label></TD>
                              <TD style="HEIGHT: 25px" colSpan="1"><asp:dropdownlist id="ddlState" style="Z-INDEX: 107; LEFT: 61px; POSITION: absolute; TOP: 36px; Design_Time_Lock: True"
                                          runat="server" Width="248" Design_Time_Lock="True" Height="88" AutoPostBack="True" Enabled="False"></asp:dropdownlist></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 56px"><asp:label id="lblCity" runat="server" Width="32px" Font-Names="Verdana" Font-Size="11px">City</asp:label></TD>
                              <TD></TD>
                        </TR>
                  </TABLE>
                  <TABLE id="tblQuerybyOrganization" style="Z-INDEX: 107; LEFT: 16px; WIDTH: 312px; POSITION: absolute; TOP: 88px; HEIGHT: 168px; Design_Time_Lock: True"
                        cellSpacing="0" cellPadding="0" width="312" border="0" Design_Time_Lock="True">
                        <TR>
                              <TD style="WIDTH: 90px; HEIGHT: 29px"><asp:label id="lblCategory" runat="server" Width="56px" Font-Names="Verdana" Font-Size="11px"> Category</asp:label></TD>
                              <TD style="HEIGHT: 29px">&nbsp;<asp:dropdownlist id="ddlCategory" style="Z-INDEX: 107; LEFT: 98px; POSITION: absolute; TOP: 6px; Design_Time_Lock: True"
                                          runat="server" Width="211" Design_Time_Lock="True" Height="88" AutoPostBack="True"></asp:dropdownlist>
                              </TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 90px"><asp:label id="lblOrg" runat="server" Width="48px" Font-Names="Verdana" Font-Size="11px">Organization</asp:label></TD>
                              <TD>&nbsp;<asp:dropdownlist id="ddlOrganization" style="Z-INDEX: 107; LEFT: 98px; POSITION: absolute; TOP: 37px; Design_Time_Lock: True"
                                          runat="server" Width="211" Design_Time_Lock="True" Height="88" AutoPostBack="True" Enabled="False"></asp:dropdownlist>
                              </TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 90px; HEIGHT: 42px"><BR>
                                    <asp:label id="lblCampus" runat="server" Width="48px" Font-Names="Verdana" Font-Size="11px">Campus</asp:label></TD>
                              <TD style="HEIGHT: 42px"><BR>
                                    &nbsp;&nbsp;<asp:dropdownlist id="ddlCampus" style="Z-INDEX: 107; LEFT: 98px; POSITION: absolute; TOP: 82px; Design_Time_Lock: True"
                                          runat="server" Width="211" Design_Time_Lock="True" Height="88" AutoPostBack="True" Enabled="False"></asp:dropdownlist></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 90px; HEIGHT: 27px"><asp:label id="lblBuilding" runat="server" Width="48px" Font-Names="Verdana" Font-Size="11px">Building</asp:label></TD>
                              <TD style="HEIGHT: 27px">&nbsp;<asp:dropdownlist id="ddlBuilding" style="Z-INDEX: 107; LEFT: 98px; POSITION: absolute; TOP: 110px; Design_Time_Lock: True"
                                          runat="server" Width="211" Design_Time_Lock="True" Height="88" AutoPostBack="True" Enabled="False"></asp:dropdownlist></TD>
                        </TR>
                        <TR>
                              <TD style="WIDTH: 90px"><asp:label id="lblFloor" runat="server" Width="48px" Font-Names="Verdana" Font-Size="11px">Floor</asp:label></TD>
                              <TD>&nbsp;<asp:dropdownlist id="ddlFloor" style="Z-INDEX: 107; LEFT: 98px; POSITION: absolute; TOP: 139px; Design_Time_Lock: True"
                                          runat="server" Width="211" Design_Time_Lock="True" Height="88" Enabled="False"></asp:dropdownlist></TD>
                        </TR>
                  </TABLE>
                  <asp:panel id="pnlReport" style="Z-INDEX: 102; LEFT: 5px; POSITION: absolute; TOP: 424px; Design_Time_Lock: True"
                        runat="server" Width="1009px" Design_Time_Lock="True" Height="285px" Visible="False">
                        <cc1:ReportViewer id="ReportViewer1" runat="server" Width="100%" Height="100%" Parameters="False"
                              Zoom="100%"></cc1:ReportViewer>
                  </asp:panel><asp:panel id="pnlPrivacyLink" style="Z-INDEX: 113; LEFT: 16px; POSITION: absolute; TOP: 8px"
                        runat="server" Width="992px" Height="32px">
                        <TABLE align="center" ID="Table1">
                              <TR>
                                    <TD>
                                          <asp:HyperLink id="hyperlink_Privacy" runat="server" ImageUrl="Images/privacy_link.gif" NavigateUrl="PrivacyLink_Popup.aspx">HyperLink</asp:HyperLink></TD>
                              </TR>
                        </TABLE>
                  </asp:panel>
                  <TABLE id="tblMain" style="Z-INDEX: 103; LEFT: 10px; POSITION: absolute; TOP: 56px; Design_Time_Lock: True"
                        cellSpacing="0" cellPadding="0" bgColor="white" border="0" Design_Time_Lock="True">
                        <TR>
                              <td><asp:image id="imgSearchCriteria" runat="server" ImageUrl="Images/PeopleReport_SearchCriteria.gif"></asp:image></td>
                        </TR>
                  </TABLE>
                  <asp:imagebutton id="imgbtnGenerate" style="Z-INDEX: 114; LEFT: 752px; POSITION: absolute; TOP: 280px; Design_Time_Lock: True"
                        runat="server" Design_Time_Lock="True" ImageUrl="images\PeopleReport_button_generate.gif" CssClass="borderless"
                        ToolTip="Generate a report"></asp:imagebutton><asp:imagebutton id="imgbtnReset" style="Z-INDEX: 104; LEFT: 680px; POSITION: absolute; TOP: 280px; Design_Time_Lock: True"
                        runat="server" Design_Time_Lock="True" ImageUrl="images\PeopleReport_button_reset.gif" CssClass="borderless" ToolTip="Reset all the search criteria"
                        CausesValidation="False"></asp:imagebutton><asp:image id="imgReportControl" style="Z-INDEX: 105; LEFT: 2px; POSITION: absolute; TOP: 344px"
                        runat="server" Width="1000px" ImageUrl="Images/PeopleReport_Report_Control.gif"></asp:image><asp:imagebutton id="imgbtnNewWindow" style="Z-INDEX: 106; LEFT: 872px; POSITION: absolute; TOP: 280px; Design_Time_Lock: True"
                        runat="server" Design_Time_Lock="True" ImageUrl="images\PeopleReport_button_new_window.gif" CssClass="borderless" ToolTip="Open in a new window"></asp:imagebutton><asp:dropdownlist id="ddlCity" style="Z-INDEX: 101; LEFT: 408px; POSITION: absolute; TOP: 148px; Design_Time_Lock: True"
                        runat="server" Width="248px" Design_Time_Lock="True" Enabled="False"></asp:dropdownlist><asp:dropdownlist id="ddlEmployeeType" style="Z-INDEX: 115; LEFT: 776px; POSITION: absolute; TOP: 123px"
                        runat="server" Width="211px"></asp:dropdownlist><asp:dropdownlist id="ddlCIO" style="Z-INDEX: 116; LEFT: 776px; POSITION: absolute; TOP: 99px; Design_Time_Lock: True"
                        runat="server" Width="211px" Design_Time_Lock="True"></asp:dropdownlist><asp:textbox id="txtReportTitle" style="Z-INDEX: 117; LEFT: 680px; POSITION: absolute; TOP: 224px"
                        runat="server" Width="304px" Height="21px"></asp:textbox><asp:textbox id="txtZipCode" style="Z-INDEX: 118; LEFT: 408px; POSITION: absolute; TOP: 228px"
                        runat="server" Width="110px" Height="21px" MaxLength="5"></asp:textbox><asp:label id="lblZipCodeExample" style="Z-INDEX: 119; LEFT: 520px; POSITION: absolute; TOP: 232px"
                        runat="server" Width="104px" Font-Names="Verdana" Font-Size="9px" Font-Italic="True">example: 3 or 30329</asp:label><asp:textbox id="txtFreeSearch" style="Z-INDEX: 120; LEFT: 349px; POSITION: absolute; TOP: 284px; Design_Time_Lock: True"
                        runat="server" Width="308px" Design_Time_Lock="True" Height="21px"></asp:textbox>
                  <asp:regularexpressionvalidator id="RegularExpressionValidator1" style="Z-INDEX: 121; LEFT: 624px; POSITION: absolute; TOP: 232px"
                        runat="server" Width="8px" Font-Size="Smaller" ValidationExpression="^[0-9]*$" ControlToValidate="txtZipCode"
                        ErrorMessage="Enter Zip Code" Display="Dynamic">*</asp:regularexpressionvalidator><asp:validationsummary id="ValidationSummary1" style="Z-INDEX: 122; LEFT: 656px; POSITION: absolute; TOP: 304px"
                        runat="server" Width="147px" Height="24px"></asp:validationsummary>

            </form>
      </BODY>
</HTML>

//////////////////////////////end
0
 
ZvonkoSystems architectCommented:
Check then this:

     <script type="text/javascript" language="javascript">
function waitFinished(){
  var theDiv = document.getElementById("waitDiv");
  theDiv.style.display="none";
}
</script>
     </HEAD>
     <BODY onLoad="waitFinished();" MS_POSITIONING="GridLayout">
     <div id="waitDiv"align=center style='position:absolute; left:326px; top:275px; z-index:1'>
     <div id='message_body'>Building data lists ...</div>
     <div id='progress_bar'><img src='http://www.geocities.com/dsmportal/images/progress.gif' width='189' height='11'></div>
     </div>

0
 
madina1Author Commented:
eggggrrrrrrrrrrrrrrrrrrrr

its sucking ur time and mine and very frustration

 :(

its not displaying any div

what do you think and i know that you are expert in javascript what do you suggest me?

im only trying to give some sort of message when the dropdownlist still loading

do you think you have some thing other good solution?

im ready to scrap if you want to and i can open a new question

thanks dude for ur help and i really really appreciate
0
 
ZvonkoSystems architectCommented:
Now that I see what you want to get, I see also what your problem is.
As long as page is loading you cannot do much display handling.
My last upper try was a hope that default html setting will show the wait gif and hide it at onLoad page finished.
But that seams not to happen for a busy havy loading page.

The only advice that I can give to you before I go to bed is this:
make a trivial wait.html page which imediately redirects to your havy loading aspx page.
on that trivial page you can have the wait gif.

Like this:

     <BODY onLoad="location='http://www.experts-exchange.com/';//or your aspx">
     <div id="waitDiv"align=center style='position:absolute; left:326px; top:275px; z-index:1'>
     <div id='message_body'>Building data lists ...</div>
     <div id='progress_bar'><img src='http://www.geocities.com/dsmportal/images/progress.gif' width='189' height='11'></div>
     </div>
     </body>



Good Night!

0
 
madina1Author Commented:
my boss does not want to have a seperat html page to display "please wait...or image"  

what do you this point.

thanks
0
 
ZvonkoSystems architectCommented:
Then you have to do more tricks on same page.
The trick is that you FLUSH the output after the upper first part is written, and after the flush you continue the output on the same page. Then you need no redirect. But need to hide the first part as described before in the onLoad event handler.
But I cannot test that scenario for you.
0
 
madina1Author Commented:
do you have or do you know or any links that have similar scenario they come across?

please wait message when its loading or i should say how about gmail thing... you get "loading... " message whenever you logon to gmail account

something like this.... im flexible to change, i dont mind using text rather then image

what do you think?

thanks for reply.
0
 
madina1Author Commented:
i scrap the idea of implementing the above question but still i thanks to Zvonko
0
 
ZvonkoSystems architectCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.