Need a help in Progress Indicators

[rellaboyina]

Hi

I need a small help from you all. I had a form which consists of 2 fields username and password to be entered. It also consists of a Log-in button. Once we enter the username and password, if we click on the Log-in button, it should display a progress indicator image which needs to be spinning round till the page gets navigated to the next page if the username and password are correct.

Here I am posting my code:

<div id="progress_indicator_image" style="display: none; padding-right: 15; padding-bottom: 2; background-image: url('images/indicator.gif'); background-repeat: no-repeat;">&nbsp;</div>
<div id="progress_indicator_text" style="display: none;">Logging in...</div>

where the image indicator.gif is the image that needs to be spinning till the log-in page gets navigated to the next page and the text" Logging in" will be displayed next to the image.

Here the problem I am facing is that :

The image is spinning correctly in IE6.
The image gets displayed but not spinning in IE7.
The image doesn't gets displayed even in FireFox.

Could anyone help me out in resolving this problem as it will be very helpful for my application.

Thanks in Advance.

[phvfl]

Hi,

What script are you using to show the image and the text, could you please post the script that does this.

[rellaboyina]

Hi

The script that was used by me was a mason perl script which is a combination of perl, html, javascript and mason.

[phvfl]

Hi

The script that was used by me was a mason perl script which is a combination of perl, html, javascript and mason.

Could you please post the script that handles showing the image?

[rellaboyina]

Could you please post the script that handles showing the image?

The script which I am using now is :

<div id="progress_indicator_image" style="display: none; padding-right: 15; padding-bottom: 2; background-image: url('images/indicator.gif'); background-repeat: no-repeat;">&nbsp;</div>
<div id="progress_indicator_text" style="display: none;">Logging in...</div>

Could any one please help me out?

[drhowarddrfine]

I assume this is an animated gif? If not, what causes the spinning animation? (In which case it's not a html/css question.)

You have 'display:none' in your css so it shouldn't display at all.

In addition, you do not have units specified for your values. You need 'px' or 'em' for your dimensions.

[rellaboyina]

I assume this is an animated gif? If not, what causes the spinning animation? (In which case it's not a html/css question.)

You have 'display:none' in your css so it shouldn't display at all.

In addition, you do not have units specified for your values. You need 'px' or 'em' for your dimensions.

Yes it is an animated gif. Though I have removed "display:no ne" from the above script, the image doesn't gets spinning. Could you please throw some light on how to use the units "px" or "em"?

The main problem here is the versiona nd type of the browsers we use.

It is working fine in IE 6.0, Safari and not working in IE 7.0 and Firefox.

Please update me on the same.

[rellaboyina]

Yes it is an animated gif. Though I have removed "display:no ne" from the above script, the image doesn't gets spinning. Could you please throw some light on how to use the units "px" or "em"?

The main problem here is the versiona nd type of the browsers we use.

It is working fine in IE 6.0, Safari and not working in IE 7.0 and Firefox.

Please update me on the same.

If I remove "dispaly:no ne" from the above script, the text and the image gets displayed right from navigating to that page and before I click the Log-in button. But they should get dispalyed and start spinning once I click the Log-in button.

[rellaboyina]

If I remove "dispaly:no ne" from the above script, the text and the image gets displayed right from navigating to that page and before I click the Log-in button. But they should get dispalyed and start spinning once I click the Log-in button.

Could anyone help me on this?

[drhowarddrfine]

Is this online? Can we have a link?

[rellaboyina]

Is this online? Can we have a link?

This is not an online link. It is a web application where the code is palced in the *ix box and the url will be accessed from the UI with the user.

[rellaboyina]

This is not an online link. It is a web application where the code is palced in the *ix box and the url will be accessed from the UI with the user.

Could anybody help me out on this please?

[drhowarddrfine]

It's difficult to help because we can't duplicate the problem.

[rellaboyina]

It's difficult to help because we can't duplicate the problem.

Can anyone help me please?

[Death Slaught]

Try asking in the JavaScript forum, you should be able to make the image appear with onClick, and a function.

We understand that you need help, and we're doing all we can, so please don't repeat yourself there's only so much we can do.

Thanks, Death