Yea.. had the same problem..did a video tutorial about that thing. i propose the effect.queue of the script.aculo.us core. annoyed me for a long time so just have a look at the tutorial http://muenchenwebdesign.com/devblog/2009/08/navigation-mit-effect-morph-script-aculo-us-munchen-webdesign/ this VIDEOTUTORIAL heldps this morph problem to run smooth. no lightnings or flickering anymore
On Jul 15, 12:51 am, david <[email protected]> wrote: > 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 > > -- > david > > On 13 juil, 22:05, Mario Colombo <[email protected]> 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/... > > > 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
