Here is a really simple example: it’s a drop shadow that changes its distance based on the size of the window, and as you resize the window the distance changes as well.  Of course, it’s up to your imagination to come up with other uses, but this is a simple example that gets to the point.

To accomplish this, I only needed to add a couple of lines of code to our existing resize event handler from the How To Use jsFloater documentation:

function floatStuff(re:Event):void
{
var sW:Number = stage.stageWidth;
var sH:Number = stage.stageHeight;
var shadW:int = Math.floor(sW/120);
var shadH:int = Math.floor(sH/60);
floater.floatHorVer(rembrandt,”center”,0,0,sW,sH);
floater.floatHorVer(shadow,”center”,shadW,shadH,sW,sH);
}

Note: if you are copying the code above, you will have to re-do the double quotes so that Flash recognizes them.

As you can see, I’ve got two objects that I’m floating, with instance names of “rembrandt” and “shadow” – pretty obvious what’s going on there.  But if you look above, you’ll also see that I’ve added two variables of type integer, which take the stage width and height, divide each by some values that I think work well, and floor each result into an integer.

Both floats are using the floatHorVer method with an alignment mode of “center”, and the only difference between the picture of rembrant and its shadow is that the picture is always floating exactly center, while the shadow is being padded – dynamically – based upon a fraction of what the current browser size is.

The result: a dynamic drop shadow that seems alter its light source throw depending on the size of the window.  One possible use for this is making sure that the drop shadow doesn’t get cut off if the user resizes the browser window really small.

Of course, this is a simple example, but you can get as crazy with it as you like.

By this time, I’ve worked my head around the idea that, to many developers (and clients) out there, CSS is the one true way and tables are only good for displaying data – that is, data that they consider data and not data that someone else might consider data.  See my previous post on semantic html for more carping on this topic.  But enough negativity – I would hereby like to add my voice to the growing number of developers calling for a new future in CSS: [paraphrase] “If CSS is the golden chalice of front-end web development, how come it can interpret between pixels, point sizes, and em sizes, but it can’t add 1 + 1?”

Now, I know, purists will say that Javascript is for math, and CSS is for styling.  Just simply get a good Javascript library and do your math there.  The problem is that other purists will say that using Javascript to generate your CSS positions is pure hackery.  And yet other purists will say “everyone come to my website to check out my awesome CSS hacks!”

Let’s face up to it: there are some things that CSS is just not that good at.  The idea that you are ruining your SEO by adding three lines of table code to get your column heights equalized seems dubious.  But, I’m willing to go with that and check out some truly weird and wonderful tricks to arrive at the same solution that would take literally half a dozen lines of code using old clunky tables.  But yeah, I’m sure google’s robots are completely fooled by a table and a couple of <tr> tags… [sarcsasm alert].

Anyway, if CSS is going to be responsible for our layout and can have access to and control some of the DOM, why can’t we just do:

#layerid {
width:20%;
margin:10px auto;
height:width * 0.5;
}

That would really open things up and allow for some more creative, interactive layouts.  Hopefully, CSS 4 will allow for some of this.  It should be, in my opinion, a no-brainer.