Category: JavaScript

Div, IFrame, Form: the CSS version of Scissor, Paper, Stone

An interesting browser (mostly, it has to be said, Internet Explorer) rendering issue has produced an slightly odd workaround. The problem arises from the rendering of form elements, specifically dropdowns, by the browser. These are registered as windows components and hence are rendered somewhat outside of the other HTML elements. (This is not true in Firefox and other Mozilla based browsers which have their own rendering. It is painfully true of the old Netscape 4 where all form elements show through, but there’s no fix for that at all.) The same rendering issue is also true of frames, iframes and embedded objects (albeit Flash can now be specified with a transparent background).

This gives the situation where a layer (in a div tag) over the top of a dropdown box leaves half the select box visible through the layer. E.g.

Peekaboo!
I’d like to be on top

The code for this follows: 





Peekaboo!





      I'd like to be on top

The solution I’ve found is that IFrames can be rendered on top of select tags. Not much use in itself, but ever since Internet Explorer 5.5 it’s been possible to give IFrames a Z-Index and render layers on top of them. So in the rendering scheme of things:

  • select beats div
  • iframe beats select
  • div beats select

Hence the ‘Scissors, paper, stone’ reference of the title. The order does seem somewhat circular

To solve the IE rendering problem we can insert an iframe between the div and the select with the same dimensions as the div tag over the top, as follows:

Peekaboo!
I’d like to be on top

With the following HTML code





Peekaboo!






      I'd like to be on top

JavaScript Haiku

There are a few sites on the web which will generate haiku’s using a set of code rules. I think I can lay claim to have written what could be the world’s first (and only) haiku actually in JavaScript. I’m quite interested in the idea of code being poetry, but just generally not interested enough to do anything about it…

It even has a title which relates to its content, which is:

Fear of tomorrow

now = new Date();
day = now.getDate();
alert(day+1);