ASP.NET Control : Warning the User when Caps Lock is On

Many of the websites (e.g. Online Banking websites) have a secure area which is only accessible to the user after he provides correct Username/Password. Some of them have case-sensitive passwords.

If a user is not aware (while entering the password) whether his CAPS lock key is ON then his login will fail as the password is case-sensitive.

This is one of the features in Windows based applications that was lacking in Web based application. You all might have noticed it while logging in Windows XP/Windows Server 2003, that a “Speak-out” bubble is displayed with a message that “CAPS Lock is On” while entering the password if the CAPS lock is On.

This feature was highly desired in Web Applications until today when i came across a nice article at 4GuysFromRolla about an ASP.NET control which provides the exact functionality.

Scott Mitchell has explained the working of this control in detail in this article.

Here is the link to the article: [ Warning the User when Caps Lock is On ]

Animated GIF bug in Internet Explorer 7

Today I attempted to get a progress indicator to work in IE7. My idea was that I’d have an animated GIF on a page, hidden with style=”display: none;”. Then, in the onclick event I’d toggle it visible again using JavaScript, so that the progress indicator would animate as the page was submitted and the next page was loading.

Surprise, surprise, it didn’t work. IE simply refused to animate the GIF when the form was submitted. I googled and googled with no avail – until I ran into a simple and working solution. I won’t present the non-working ones here, they can be found with any relevant keywords.

The working one is the following in its entirety: Use a div to display the indicator as a background image. In addition to toggling display, also toggle visibilty.

In my HTML, I have two divs, one with an id of Indicator, and in it another one with id image and some text. The JavaScript goes as follows.

1. First, in the function called from the onload event of body I hide the outer div:

document.getElementById(‘Indicator’).style.display = ‘none’;

document.getElementById(‘Indicator’).style.visibility = ‘hidden’;

2. Then, in the function called from the onsubmit event of the button input in the form, I show the outer div and set the background image for the inner one:

document.getElementById(‘Indicator’).style.display = ‘block’;

document.getElementById(‘Indicator’).style.visibility = ‘visible’;

document.getElementById(‘image’).style.backgroundImage = ‘url(indicator.gif)’;

That’s it!

I have tested this in IE7, but it might also work in IE6.