[Moo] Re: FX.tween for MooTools 1.11

[charlie-imac]

Thanks but I'm still getting a error on the moveMoveCallback line.

TypeError: Result of expression 'a.page' [undefined] is not an object.

Here is the complete list of code.  Again this is to be a simple menu
that slides in from the left (menu opts slide in from the right) when
you hover over the logo.  Oh, this is mootools version 1.11.  I've got
a link to mootools on google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/mootools/1.11/mootools.js"></script>

[code]

// JavaScript Document
window.addEvent("domready", function() {
   new SlideoutMenu()}
);

var SlideoutMenu = new Class( {
   Implements : [Events], initialize : function() {
      this.bg_div = $("menu"); this.menu_div = $$("#menu #opts")[0];
this.logo_lnk = $$("#logo a")[0];
          if(this.logo_lnk.hasClass("home")) {
         this.is_homepage = true}
      var a = new Fx.Transition(Fx.Transitions.Expo, 4); this.is_open
= false; this.bgEffect = new Fx.Styles(this.bg_div, { unit: '%',
duration: 650, transition: Fx.Transitions.Quad.easeOut, onComplete:
this.bgEffectComplete.bind(this) });

          this.menuEffect = new Fx.Styles(this.menu_div, {
         property : "left", transition : Fx.Transitions.Quad.easeOut,
duration : 650}
      );
          $("logo").addEvent("mouseenter", this.showMenu.bind(this));
this.mouseBindCallback = this.moveMoveCallback.bind(this)}
   , bgEffectComplete : function() {
      if(this.is_open === false) {
         document.addEvent("mousemove", this.mouseBindCallback)}
      this.is_open =!this.is_open}
   , showMenu : function() {
      if(this.is_open === true) {
         return}
      this.bgEffect.start(80); this.menuEffect.start(600, $
("logo").getPosition().x); this.logo_lnk.addClass("active"); if
(this.is_homepage) {
         this.logo_lnk.removeClass("home")}
      }
   , hideMenu : function() {
      this.bgEffect.start(0); this.menuEffect.start(600);
this.logo_lnk.removeClass("active"); if(this.is_homepage) {
         this.logo_lnk.addClass("home")}
      }
   , moveMoveCallback : function(a) {
      if(a.page.x > 440 && a.page.y > 80 && this.is_open === true) {
         document.removeEvent("mousemove", this.mouseBindCallback);
this.hideMenu()}
      }
   }
);

[/code]

On Oct 17, 2:15 pm, Daniel Lohse <annismcken...@googlemail.com> wrote:
> Hey Charlie,
>
> Fx.Tween was not available with MooTools 1.11.
>
> I dug up the documentation for MooTools 1.11 on the website, I think  
> those are the ones you're looking for:
>
> http://docs111.mootools.net/Effects/Fx-Slide.jshttp://docs111.mootools.net/Effects/Fx-Base.js#Fx.Base
>
> [code]new Fx.Slide(this.bg_div, { unit: '%', duration: 650,  
> transition: Fx.Transitions.Quad.easeOut, onComplete:  
> this.bgEffectComplete.bind(this) });[/code]
>
> Sadly, there was no property parameter, you should use mode:  
> 'horizontal' instead and set the width of the bg_div element via css,  
> otherwise you cannot use Fx.Slide,
> you'd have to use Fx.Styles for this. The syntax is about the same,  
> look here for the 
> documentation:http://docs111.mootools.net/Effects/Fx-Styles.js
>
> Then you could use 'width' like so:
>
> [code]
> var bgDivEffects = new Fx.Styles(this.bg_div, { unit: '%', duration:  
> 650, transition: Fx.Transitions.Quad.easeOut, onComplete:  
> this.bgEffectComplete.bind(this) });
>
> bgDivEffects.start({
>         'width': '80%'});
>
> [/code]
>
> What is this.bg_div? Is this an element already? Try giving the div an  
> id so you can pass it as a string to Fx.Slide like so:
>
> new Fx.Slide('bg_div_id', { ... });
>
> I hope I could be helpful, post back here if something's not working,  
> I have stopped working with 1.11 a long time ago.
>
> And inheriting old/aged/dated projects is not fun, you have my  
> sympathy for that. :)
>
> Cheers, Daniel
>
> On 2009-10-17, at 17/October, 6:16 PM, charlie-imac wrote:
>
>
>
>
>
> > I've inherited a project that is using MooTools 1.11 and need help
> > writing a FX.tween from version 1.2.3 to work with 1.11.  Here is the
> > code that I need help with.  I've read the documentation and seen the
> > examples for MooTools 1.11 (fx.base, fx.transitions, and fx.styles)
> > but I still get syntax errors.  Note, I program in PHP and MySql not
> > ajax.  The effect is suppose to horizontally slide in a div that
> > covers 80% of the browsers window.  Any help would be appreciated.
>
> > new Fx.Tween(this.bg_div, {
> >         unit : "%", property : "width", duration : 650, transition :
> > a.easeOut, onComplete : this.bgEffectComplete.bind(this)}
> >      );