This follows along a vaguely similar line as the Expanding menu
thread. I have a (horizontal) menu bar with 6 graphic buttons. Below
the menu are a stack of (hidden) divs corresponding to a different
menu button. On button mouseover its partnering div needs to
BlindDown and on mouseout it should Fade out while a new div
transitions in when going to a different menu button. I can get
certain parts of this to work but not everything all at once. I’m
trying to do this with Event listeners. If I didn’t need the effects
I would use slave layers to do this. I would really appreciate any
insight.
This follows along a vaguely similar line as the Expanding menu
thread. I have a (horizontal) menu bar with 6 graphic buttons. Below
the menu are a stack of (hidden) divs corresponding to a different
menu button. On button mouseover its partnering div needs to
BlindDown and on mouseout it should Fade out while a new div
transitions in when going to a different menu button. I can get
certain parts of this to work but not everything all at once. I’m
trying to do this with Event listeners. If I didn’t need the effects
I would use slave layers to do this. I would really appreciate any
insight.
I had it all ready to go but forgot to add it. Here’s a very rough demo page <http://xiiro.com/demo/scriptaculous/menu.html>. Now, I managed to get it going using inline markup but I would really like to get this to work using a listener in an external js file. It seems a bit bloated as it is currently. I’m also trying to do this in FW instead of coding it.
Thanks,
Todd
On Dec 17, 2007, at 3:43 PM, Walter Lee Davis wrote:
You could set up a new listener for each element the long way, but that’s going to get boring very quickly. Since you are using nice predictable naming in your example, try this technique:
//load prototype, or use Protaculous
Event.observe(window,'load',function(){
for(var i = 1; i < 4; i++){
var t = 'trigger' + i;
var g = 'toggle' + i;
Event.observe(t,'mouseover',function(){
new Effect.BlindDown(g,{});
};
Event.observe(t,'mouseout',function(){
new Effect.Fade(g,{});
};
};
};