?
Solved

busybox... image is not displaying

Posted on 2006-04-03
38
Medium Priority
?
1,606 Views
Last Modified: 2007-12-19
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;
}
0
Comment
Question by:madina1
  • 20
  • 12
  • 4
  • +2
38 Comments
 

Author Comment

by:madina1
ID: 16367026
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
 
LVL 2

Assisted Solution

by:udayms
udayms earned 80 total points
ID: 16367932
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
 

Author Comment

by:madina1
ID: 16370798
oops i missed that single quote

but still image is not showing

im getting a white blank div
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 63

Accepted Solution

by:
Zvonko earned 260 total points
ID: 16373503
Is your page accessible online?
0
 
LVL 17

Assisted Solution

by:BogoJoker
BogoJoker earned 80 total points
ID: 16373549
if you give the img an alt attribute, does the alt value show?
alt=testing
0
 

Author Comment

by:madina1
ID: 16373625
nothing is coming

im getting a white blank div without any image

thanks for your reply, apprecate if you please please look
0
 

Author Comment

by:madina1
ID: 16373630
>>>Is your page accessible online?

unfortunately not
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16373710
Your //NEW CODE HERE removes one parameter: imageNameSuffix
Do you see that?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16373747
And it seams you do not use the functionality of that script library at all!
Why do you mess with it then?

0
 

Author Comment

by:madina1
ID: 16373767
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
 
LVL 9

Assisted Solution

by:smaccari
smaccari earned 80 total points
ID: 16373771
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
 

Author Comment

by:madina1
ID: 16373786
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16373804
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
 

Author Comment

by:madina1
ID: 16373819
im getting this error:

line 304
char: 6
error: BusyBox is undefined
0
 

Author Comment

by:madina1
ID: 16373823
Zvonko : let me try this
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16373858
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
 

Author Comment

by:madina1
ID: 16373889
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
 

Author Comment

by:madina1
ID: 16373905
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
 
LVL 9

Expert Comment

by:smaccari
ID: 16373912
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
 

Author Comment

by:madina1
ID: 16373919
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
 

Author Comment

by:madina1
ID: 16373941
smaccari : you want me to copy and paste the whole js ?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16373946
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
 
LVL 9

Expert Comment

by:smaccari
ID: 16373957
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
 

Author Comment

by:madina1
ID: 16374008
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
 

Author Comment

by:madina1
ID: 16374241
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16375067
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16375121
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
 

Author Comment

by:madina1
ID: 16375298
Zvonko :

i get no errors but also i dont see anything in the screen
i tried both your examples
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16375551
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
 

Author Comment

by:madina1
ID: 16375718
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16376625
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
 

Author Comment

by:madina1
ID: 16376802
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16376884
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
 

Author Comment

by:madina1
ID: 16381166
my boss does not want to have a seperat html page to display "please wait...or image"  

what do you this point.

thanks
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16383466
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
 

Author Comment

by:madina1
ID: 16384077
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
 

Author Comment

by:madina1
ID: 16441384
i scrap the idea of implementing the above question but still i thanks to Zvonko
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16443355
You are welcome.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question