Thus, the variable is no longer bound to the scope of the parent function or object instance, but accessibile to every other script through the global “window” object.

Example

See https://gist.github.com/1092039

Avoid accidentally creating global variables by always declaring them with ‘var’.

This problem gets especially frustrating when expecting variables to be private, bound to instances of an object. You soon realize that your instances’ internal states change unexpectedly.

When trying to dynamically add an itemRenderer to a component in Flex you cannot specify it by string path as in MXML mode. Doing so you get a TypeError similar to the following:

Type Coercion failed: cannot convert “path.to.YourItemRenderer” to mx.core.IFactory

Solution: use ClassFactory()

Working in AS3 with dynamic objects, not MXML references, you need to instantiate the itemRenderer with a ClassFactory. This causes the itemRenderer to implement the required mx.core.IFactory interface.

Example

import mx.core.ClassFactory;
import path.to.YourItemRenderer;

var col:DataGridColumn = new DataGridColumn();
col.itemRenderer = new ClassFactory(YourItemRenderer);

The problem is clearly visible when building a particular search box design, with the search button included in the search field. Internet Explorer will allow long search queries to slide under the search button.

A feasible workaround for IE’s padding problem is to wrap the search button and the input field in a container that you can style to look like an input.

Example

See a working example of the inline search box.

Inline search box that looks and works fine in all major browsers.

HTML Markup

<form action="#" method="get" >
  <input type="text" name="q" value="Search for..."/>
  <button type="submit">Search</button>
</form>

CSS

form{
  padding:1px 5px 1px 3px;
  border:3px solid #ebebeb;
  ...
}

input{
  border:none;
  border-color:transparent; /*Fix IE*/
  ...
}

button{
  width:16px;
  height:16px;
  outline:none;
  border:none;
  background:#5AB300 url(button_search.png) left center no-repeat;
  text-indent:-999px;
  ...
}

Removing the input border

Using the border: none property will remove the input’s border from most browsers but not for Internet Explorer. In order to fix IE’s input border you need to also add border-color: transparent. More about this issue on IE’s buggy border property in this article.

The search button

The search button is placed inline with the input element but inside the container that looks like an input. There is a reason for this placement instead of assigning a negative left margin to the button. In Internet Explorer the input will not apply padding-right correctly so the input’s text value will slide under the button for long strings.

I wrote more about this problem in an article about IE’s problem with right padding on input elements.

Accessibility

When you disguise the input by removing its border the element will still show its true dimensions when in focused state. This is caused by the outline property you can set with CSS. The outline on input elements is very prominent in Safari as a bright blue halo around the editable content area.

Focused input on Safari shows a bright blue halo

Due to accessibility concerns my suggestion is that you don’t remove the outline from the input. Users used with Safari will understand that they’re actually typing in an input there.

If, however, there are other concerns that prevent you from using Safari’s blue halo you can disable it by using:

input{
  outline:none;
}

Focus state workaround

When disabling the browser’s default focus style on input elements I strongly suggest that you at least offer an alternative. You can do so with JavaScript by assigning a modifier class name on the container that would change its border or background color when the input is focused.

Here’s a quick jQuery workaround for the above example:

$('input')
  .bind('focus', function(){
    $(this).parents('form').addClass('focus');
  })
  .bind('blur', function(){
    $(this).parents('form').removeClass('focus');
  })

And the required CSS:

.focus{
  border-color:#09c; /* a blue border color */
}

.focus input{
  outline:none; /* cancel the browser's default input outline */
}

Alternative for the browser’s default focused state by using a modifier CSS class

Hidden text

Another accessibility concern you should have is the search button’s text value. I used an image background for the button and hid the text. You might think I could have used an input type=”image” or I could have just let the button tag empty, but I didn’t.

I chose to hide the text off-screen, but leave it contextually in the page structure, because a screen reader would actually interpret that text to a visually impaired user.

button{
  text-indent:-999px;
  ...
}

This is also useful in an environment with little or no CSS support because it will keep the search box usable by replacing the arrow I used with a valid control.

This problem is clearly visible when placing another element over the input, a common case in search box design patterns.

Demo

Have a look at the live code example.

Right padding problem on input elements in Internet Explorer.

The input’s text value slides under the button element in Internet Explorer, while in other browsers it is correctly hidden because of the padding property.

Code Example

HTML markup

<input type="text" name="textInput" />
<button type="submit">Search</button>

CSS

input{
  padding-right:30px;
  ...
}
button{
  margin-left:-30px;
  ...
}

Workaround

Since there’s no obvious solution for Internet Explorer’s right padding problem, a feasible workaround is to visually fake the input. You can do so by wrapping the markup in a container that you can style to  look as an input field.

I’ve written a separate article to tackle this workaround for building an inline search box.

Update April 2010

As noted in allex’s comment below there is a simpler solution:

input{
  border:0
}

I have tested this out and it works fine on all the major browsers (IE 6+, Firefox 3+, Safari 4+, Chrome and Opera).

Example

See a working example on the demo page.

Internet Explorer removes input border when using border: none and border-color: transparent

HTML markup

<input type="text" value="textInput" />

CSS

input{
  border: none;
  border-color: transparent;
}

Side effects

Be careful when using border-color: transparent with border: none because they will impact the input’s box model by removing the border’s dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.

Two floated 50% width elements in a container that has an odd width will clear each other in Internet Explorer. One of them will always clear and move under to the next level.

Reason

This issue is due to IE’s way to calculate sub-pixel dimensions. Internet Explorer will approximate to the next higher integer any half-pixel dimension.

If you are dealing with two floated elements 50% in width that are nested in a 1001px width container, IE will not work with two 500.5px elements but two 501px ones. This is the reason why the last element in the sequence will always clear the other one, because they will not both fit the container’s given dimension.

Example

CSS:

#container{
  width:1001px;
}
.floated{
  width: 50%;
  float: left;
}

HTML Markup:

<div id="container">
  <div class="floated">
  ...
  </div>
  <div class="floated">
  ... 
  </div>
</div>

Browsers affected

You will encounter this bug in IE6, IE7 and it is yet to be fixed in IE8.

Example:

var checkValue = function(value){
    var check = "";

    if(value){
       check = "it was "+value;
    }
    else{
       check = "no value";
    }

    return check;
}

// number; returns "no value"
console.log(checkValue(0)); 

// string; returns "it was 0"
console.log(checkValue("0"));

Related reading:

Falsy values – extract from “JavaScript: The Good Parts”
Truthy and falsy in JavaScript

Example:

var num = Number("string value");
console.log(num); // returns NaN
console.log(typeof num); //returns 'number'

Background:

NaN stands for Not-a-number.
It is used to indicate that a value is not numeric.