Monthly Archives: July 2005

London Terrorist Bomb Attacks

Update: July 12, 10.45pm
After the sudden surge of up to the minute information that is commonly called ‘news’, the real story and figures emerge. There are now 53 people confirmed dead, still approximately 700 people injured. The Australian Foreign Affairs department has now confirmed that there are six Australians in hospital in London, two of which are still in critical condition while one of them is in intensive care. Probably not surprising, there have been serious bomb scares reported since the bombings, which caused major evacuations.

The head of the Metropolitan Police, Sir Ian Blair, made a comment that further attacks are ‘likely’ but the timing of such events is unknown. Exactly how is that different from the situation they were in before the latest attack happened? There have been reports various major cities around the world would be targeted in the last few months, so it isn’t like they didn’t know it was possible or likely – they simply just didn’t know when. I really don’t think the terrorists are going to put the date, time and targets on a billboard any time soon.

;\

Update: July 9 8:30am
The initial reports of six or seven explosions were inaccurate. There were four explosions, which roughly spanned a 45 minute period. Three of the explosions where in the underground and one on the bus. There are now 37 people confirmed dead and over 700 injuries. The underground has been closed until further notice, which is a precedent. Responsibility for the bombing has been claimed by a group apparently related to Al Qaeda; though they all do these days, its nearly as common as children with ADD/ADHD.


There have been multiple explosions in London. At this stage, the reports are that six or seven explosions have taken place, primarily in the underground subway except for an explosing involving a double decker bus. Early reports are confirming two fatalities and at least 90 casualties. Prime Minister Tony Blair has given a statement and has confirmed that it was a terrorist attack that was timed to coincide with the G8 summit. During his address, it was clear he has been shaken by the event.

To think they would strike directly after the series of Live8 concerts which were held to Make Poverty History and the very day after London was announced as the host for the 2012 Olympic Games. You would think the world, including the terrorists, would be happy that the well off countries are banding together to try and help the less fortunate, alas no.

If you are looking for audio/video, the ABC News Website currently has feeds of it:

Flickr also have a photo pool available.

Sickening.

Select, Option, Disabled And The JavaScript Solution

As I mentioned recently, there is a bug in Internet Explorer that stops you from disabling options in a select/dropdown element. At the time, I felt this was quite poor so I set about finding a solution. For the impatient among us, you can step straight to implementing it if you want.

Unsuccessful Ideas

In an attempt to save everyone else some time, I’m going to list the different ideas, methods and combinations of, I attempted that were unsuccessful:

  1. Attempt: use the CSS pseudo :hover against the <option> element.
    Problem: Internet Explorer doesn’t support the :hover pseudo class on arbitrary elements.
  2. Attempt: Wrap the contents of the <option> element in an anchor and use the :hover on that instead.
    Problem: The <select> tag is considered a replaced element, which means the tag is replaced with your operating systems equivalent. As a by product, no other HTML element is valid within the <option> tag.
  3. Attempt: Use the JavaScript onmouseover and onmouseout events on the <option> element to make the element appear as though it was disabled.
    Problem: Internet Explorer doesn’t support the onmouseover and onmouseout events against an <option> element.
  4. Attempt: Use the JavaScript onclick event on the <option> element to check if the disabled attribute has been applied, act accordingly if it has been.
    Problem: Again, Internet Explorer doesn’t support the onclick event againt the <option> element.
  5. Attempt: Use the JavaScript onclick event against the <select> element, to again check if an <option> has the disabled attribute in use.
    Problem: Internet Explorer doesn’t support the onclick event against a <select> element.

Successful Ideas

The solution to this problem is comprised of two parts. Firstly, knowing when you make a selection or change the current selection. Secondly, keeping track of the current selection, so you can revert to it in case the user selects a disabled option in the list. If those two things can be achived, then we can emulate the disabled attribute on an option element

Part 1
You can get around not having an onclick event against the option element by using an onchange event against the select. Knowing when you click an option is mandatory, as it lets you know when/if to check that the selected option is disabled. This is taken care of, we can move on.

Part 2
Next up is keeping track of the ‘currently selected’ item. Generally, the first tool in the chest that most people reach for in this case is an onclick event. However, since we’re working with a browser that doesn’t implement those events on the element(s) in question, another solution was needed. The next event that would match what we want to do is onselect, however it isn’t implemented in IE either. Thankfully, the onfocus event is our savior.

How It Works

First thing is making sure that the code only executes on the correct browsers. You could use browser sniffing techniques or proprietary JavaScript functions to isolate IE, however that can be inconsistent. Since we’re targeting IE, it seems more than reasonable to use a conditional comment. In case you are unfamiliar with them, a conditional comment looks like a standard HTML comment to every non-IE browser; however IE interprets them and allows the author very simple conditional testing. We’re going to use this simple testing to include an external JavaScript file.

If the JavaScript does execute, it checks to see if you have any <select> elements in the page. If you do, it iterates through them, attaching an onchange and an onfocus event to each one. At the same time, the disabled option elements (if there are any) are also highlighted with the disabled text colour.

At this point, you have nothing else to do. The onload event and the two functions will do everything for you from this point. The one caveat is if you are manipulating the disabled attributes on the options through the DOM. In which case, you do have to call the emulate function, passing into it a reference the <select> you are manipulating.

The JavaScript

To make this work, an event and two functions are used. They are listed here so you can glance over them:

  1. window.onload = function() {
  2. if (document.getElementsByTagName) {
  3. var s = document.getElementsByTagName("select");
  4. if (s.length > 0) {
  5. window.select_current = new Array();
  6. for (var i=0, select; select = s[i]; i++) {
  7. select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
  8. select.onchange = function(){ restore(this); }
  9. emulate(select);
  10. }
  11. }
  12. }
  13. }

The restore function returns the selected item to its previous selection, if the newly selected item is disabled.

  1. function restore(e) {
  2. if (e.options[e.selectedIndex].disabled) {
  3. e.selectedIndex = window.select_current[e.id];
  4. }
  5. }

The emulate function changes the font colour of all options in a <select> element with the disabled attribute set. The colours used on lines 4 and 7 are CSS2 colour names, which are considered system colours. System colours reflect what your current computer settings are, so they should change with your current desktop theme (at least that is my interpretation of it).

  1. function emulate(e) {
  2. for (var i=0, option; option = e.options[i]; i++) {
  3. if (option.disabled) {
  4. option.style.color = "graytext";
  5. }
  6. else {
  7. option.style.color = "menutext";
  8. }
  9. }
  10. }

Implementing

Using this script is meant to be as simple as possible. All you have to do is download the external JavaScript file. Upload it to your site and place a single conditional comment in your HTML, such as:

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="select-option-disabled-emulation.js"></script>
  3. <![endif]-->

Examples

Following are some simple examples to display what Internet Explorer renders at the moment, through either html/xhtml/quirk/compliant states. There are also two examples of how the script functions as well, simple but they demonstrate it none the less.

Follow Up

After this post being active for over a year now, it continues to draw in consistent traffic from around the internet. Even though this was a proof of concept and not a complete solution, it has saved many people a lot of time. Plenty of people have taken the basic idea I started with and extended it, which I think is fantastic. Recently, a couple of people have sent through comprehensive techniques which are either built on my initial work in some way or inspired by it. These solutions are out perform my simple proof of concept, so they are definitely worth noting for everyone to use:

  • Apptaro created an elegant solution using a DHTML Behaviour file. These behaviour files only execute in Internet Explorer which is a great way isolating it from interfering with other web browsers.
  • Kaleb Walton has implemented a JavaScript object oriented version of my proof of concept. Kaleb’s version implements the fix for a standard dropdown, a listbox and a multi-select listbox.

Both of the above examples are excellent, so you should pick which ever you feel is best going to suit your needs.