10
Jun 13

The ‘Disabled’ attribute in Internet Explorer

Given the market share that IE enjoys it is a victory for you to make your website work in IE same as chrome and other modern browsers. Development for IE is difficult and the developer tools provided by IE makes this experience awful .

Lets get to the point of this article which is to explain how the ‘disabled’ attribute works in IE . Given  below is the specification of the ‘disabled’ attribute from W3C specification.

disabled [CI]
When set for a form control, this boolean attribute disables the control for user input.
When set, the disabled attribute has the following effects on an element:

Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

This attribute is inherited but local declarations override the inherited value.

How disabled elements are rendered depends on the user agent. For example, some user agents “gray out” disabled menu
items, button labels, etc.

 

This clearly mentions that ‘disabled’ attribute only works on BUTTON INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA tags and the general policy of browser is if you use any attribute which are not authorized to use in tag then browsers neglect them but they can be accessed using javascript. But IE isn’t that kind in this case . If you apply ‘disabled’ on div tag, IE takes it seriously and makes div tag disabled . So what this means is that we not only  have any control event on div  but also according to “This attribute is inherited but local declarations override the inherited value.” rule in W3C disable specification, IE applies disabled attribute on nested elements in div tag. So be careful.

 


06
May 08

Identify the browser used by the client

You may want to know the details of the browser used by the various visitors to your site. Lets see how the navigator object can be used to identify the browser details of the user. The navigator object has a property named ‘appName’ which will do the trick.The code below is all that is needed:

navigator.appName

For Ex.

function identifyBrowser()

{

alert(“You seem to be working on the “+navigator.appName+” browser”);

}

The navigator method has a few other properties like:

appCodeName

appVersion

language

mimeTypes[]

platform

plugins[]

userAgent

Click here to view the example