HTML / CSS 3: Progress bar example

I've been working with the progress element and trying to get it to look nice across different browsers. It doesn't help that most of the styling elements are pseudo elements.

Here's the MDN page on the progress element.

The big issue I ran into was trying to style the element for Chrome and Firefox.
Chrome uses the following styles to change the look of the element:

progress::-webkit-progress-bar
This will style the background of the progress bar.

progress::-webkit-progress-value
This will style the growing value inside of the progress bar.

Firefox uses the following value:
progress::-moz-progress-value
This will only let you style the growing value inside of the progress bar. You can't style the background.

The other catch is you can't combine the values in your css. For example this won't work

progress::-moz-progress-value,
progress::-webkit-progress-value{

}

None of your styles will take and the bar will fall back to it's unstyled default.

Here's the html I was playing with.
Here's a link to a jsFiddle of the following code

/* http://www.hongkiat.com/blog/html5-progress-bar/ */
.progress-bar{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Can't share styles. Chome gets angry */
/* FF style the progress bar */
.progress-bar::-moz-progress-value{
    background: #3399ff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

/* Chrome style the background of the progress bar */
.progress-bar::-webkit-progress-bar{
    background: silver;
    border-radius: 12px;
}

/* Chrome style the progress value */
.progress-bar::-webkit-progress-value{
    background: #3399ff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

Flex : HTML tooltip made simple

I'm currently working on a project that required a fancy looking tooltip. Unfortunately the native tooltip object in Flex doesn't support htmltext. By accident I found out that a swc I was trying to use (Libagic) for a Edit-In-Place TextInput included a class you can use to override ToolTip called HTMLToolTip. You can read about it here. Right-click on the flex example at the bottom of his post to view the source.

Javascript: Adding options to a select element

I've started working with javascript more and more now. I'm leaning away from using innerHTML and started creating the objects instead. As with anything javascript related Internet Explorer will cause more problems than solutions.

When you're creating a new option element that will be added to a select element IE wants to do it one way while everyone else can handle it another way. I'll show the first way I tried to tackle it, and then show the cross browser way to handle it.

I set up a try, catch block that would try IE first. If an error occurred it would fall back to the second method that works in most browsers.

//IE code
try
{
  obj_option = document.createElement('<option value="test value"/>');
  obj_text = document.createTextNode("option text value");
  obj_option.appendChild(obj_text);
}
//everyone else
catch(e)
{
  var obj_option = document.createElement('option');
  
  obj_option.text = "option text value";
  obj_option.value = "test value";
}

Internet Explorer wants to place the value inside of the createElement method while other browsers can handle the assignment on the object property. Also IE wants the text added with createTextNode. It's a pain to have two methods for something so simple. After a bit of experimentation and research I have a method that works for all browsers.

var obj_option;
var obj_text;

obj_option = document.createElement('option');
obj_text = document.createTextNode("option text value");
obj_option.appendChild(obj_text);
obj_option.setAttribute("value", "test value");

This is much cleaner and easier to maintain. setAttribute is also a handy method for assigning non standard properties to an object. Some client-side form validation scripts want to add proprietary properties to a tag. Using setAttribute is the easiest way to create them.