title: Uncaught TypeError: Cannot read property 'getSize' of null
body: <p>I'm on joomla using RT_dominion template from roketthemes ans their roksproket plugin, i get this jquery error where i display a roksproket slider:</p>
  
  <blockquote>
    <p>Error: Uncaught TypeError: Cannot read property 'getSize'</p>
  </blockquote>
  
  <pre><code>Element.implement({
      'styles': function(){
          var mu = moofx(this), result = mu.style.apply(mu, arguments);
          if (arguments.length == 1 &amp;&amp; typeof arguments[0] == 'string') return result;
          return this;
      },
      'moofx': function(){
          var mu = moofx(this);
          mu.animate.apply(mu, arguments);
          return this;
      }
  });
  
  var Sliders = new Class({
  
      Implements: [Options, Events],
  
      animations: {},
  
      options: {
          data: 'accordion',
          settings: {}
      },
  
      initialize: function(options){
          this.setOptions(options);
          this.data = this.options.data;
  
          this.sliders = document.getElements('[data-' + this.data + ']');
          this.settings = {};
          this.timers = {};
          this.statuses = {};
      },
  
      attach: function(feature, settings){
          feature = typeOf(feature) == 'number' ?
                      document.getElements('[data-' + this.data + '=' + this.getID(feature) + ']')
                      :
                      feature;
          settings = typeOf(settings) == 'string' ? JSON.decode(settings) : settings;
  
          var containers = (feature ? new Elements([feature]).flatten() : this.sliders);
  
          containers.each(function(container){
              container.store('roksprocket:' + this.data + ':attached', true);
  
              this.setSettings(container, settings, 'restore');
  
              var relay = {
                  mouseenter: container.retrieve('roksprocket:' + this.data + ':mouseenter', function(event){
                      this.stopTimer.call(this, container);
                      this.pause.call(this, container);
                  }.bind(this)),
  
                  mouseleave: container.retrieve('roksprocket:' + this.data + ':mouseleave', function(event){
                      this.resume.call(this, container);
                      this.startTimer.call(this, container);
                  }.bind(this)),
  
                  next: container.retrieve('roksprocket:' + this.data + ':next', function(event, element){
                      this.direction.call(this, event, container, element, 'next');
                  }.bind(this)),
  
                  previous: container.retrieve('roksprocket:' + this.data + ':previous', function(event, element){
                      this.direction.call(this, event, container, element, 'previous');
                  }.bind(this)),
  
                  item: container.retrieve('roksprocket:' + this.data + ':item', function(event, element){
                      var position = container.getElements('[data-'+this.data+'-item]').indexOf(element);
                      this.toPosition(container, position);
                  }.bind(this))
              };
  
              ['mouseenter', 'mouseleave'].each(function(type){
                  container.addEvent(type, relay[type]);
              });
  
              ['next', 'previous'].each(function(dir, i){
                  var query = '[data-' + this.data + '-' + dir + ']';
                  if (i &gt; 0) query += ', [data-' + dir + ']';
  
                  container.addEvent('click:relay(' + query + ')', relay[dir]);
              }, this);
  
              container.addEvent('click:relay([data-' + this.data + '-item])', relay.item);
  
              if (container.getElements('[data-'+this.data+'-item]').length &gt; 1) this.showArrows(container);
  
              this.toPosition(container, 0, true);
  
              if (this.getSettings(container).autoplay &amp;&amp; this.getSettings(container).autoplay.toInt()) this.startTimer(container);
  
          }, this);
      },
  
  
      detach: function(feature){
          feature = typeOf(feature) == 'number' ?
                      document.getElements('[data-' + this.data + '=' + this.getID(feature) + ']')
                      :
                      feature;
  
          var containers = (feature ? new Elements([feature]).flatten() : this.sliders);
  
          containers.each(function(container){
              container.store('roksprocket:' + this.data + ':attached', false);
              var relay = {
                  mouseenter: container.retrieve('roksprocket:' + this.data + ':mouseenter'),
                  mouseleave: container.retrieve('roksprocket:' + this.data + ':mouseleave'),
                  pagination: container.retrieve('roksprocket:' + this.data + ':relay'),
                  next: container.retrieve('roksprocket:' + this.data + ':next'),
                  previous: container.retrieve('roksprocket:' + this.data + ':previous')
              };
  
              ['mouseenter', 'mouseleave'].each(function(type){
                  container.removeEvent(type, relay[type]);
              });
  
              ['pagination', 'next', 'previous'].each(function(dir, i){
                  var query = '[data-' + this.data + '-' + dir + ']';
                  if (i &gt; 0) query += ', [data-' + dir + ']';
  
                  container.removeEvent('click:relay(' + query + ')', relay[dir]);
              }, this);
  
          }, this);
      },
  
      setSettings: function(container, settings, restore){
          var id = this.getID(container),
              options = Object.clone(this.options.settings);
  
          if (!restore || !this.settings['id-' + id]){
              this.settings['id-' + id] = Object.merge(options, settings || options);
          }
      },
  
      getSettings: function(container){
          var id = this.getID(container);
  
          return this.settings['id-' + id];
      },
  
      getContainer: function(container){
          if (!container) container = document.getElements('[data-' + this.data + ']');
          if (typeOf(container) == 'number') container = document.getElement('[data-' + this.data + '='+container+']');
          if (typeOf(container) == 'string') container = document.getElement(container);
  
          return container;
      },
  
      getID: function(id){
          if (typeOf(id) == 'number') id = document.getElement('[data-' + this.data + '='+id+']');
          if (typeOf(id) == 'string') id = document.getElement(id);
          return !id ? id : id.get('data-' + this.data);
      },
  
      toPosition: function(container, position, force){
          container = this.getContainer(container);
          if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
  
          this.stopTimer(container);
  
          var settings = this.getSettings(container),
              sliders  = container.getElements('[data-' + this.data + '-item]'),
              current  = container.getElement('[data-' + this.data + '-item].active'),
              closed   = container.getElement('[data-' + this.data + '-item]:not(.active)'),
              height   = settings.height_fixed;
  
          if (!sliders.length) return;
  
          if (sliders[position] &amp;&amp; sliders[position].hasClass('active') &amp;&amp; !force) return;
  
          if (position &gt; sliders.length - 1) position = 0;
          if (position &lt; 0) position = sliders.length - 1;
  
          if (sliders.length){
              if (settings.height_control == 'auto') height = (force) ? sliders[position].getSize().y : sliders[position].getFirst().getSize().y;
  
              var closedHeight = closed.getSize().y;
              current.moofx({height: closedHeight}, {duration: '300ms', equation: 'ease-in-out'});
              sliders.removeClass('active');
              sliders[position].addClass('active').setStyle('height', closedHeight);
              sliders[position].moofx({height: height}, {duration: '300ms', equation: 'ease-in-out'});
          }
  
          if (settings.autoplay &amp;&amp; settings.autoplay.toInt()) this.startTimer(container);
      },
  
      direction: function(event, container, element, dir){
          if (event) event.preventDefault();
  
          dir = dir || 'next';
          this[dir](container, element);
      },
  
      showArrows: function(){
          var args = Array.slice(arguments),
              container = $(args[0]);
              arrows = args.splice(1);
  
          if (!arrows.length) arrows = ['next', 'previous'];
  
          arrows.forEach(function(arrow){
              arrow = container.getElement('[data-' + this.data + '-' + arrow + ']');
              if (arrow) arrow.setStyle('visibility', 'visible');
          }, this);
      },
  
      next: function(container, element){
          container = this.getContainer(container);
          if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
          if (typeOf(container) == 'elements') return this.nextAll(container, element);
  
          var sliders = container.getElements('[data-' + this.data + '-item]');
          if (!sliders.length) return;
  
          var active = sliders.filter(function(page){ return page.hasClass('active'); }),
              position = sliders.indexOf(active.length ? active[0] : '') || 0,
              next = position + 1;
  
          if (next &gt; sliders.length - 1) next = 0;
          this.toPosition(container, next);
      },
  
      nextAll: function(containers, element){
          containers = this.getContainer(containers);
          if (typeOf(containers) == 'element') return this.next(containers, element);
  
          containers.each(function(container){
              this.next(container, element);
          }, this);
      },
  
      previous: function(container, element){
          container = this.getContainer(container);
          if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
  
          if (typeOf(container) == 'elements') return this.previousAll(container, element);
  
          var sliders = container.getElements('[data-' + this.data + '-item]');
          if (!sliders.length) return;
  
          var active = sliders.filter(function(page){ return page.hasClass('active'); }),
              position = sliders.indexOf(active.length ? active[0] : '') || 0,
              previous = position - 1;
  
          if (previous &lt; 0) previous = sliders.length - 1;
          this.toPosition(container, previous);
      },
  
      previousAll: function(containers, element){
          containers = this.getContainer(containers);
          if (typeOf(containers) == 'element') return this.previous(containers, element);
  
          containers.each(function(container){
              this.previous(container, element);
          }, this);
      },
  
      startTimer: function(container){
          container = this.getContainer(container);
          if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
  
          var settings = this.getSettings(container),
              id = this.getID(container),
              status = this.statuses['id-' + id],
              autoplay = settings.autoplay.toInt(),
              delay = (settings.delay.toInt()) * 1000;
  
          clearTimeout(this.timers['id-' + id]);
          if (autoplay &amp;&amp; status != 'pause') this.timers['id-' + id] = this.next.delay(delay, this, container);
      },
  
      stopTimer: function(container){
          container = this.getContainer(container);
  
          var id = this.getID(container);
          clearTimeout(this.timers['id-' + id]);
      },
  
      pause: function(container){
          container = this.getContainer(container);
  
          var id = this.getID(container);
          this.statuses['id-' + id] = 'pause';
      },
  
      resume: function(container){
          container = this.getContainer(container);
  
          var id = this.getID(container);
          this.statuses['id-' + id] = 'play';
      }
  
  });
  
  this.RokSprocket.Sliders = Sliders;
  </code></pre>