I was playing with something a couple of years back that was going to
have a bunch of little boxes, any of which needed to be brought in
front of the others on click. I played with keeping track of the most-
recently-brought-forward box and then lowering its z-index again when
another one was brought forward -- basically, having a background
(statically-positioned content), a mid-ground (absolutely positioned
content with z-index of one value), and foreground (absolutely-
positioned content with a slightly higher z-index). But it didn't work
well, not least because there was no "history" to it -- I'd drag a box
over somewhere, then start dragging another and the box I'd dropped
previously would (of course) go underneath other boxes depending on
which boxes came first in the document order.

I got distracted and never finished fiddling with that (it was just
something I was playing with), but your question reminded me of the
awkwardness and as I know a good deal more now about JavaScript and
CSS than I did then, my first thought was: How 'bout an ever-
increasing value?

Browsers seem to store z-index in 32-bit signed integers, meaning that
the range in front of the statically-positioned content is 0 to
2,147,483,647 (more than 2.1 billion). So in my lots of small boxes
situation, I could probably have just had a variable, `nextZIndex`,
seeded it with the value 1, and then each time one of my boxes was
clicked and needed to be brought in front of the others, I'd just
assign that next z-index to it and increment `nextZIndex`. The boxes
will maintain themselves in most-recently-clicked order...for 2.1
billion clicks, which I think is a reasonable limit. :-) Here's a live
copy of the sort of thing:

It feels a bit...open-ended, but has the advantage of being
wonderfully simple. And you could always put in a check for when you
find your `nextZIndex` value is at about 2,147,483,000 or so and do
the "expensive" (not really at that point, in the scheme of things)
operation of redoing the numbering on all of your relevant elements.

T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Jul 4, 4:27 pm, kstubs <kst...@gmail.com> wrote:
> Those are some good ideas.  In an effort to just write something quickly I
> decided to:  
> 1) keep track of context object z-index
> 2) set z-index of this object to some absurd big z-index value
> 3) on lost focus (or when the object should resume the "not" expanded state)
> return z-index to original size
> This seems to be working fine..
> I was fishing for if anyone else had ran into similar implementation
> problems.  You know its fantastic to finally be able to write all of this
> great Javascript code using Prototype, but you still have to write it
> intelligently.

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to