Hi Mario,
I modify a little bit your js file, to add an internal variable that
will save each morph effect one each element of the menu.
if the element is in effect, just cancel it and continue.

go to pastie to see my change: http://www.pastie.org/546167


On 13 juil, 22:05, Mario Colombo <mario.colo...@yetnet.ch> wrote:
> Hi everybody,
> I am trying to code an OS X-style menu bar with prototype and
> scriptaculous 1.8.2. I have two problems which I hope to solve with
> your feedback. I myself am stuck after failing with all the ideas I
> had.
> Please find the example 
> here:http://aldebaran.mine.nu/menu/menu.htmlhttp://aldebaran.mine.nu/menu/menu.jshttp://aldebaran.mine.nu/menu/menu.css
> 1st problem: image flickering: changing mouseover over the different
> divs produces a "flash" or flickering. Reading this group and other
> sources suggest that it is a problem with different Effects active at
> the same time. I tried to solve this over Effect.Queues and cancel the
> whole queue with my scope: 'menu' but unfortunately cancelling queues
> results in no effects at all:
> ---------------[code]----------
> // menuelement is the current menu div from  $$('.level_one').each
> (function(menuelement) {
> elDimensions = menuelement.getDimensions(); // to set style manually
> to where the effect was cancelled
> var queue = Effect.Queues.get('menu'); // cancelling the whole scope:
> 'menu' queue
> queue.each(function(effect) { effect.cancel(); });
> menuelement.setStyle('height:'+ elDimensions.height + 'px; ' +
> 'width:' + elDimensions.width + 'px;')   // set dimensions to where
> effect stops
> var myEffect = new Effect.Morph(menuelement, {style: {width:'100px',
> height:'100px'}, queue: {position: 'end', scope: 'menu'}}); //new
> effect takes place
> ---------------[/code]----------
> I also tried to save all effects to the same variable "myEffect",
> trying to have them overwrite themselves, which brought a partial
> improvement.
> 2nd problem: On 'mouseout' I would like the menu to return to its
> original state 'width:100px; height:100px;' I tried the following
> code:
> ---------------[code]----------
> Event.observe($('menu'), 'mouseout', function(event) {          //
> 'menu' is the id of the containing div
>         $$('.level_one').each(function(menuelement) {
>         var myEffect = new Effect.Morph(menuelement, {style:
> {width:'100px', height:'100px'}});
>         });});
> ---------------[/code]----------
> This resulted in erratic behaviour.
> Help would be greatly appreciated.  Help for better OO programming is
> always welcome. Thank you in advance.
> Mario
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