More work on an “attach” function, now as a jquery plugin. Each element is “attached” to the preceding in cascading fashion. Surprisingly pleasant forms ensue. Only the root element (darker gray) is draggable, but in fact as each subsequent square is placed as a child of the preceding element, all elements act to drag the root element. As a result, jQuery’s event.stopPropagation function is important in the mouseover events…
LIVE DEMO

Again using the svgweb library, so it works in both glorious native SVG (Firefox, Chrome), and fallback Flash (Explorer); performance differences (i.e. relative slowness of the flash fallback) become quite apparent with large numbers of objects.

A notion of translating a “virtual” space of elements to the screen is added, with a “zoom region” … part of the stacks series…

Going beyond a simple 1-to-1 mapping.

Stacks 101, to be continued…

Using svgweb, which allows using Firefox’s (and other browsers’) native SVG support while also providing a fallback to flash for Internet Explorer, super-cool.

Some JavaScript dives into the SVG and wraps each path element in a “spinner” callback (that repeately sets the elements “transform” attribute).

I am working on some jQuery functions to ease making object related layouts.

RUN

CODE

MacPaint meets RSS… A proof of concept relating to several things cooking in my head at the moment like: how to make a “spatial wiki”, and incorporating “live” elements into collage-based editing tools. NB: everything is draggable (including the background to move the whole “canvas”), and texts can be resized (widths adjusted) using a not quite right resize control that appears top-right of the headline. Feed sources are semi-random at the moment (some belgian news sources + BBC & Google News), images come from either Flickr or Getty. And nothing is deletable! So embrace the randomness.

The CGI’s to pull the text + images from the feed are Python using Feedparser and some quick and dirty regex tweaking of the Flickr feed to pull out a small sized image URL.

RUN THE DEMO
VIEW THE CODE

Here a proof of concept for a future teaching assignment (ok ok, also my own “itch” ;)… Build your own media player. Here PyGame is used to make a simple frameless window (which because of the black background *appears* to blend into my mostly black desktop image)… Also, the code makes use of Fabien Devaux’s lightweight python mplayer wrapper (that wraps a python class/object around mplayer’s “slave” mode).
(more…)

I was struggling with getting the layering right using a transparent background and ended up making this. In the process, I (re) learned how relative positioning lets elements be both in the “flow” of a layout, and still layered. (I was having the problem “normal” elements would appear underneath the absolutely positioned transparent background layer.)