managing zindex

[kstubs]

Any tips on managing zindex for a given page where many absolute positioned objects occur?  Further, one object may expand and require a greater zindex of the object nearby, and of course the same is true of every object on the page.  

This is not as easy as managing a bunch of known objects, these objects don't actually know the other exist.  I'm wondering if there is an optimal way to discover what the max zindex is on the page, and go from there.

Anyhow, any ideas would be great.

Karl..

[Walter Lee Davis]

Well, you could try this (probably very expensive) operation and see
if it works for you:

var max_z = 0;
$$('div').each(function(elm){
var z = elm.getStyle('z-index');
max_z = (z <= max_z) ? max_z : z;
});

If you can scope your $$ to a smaller universe, or use $
('foo').select('div') instead, you might be able to shave some cycles
off of that. Another approach would be to do this once at page load,
then each time you add a new "top" element, increment the max_z global
variable to match. You just want to keep building higher, there's no
reason to worry about decrementing when you remove the top element.

Walter

> --
> You received this message because you are subscribed to the Google
> Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/z1S97SMUSZkJ
> .
> To post to this group, send email to prototype-s...@googlegroups.com
> .
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
> .

[kstubs]

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.

[T.J. Crowder]

Hi,

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:
http://jsbin.com/uzokad

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.

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

[T.J. Crowder]

I should have mentioned that unless you're okay with things wigging
out after 2.1 billion clicks (and it would be perfectly reasonable to
be okay with that), you will want to do that readjustment. If you try
this copy (http://jsbin.com/uzokad/2) which starts just a few numbers
shy of the limit, the results vary from browser to browser as to what
happens when the value exceeds a signed 32-bit int -- they differ, but
are nearly-universally undesirable. (Chrome just happily keeps going;
I guess they either use a JavaScript number [a 64-bit format IEEE 754
floating-point value -- this is my suspicion] or a 64-bit int.) But
IE, Firefox, and Opera all became unhappy in varying ways.

-- T.J. :-)

[Phil Petree]

In a non-web project I managed it with a circular buffer...  top element was at the head of the buffer, bottom element was at the end.  Moving an element from the middle to the top (or any other position) required deleting its position from the buffer, shifting all the other elements down and inserting the new element at the top.

 

There were 4 functions to write: 1) add to buffer; 2) del from buffer; 3) shift element(s) up/left; 4) shift elements down/right.

There were 4 total variables: 1) the buffer as an array; 2) a ptr to the head; 3) a ptr to the tail and 4) a fill count.

 

Basic article here: http://en.wikipedia.org/wiki/Circular_buffer

 

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

[kstubs]

I think the z-index +1 a billion times is a great solution.  I'm glad it got brought up again, a very useful concept, as is the circular buffer.  

I only require one max z-index, and then restoring z-index to original value.  So I guess it is safe to make that max z-index a large number than.. this is what I am doing now.

Thanks