Z-index mouseover

I have 8 div boxes that overlap how do I properly change the z-index on each box so with a mouseover a single div moves to the front .

This works with only two layers but not eight?

function changeZunder() {
layer1.style.zIndex = 10;
layer2.style.zIndex = 50;
}

function changeZover() {
layer1.style.zIndex = 50;
layer2.style.zIndex = 10;
}

Any ideas how I go about this? Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What I would do is store the original z-index on the object as an
expando attribute, and then your function would only need to change
one z-index at a time, and revert the rest.

First, give all of these layers a class attribute. Make a new style
with no actual style changes in it (I’m calling mine demo). Click on
each DIV and apply the style. So now each of your DIVs would have
class=“demo” in their HTML.

Next, get a reference to all of these items. Apply Protaculous to the
page, choose prototype-packed in the Library picker, and paste the
following into the top Function Body editor:

var boxes = $$('.demo').each(function(elm){
	elm.writeAttribute('data-z-index',elm.getStyle('z-index');
});

So that’s gotten you a reference to all of the demo boxes, and it’s
also given each one of the boxes a data attribute with the value of
the original z-index, which you’ll use to restore the stack when
choosing another layer to float to the top.

Now your rollover elements need to know which element they are related
to, so for that you want to use the target box’s ID as the HREF for
their link. Select your first rollover element, and apply a link to
it. Use the External tab of the Hyperlink dialog to enter #layer1 as
the URL. Do the same for the others, changing to match the ID of each
additional box.

Make another class style called rollover, and apply that to each of
your rollover elements. Back in Protaculous, add another bit of code:

Element.addMethods({
	revertZ = function(element){
		var element = $('element');
		element.setStyle('z-index:' +
			element.readAttribute('data-z-index'));
		return element;
	}
});
$$('.rollover').each(function(elm){
	elm.observe('mouseover',function(evt){
		boxes.invoke('revertZ');
		$(this.href.split('#').last()).setStyle('z-index:1000');
	});
	elm.observe('click', function(evt){
		evt.stop();
	});
});

What this second bit has done is the following:

First, we add a new function to all members of the Element class (the
parent class of every DOM object on the page) teaching them how to
revert to their stored z-index.

Next, we set a listener on each of the items on the page that have the
classname ‘rollover’. When they are moused over, all the elements in
your stack revert to their natural z-index as set by Freeway, then the
element that matches the href of that rollover is given a z-index of
1000, vaulting it to the top.

Finally, another observer just to trap any errant clicks on the
rollovers, since that might cause the page to scroll wildly (since
we’re using what look like anchor links to the browser).

There’s no mouseout behavior here, but you could add that if you like.
The way this is written currently, the last mouseover will stick until
you either mouse over another target or you reload the page.

Walter

On Mar 17, 2011, at 8:25 PM, Pete wrote:

I have 8 div boxes that overlap how do I properly change the z-index
on each box so with a mouseover a single div moves to the front .

This works with only two layers but not eight?

function changeZunder() {
layer1.style.zIndex = 10;
layer2.style.zIndex = 50;
}

function changeZover() {
layer1.style.zIndex = 50;
layer2.style.zIndex = 10;
}

Any ideas how I go about this? Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter,

I have totally stuffed this. It’s the div linking part that maybe my problem?? Should be the color box that is the link?
Could you please see my non working test sample. Thanks again.

http://www.samsarafurniture.com.au/z-indextest.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I guess it is dark Down Under but I envisage that Walter’s idea was based on having separate trigger/rollover elements with the ‘rollover’ class applied to them and ‘demo’ applied to the items whose z-index is to change.

It may be doable without but you would need to add the ‘demo’ class as well - and I see no mention of it on your page - except in Walter’s code.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave, Yes, dark here, the moon is the closest to the earth tomorrow in many years. A little brighter than normal tonight.
I did have “demo” on all three div elements but FW somehow ignored them so I have now placed them in the div style. I’m a little confused on what to do. I know it a big ask but is it possible to post a quick example so I can see the source?
Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I was missing a close parenthesis, and had an equals sign where I
needed a colon. What I get for typing it off the top of my head.

Here’s the corrected script:

var boxes = $$('.demo').each(function(elm){
	elm.writeAttribute('data-z-index',elm.getStyle('z-index'));
});
Element.addMethods({
	revertZ: function(element){
		element.setStyle('z-index:' + element.readAttribute('data-z-index'));
	}
});
$$('.rollover').each(function(elm){
	elm.observe('mouseover',function(evt){
		var link = evt.findElement('a');
			if(link && link.href){
			boxes.invoke('revertZ');
			$(link.href.split('#').last()).setStyle('z-index:1000');
		}
	});
	elm.observe('click', function(evt){
		evt.stop();
	});
});

And here’s a downloadable example:

http://scripty.walterdavisstudio.com/rollover

Walter

On Mar 18, 2011, at 6:24 AM, Pete wrote:

Thanks Dave, Yes, dark here, the moon is the closest to the earth
tomorrow in many years. A little brighter than normal tonight.
I did have “demo” on all three div elements but FW somehow ignored
them so I have now placed them in the div style. I’m a little
confused on what to do. I know it a big ask but is it possible to
post a quick example so I can see the source?
Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, and it occurs to me, there’s a much simpler way to do this than to
jack around the z-index. All you need to do is hide everything and
show one at a time.

var boxes = $$('.demo').invoke('hide');
boxes.first().show();
$$('.rollover').each(function(elm){
	elm.observe('mouseover',function(evt){
		var link = evt.findElement('a');
			if(link && link.href){
			boxes.invoke('hide');
			$(link.href.split('#').last()).show();
		}
	});
	elm.observe('click', function(evt){
		evt.stop();
	});
});

This will be visually indistinguishable from the other version, and
it’s less code.

Walter

On Mar 18, 2011, at 8:32 AM, Walter Lee Davis wrote:

I was missing a close parenthesis, and had an equals sign where I
needed a colon. What I get for typing it off the top of my head.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oops, I think we have cross wires here. I was after the div itself to change with a mouse over to the top but not with images or buttons.
This is the same as in my request but code does not work well with more than two layers plus this function only seems to work in webkit browsers.
Sorry for the confusion Walter & Dave. Maybe its easier to do just an extra show and hide layer. Example link here of what I was referring to…

http://samsarafurniture.com.au/z-indextest2.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Even easier. No need for the anchor links or anything:


var boxes = $$('.demo').each(function(elm){
	elm.writeAttribute('data-z-index',elm.getStyle('z-index'));
});
Element.addMethods({
	revertZ: function(element){
		element.setStyle('z-index:' + element.readAttribute('data-z-index'));
	}
});
boxes.invoke('observe','mouseover',function(evt){
	var elm;
	if(elm = evt.findElement('div.demo')){
		if(evt.element() == elm){
			boxes.invoke('revertZ');
			elm.setStyle('z-index:1000');
		}
	}
});

Give that a try, make sure you apply the demo class only to the outermost HTML boxes, and you should get the effect you’re after. Note that this effect deliberately skips any rollovers that traverse the inner content of the box, so if you have content that is really near the edge of one of the boxes, the effect may not fire. Give it a try, and if it doesn’t work as you expect, let me know and I’ll see if I can loosen the specificity of the test.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just tried this out, and discovered that it works equally well without the extra layer of specificity. So two fewer lines, and it will probably work more smoothly for your more complex example:


var boxes = $$('.demo').each(function(elm){
	elm.writeAttribute('data-z-index',elm.getStyle('z-index'));
});
Element.addMethods({
	revertZ: function(element){
		element.setStyle('z-index:' + element.readAttribute('data-z-index'));
	}
});
boxes.invoke('observe','mouseover',function(evt){
	var elm;
	if(elm = evt.findElement('div.demo')){
		boxes.invoke('revertZ');
		elm.setStyle('z-index:1000');
	}
});

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Flawless, accomplished, excellent, faultless, foolproof, impeccable, skillful & superb… Perfect, that’s exactly what I was after!!

Thanks SO MUCH Walter. Pete : )


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, please don’t reply to this and don’t think this is a bit of fluff.

I hope to God you are on the Softpress pay books… I’m thinking not. You should BE if I’m wrong?

YOU are their BEST FW marketing tool.

Thanks again for all you help. Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m forwarding this to Richard Logan…

On Mar 18, 2011, at 1:36 PM, Pete wrote:

Walter, please don’t reply to this and don’t think this is a bit of
fluff.

I hope to God you are on the Softpress pay books… I’m thinking
not. You should BE if I’m wrong?

YOU are their BEST FW marketing tool.

Thanks again for all you help. Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options