We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 14050
    • 788 Posts
    I am trying to get a basic ’Toggle’ to work for the Fx.Slide and am running into the error in firebug:

    "window.addEvent is not a function"

    The site is located here:

    http://dev.blueskyvineyard.com/wine-selection

    As far as I can see, I have it setup exactly like they do on the demo site here:

    http://demos.mootools.net/Fx.Slide

    I am a complete rookie at using mooTools, so I am sure I am doing something wrong. I made sure to include the script I downloaded from the site, and I made sure to check Fx.Slide as part of the download.

    On a related note. I am trying to use mootools and ditto to help streamline this area here:

    http://www.blueskyvineyard.com/wineselection.htm

    Each wine will eventually have its own page, so I wanted to output the list using Ditto, and use MooTools to toggle a slide effect. I figured I could template the ditto output in a way to accomplish this. Am I correct in that line of thinking?
      Jesse R.
      Consider trying something new and extraordinary.
      Illinois Wine

      Have you considered donating to MODx lately?
      Donate now. Every contribution helps.
      • 4018
      • 1,131 Posts
      If you’re simply trying to fire off your code and attach events to specific elements then try this:

      Window.onDomReady(function() {
          //Put your event code here!
      });
      


      Just like the errors said..."window.addEvent" is not a function within MooTools. Gotta go about it a different way. You could probably use a window.onLoad event as well, which is a native DOM event...but the onDomReady event works just as well.

      Jeff
        Jeff Whitfield

        "I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."
        • 14050
        • 788 Posts
        That’s strange. They use this code on the demo page:

        <script type="text/javascript">
        		window.addEvent('domready', function(){
        			//-vertical
        
        var mySlide = new Fx.Slide('test');
        
        $('slidein').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide.slideIn();
        	e.stop();
        });
        
        $('slideout').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide.slideOut();
        	e.stop();
        });
        
        $('toggle').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide.toggle();
        	e.stop();
        });
        
        $('hide').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide.hide();
        	e.stop();
        });
        
        
        //--horizontal
        
        var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
        
        $('slidein2').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide2.slideIn();
        	e.stop();
        });
        
        $('slideout2').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide2.slideOut();
        	e.stop();
        });
        
        $('toggle2').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide2.toggle();
        	e.stop();
        });
        
        $('hide2').addEvent('click', function(e){
        	e = new Event(e);
        	mySlide2.hide();
        	e.stop();
        });		});


        I tried using the code you supplied and I get a similar error.

        Window.onDomReady is not a function
        [Break on this error] Window.onDomReady(function() {


        I am sure I am just making a complete rookie mistake.
          Jesse R.
          Consider trying something new and extraordinary.
          Illinois Wine

          Have you considered donating to MODx lately?
          Donate now. Every contribution helps.
          • 28215
          • 4,149 Posts
          window.onload = function(){
          }
          


          ...is what you want.
            shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
            • 10487 MODX Staff
            • 1,535 Posts
            Just to add: window.addEvent() is fine to use, and as of Mootools 1.1, it’s the recommended way of attaching an event (onDomReady has been deprecated)

            I wonder if this is a simple case of case-sensitivity on the window object (Window versus window), as the mootools doc quote the following example for attaching an event on ’domready’:
            window.addEvent('domready', function(){
              alert('the dom is ready');
            });
            

            Worth a try I suppose ... smiley
              Garry Nutting
              Senior Developer
              MODX, LLC

              Email: [email protected]
              Twitter: @garryn
              Web: modx.com
              • 14050
              • 788 Posts
              I am using 1.1 as I just downloaded it last night. And, I have tried cut and pasting the code directly from demo pages.

              I have the following in the head of my page:

              <script type="text/javascript" src="assets/js/mootools.js"></script>
              <script type="text/javascript">
              		window.addEvent('domready', function(){
              			//-vertical
              
              var mySlide = new Fx.Slide('test');
              
              $('slidein').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide.slideIn();
              	e.stop();
              });
              
              $('slideout').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide.slideOut();
              	e.stop();
              });
              
              $('toggle').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide.toggle();
              	e.stop();
              });
              
              $('hide').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide.hide();
              	e.stop();
              });
              
              
              //--horizontal
              
              var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
              
              $('slidein2').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide2.slideIn();
              	e.stop();
              });
              
              $('slideout2').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide2.slideOut();
              	e.stop();
              });
              
              $('toggle2').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide2.toggle();
              	e.stop();
              });
              
              $('hide2').addEvent('click', function(e){
              	e = new Event(e);
              	mySlide2.hide();
              	e.stop();
              });		});
              	</script>


              mootools.js is the file I downloaded from http://mootools.net/download that included the ’Core’ and ’Fx.Slide’ (and its dependencies).

              The following is the html I have for what I am trying to toggle:

              <p>
              <a href="#" id="toggle" name="toggle" title="toggle">Toggle</a>
              </p>
              <div id="test">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
              qui officia deserunt mollit anim id est laborum.
              </div>


              Yet I still get an error:
              window.addEvent is not a function
              [Break on this error] window.addEvent('domready', function(){


              I am pretty stumped.

                Jesse R.
                Consider trying something new and extraordinary.
                Illinois Wine

                Have you considered donating to MODx lately?
                Donate now. Every contribution helps.
                • 10487 MODX Staff
                • 1,535 Posts
                Ah, I see - if you only included dependancies for Fx.Slide then you’re missing a few dependancies that are required for the events handling:

                Element.Event
                Window.DomReady
                  Garry Nutting
                  Senior Developer
                  MODX, LLC

                  Email: [email protected]
                  Twitter: @garryn
                  Web: modx.com
                  • 14050
                  • 788 Posts
                  I knew it had to be something really simple. Thanks a bunch Garryn!
                    Jesse R.
                    Consider trying something new and extraordinary.
                    Illinois Wine

                    Have you considered donating to MODx lately?
                    Donate now. Every contribution helps.
                    • 23653
                    • 10 Posts
                    Quote from: garryn at May 16, 2007, 04:17 PM

                    Ah, I see - if you only included dependancies for Fx.Slide then you’re missing a few dependancies that are required for the events handling:

                    Element.Event
                    Window.DomReady

                    I feel stupid, because this post probably makes sense to everyone that has seen it, and I know answer I have been looking for but somehow it still doesn’t make sense.

                    Do I put the ’Element.Event’ in the html portion, or is it part of my chunk? Thanks to anyone willing to help
                      • 4310
                      • 2,310 Posts
                      I believe you select them as options when downloading mootools.
                      You get a custom version with the required features and without the un-necessary ones.
                      Then just include your mootools.js file in the <head> of your template.