> I am trying to code an OS X-style menu bar with prototype Are you talking about the dock?
http://positionabsolute.net/blog/2007/08/prototype-fisheye.php On Jul 13, 4:05 pm, 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/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 [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 -~----------~----~----~----~------~----~------~--~---
