5 hours of IE6 fudging on Scrumptious trails

12 Dec

I’ve just made a bunch of changes to bring Scrumptious trails
(http://trail.scrumptious.tv) UI up to speed. I’d done the same work a
while back (http://mini.softwareas.com/making-scrumptious-trails-ie6-ready),
but the UI’s changed a lot lately, mainly thanks to some excellent
design direction from @juggernautdave
(http://www.flickr.com/photos/juggernautdave/4132581298/) on the top
bar design.

Key fixes:

* The iframe wasn’t being shown. Kind of a problem when that’s the
point of the player – to let the user walk through several websites,
each of which appears in the iframe. Took some experimenting before I
realised the iframe had a height of zero in IE. It’s set to 100% of
body height (absolute positioned) and body height is apparently zero
in IE. Not having the time to look into this properly, I have opted
for a hack, and set the iframe’s height using $(window).height() –
$(“topBar”).height().

* Transparent PNGs: I put @davem’s supersleight jQuery plugin
(http://allinthehead.com/retro/338/supersleight-jquery-plugin) to good
use. It’s great to make PNGs transparent in one go. (We were unable to
get decent-quality images in GIF, which is why we used PNGs; I think
it would actually be possible to get decent quality GIFs with the
right conversion techniques though?) supersleight doesn’t solve the
problem of background-position being ignored, so I also had to add
some IE-specific “margin” styles. I did look at one of the alternative
techniques involving behavior, which does suport background-position,
but I had various trouble with it, and I also found its use of URLs
relative to the HTML would cause me some deployment grief, given the
unusual deployment model. (At present, I am building a standalone
trails player and one served from tiddlyweb; very soon, I’ll be trying
to get the trails player running inside of tiddlywiki.)

* A few other layout tweaks.

* I was using ev.which at one point to find the mouse button.
Unfortunately jQuery.Event doesn’t (yet?) neutralise the mouse button
when an event fires, so I just manually checked it (good summary of
issues here – http://unixpapa.com/js/mouse.html). Basically, I use
“firstButton = (ev.which==1 || ev.button==0).

And that’s it. Once it’s checked in and uploaded, I’ll be turning my
attention to fitting into TiddlyWiki. Instead of trying to deploy
scrumptious as a standalone app built on TiddlyWeb, we are opting for
a model where Scrumptious is a TiddlyWiki/TiddlyWeb plugin, and this
will coincide with TiddlyWiki/TiddlyWeb providing support for easily
pulling in such plugins from its standard UI. (Actually, I’m really
talking about TiddlyWebWiki, which is basically the main initial
purpose of TiddlyWeb; to provide a simple RESTful server store for
TiddlyWikis.)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: