Latest posts from topic “Simple Animated Menu from Mootools 1.2 to Mootools 1.1” Latest posts from topic “Simple Animated Menu from Mootools 1.2 to Mootools 1.1” on “mooforum”. 2009-12-29T15:21:43Z http://www.mooforum.net/viewtopic.php?f=15&t=2711 Re: Simple Animated Menu from Mootools 1.2 to Mootools 1.1 http://www.mooforum.net/viewtopic.php?f=15&p=9705#p9705 stav 2009-12-30T09:26:08Z 2009-12-30T09:26:08Z
I changed the Fx.Tween to Fx.Style and the js error that I'm getting now is overflown.each is not a function.
Attached is the menu source with motools1.2.js + included motools.1.1.js that i need to make to work with
and the changes that i made.

Thank you.
 Re: Simple Animated Menu from Mootools 1.2 to Mootools 1.1 http://www.mooforum.net/viewtopic.php?f=15&p=9688#p9688 wowenkho 2009-12-29T21:25:45Z 2009-12-29T21:25:45Z
try changing Fx.Tween to Fx.Style first, then tell me if it throws errors still.
 Simple Animated Menu from Mootools 1.2 to Mootools 1.1 http://www.mooforum.net/viewtopic.php?f=15&p=9687#p9687 stav 2009-12-29T15:21:43Z 2009-12-29T15:21:43Z
Can some one convert Simple Animated Menu for Mootools 1.2 to work with Mootools 1.1 please?
The menu is from this website http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/

Below is the js code:
Line number On/Off | Expand/Contract | Select all
  2. //Simle Animated Menu for Mootools 1.2 v1
  3. //Released June 2008
  4. //Dedicated to the public domain by http://www.consideropen.com
  5. var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
  6. var youAreHere = new Fx.Tween($(navWrap), {
  7. duration: 1200,
  8. transition: Fx.Transitions.Elastic.easeOut
  9. });
  11. $$(navElementsArray).each(function(item){
  12. item.addEvent('mouseenter', function() {
  13. var thisPos = item.getPosition(navWrap).x + item.getSize().x - leftOffset;
  14. youAreHere.cancel();
  15. youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px');
  16. });
  17. });
  19. var currentArrow = function() {
  20. youAreHere.cancel();
  21. var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset;
  22. youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');
  23. };
  25. //correct IE rendering problem (without this, it wont go to the active nav onload)
  26. var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset;
  27. $(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');
  29. //works to set image to starting position in other browsers
  30. currentArrow();
  32. $(navWrap).addEvent('mouseleave', currentArrow);
  33. };
  35. window.addEvent('domready', function() {
  36. navArrowSlider(
  37. 'nav_wrap', // ID of nav wrap
  38. '#nav_wrap ul li', // Array selector of nav elements
  39. 'active_nav', // ID of current nav element
  40. '20px', // Background position y of background image
  41. '20' // INT ONLY - How far left from the right edge of the nav element that the image settles
  42. );
  43. });


Thank you !!