Archive for June, 2006

5D

Tuesday, June 20th, 2006
Yep. I got a new camera. A cool, all 12.8 Megapixel Canon 5D.

Having tested it for a wedding party, I can say I like the speed of taking shots. It’s not fit for action sports with its 3 photos per second, but the buffer is huge so it allows me to keep on clicking. Also, write speed to the memory card has become a real lot quicker (blink once) than with the 300D. What I like best is that finally my flashphotos seem to come off nice. Like the E-TTL2 system, which should somehow be supported in the 300D, finally seems to really work. Here’s what the experts think (review at dpreview.com).

Anyway, I got rid of the 300D through Dutch ebay variant www.marktplaats.nl. I’ll come up with some additional user experiences soon..

DropDown boxes

Saturday, June 10th, 2006

Today, I was struggling with drop-down boxes in Internet Explorer. We used tooltips in an (IE only) web application I was working on. The tooltips worked fine. However, the drop-down box elements around the same spot seemed to always stay in front off the tooltip (a DIV element), no matter what I tried. Manipulating any element’s z-index or disabling the select-element did just not work. IE users can check it down here by hovering over the link.

hover over here

Done with the following HTML code:

<p><a href="#"
  onmouseover="document.getElementById('box1').style.visibility='inherit'; return false;"
  onmouseout="document.getElementById('box1').style.visibility='hidden'; return false;">
  hover over here</a></p>
  <div style="position: absolute; visibility:hidden; background-color:lightyellow;
    z-index:100; font-size: large; border-style:double; border-color:black"
    id="box1"><p>In IE,<br/>the first part of the popup<br/>
  is blocked by the selectbox.</p></div>

<p><select>
  <option selected="true">select a or b</option>
  <option>a</option>
  <option>b</option>
  </select>
</p>

After googling a bit, it seems to be a long known bug. The ugly thing is: there is no solution. Not a real one at least. The select element is displayed in a native windows (ActiveX) control, and therefore treated differently from e.g. div elements.

Maybe we could wait until Internet Explorer 7 is magically installed on your windows machine, but until then, avoiding the problem is the best way (e.g. position the div on another spot). If not possible: make the drop down boxes hidden when you show the tooltip.

Hover over here to test again.

This is done with some extensions to the previous HTML code:

<p><a href="#" onmouseover="document.getElementById('s2').style.visibility='hidden';
  document.getElementById('box2').style.visibility='inherit'; return false;"
  onmouseout="document.getElementById('s2').style.visibility='inherit';
  document.getElementById('box2').style.visibility='hidden'; return false;">
  Hover over here to test again.</a></p>
  <div style="position: absolute; visibility:hidden; background-color:lightyellow;
  z-index:100; font-size:large; border-style:double; border-color:black"
  id="box2"><p>When this tooltip is popped up,<br/>
  the select element underneath here is hidden.</p></div>

<p><select id="s2">
  <option selected="true">select a or b</option>
  <option>a</option>
  <option>b</option>
</select></p>

A bit nicer tooltip code was taken from dynamic drive, and all popup and popdown methods were wrapped with methods to respectively hide and show all select elements on the page. A guaranteed way to never get overlap. Here’s a demonstration of the little bit extended script:

Some text with hoverText

Realized with a bit more simple code, using cited little bit extended script

<p>Some text with <a href="#"
  onmouseover="showInfoToolTip('If this popup is popped up,
  all select boxes on the page are hidden.')"
  onmouseout="hideInfoToolTip()">hoverText</a></p>
<div><select id="s3">
  <option selected="true">select a or b</option>
  <option>a</option>
  <option>b</option>
</select></div>

The solution still feels a bit ugly though, and would be nicer if enhanced with an algorithm for detecting overlap (which can easily be done lineair time for one popup). As I’m not that much of a javascript hacker, I’ll use it if I find it in a library…