Pocket IE and DHTML

By -
So... I thought I'd have a go at seeing what you can do with DHTML (a.k.a. HTML where you monkey with the contents via script, like most modern interactive sites) in Pocket IE (a.k.a. Internet Explorer for Windows Mobile) so far as animation goes.

The short answer appears to be: not much. 
  • The CSS position property is not supported. In fact, the best (only?) documentation of the supported CSS properties is an entry on the Windows Mobile blog from 2004. So no absolute positioning.


    • You can set a margin on divs to position them (well, position one of them). However, this only works when PIE is set in "Desktop" rendering mode. It doesn't work in "Default" or "One Column" - I normally use the latter to force pages to reflow. (For WM6 you can specify a meta tag to override this - see this blog post)
    • If you set margin-left, it takes away from the width of an element. So a DIV with a width of 50px and a margin-left of 10px ends up with an effective width of 40px.

  • document.body is null. You can use document.getElementById() and find the body if it has an ID, though.
  • Setting window.onload fails. You need to have <BODY ONLOAD="..."> instead.
  • No offsetLeft, offsetTop, offsetWidth or offsetHeight properties on elements.
  • No onmousedown/onmousemove/onmouseup events. So no iPhone-esque demos. *sigh*
  • No onclick on elements other than input type=button and a (link).


    • To fake this for a DIV you can do <DIV ... ><A HREF="#" ONCLICK="..."><DIV STYLE="width: 100%; height; 100%;"></DIV></A></DIV>

  • Getting and setting innerHTML works just fine, so you can do arbitrary content updates
  • window.setTimeout() is also supported, so you can do timed changes, for animations
So I was able to get a square that moves to a new random position when you click on it, but it wasn't pretty.

Comments

Post a Comment