Question

I’ve been making a webpage and I have one feature (making fixed divs scrollable) that requires some javascript, I’ve found a way to make it work with jquery but can’t get it to work without it. Any help would be appreciated. Here’s the code:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
  // A globar variable to save to last element that the following class was applied to
  var Last;
  // This adds the class "ttth" so that tt the class "tt" will be displayed.
  $(".tttw").live('touchstart', function() {
    if (Last) Last.removeClass('ttth');
    $(this).addClass("ttth");
    Last=$(this);
  });
  // Test if we have a touchdevice.
  function isTouchDevice(){
    try{
      document.createEvent("TouchEvent");
      return true;
    }catch(e){
      return false;
    }
  }
  // This function makes a fixed div on touch devices scrollable.
  function touchScroll(selector) {
    if (isTouchDevice()) {
      var scrollStartPosY=0;
      var scrollStartPosX=0;
      $('body').delegate(selector, 'touchstart', function(e) {
        scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
        scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
      });
      $('body').delegate(selector, 'touchmove', function(e) {
        if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
          this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
          (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
          e.preventDefault();
        if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
          this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
          (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
          e.preventDefault();
        this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
        this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
      });
    }
  }
  // Touch is being initialised.
  $(document).ready(function(){
    touchScroll('.tt');
  });
</script>

This code is already working but to reduce the loading time I want to get rid of jQuery. How to do that? For example – how can I select all classes “tttw” and add an eventlistener?

Any help, rough direction, etc. would be great!

Answer 1

Okay – found the answer myself. I did it like this:

function touchScrolli(selector) {
    if (isTouchDevice()) { 
    var scrollStartPosY=0;
    var scrollStartPosX=0;
    var list = document.querySelectorAll(selector);
    for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('touchstart', function (e) {
    scrollStartPosY=this.scrollTop+e.touches[0].pageY;
    scrollStartPosX=this.scrollLeft+e.touches[0].pageX;
    e.preventDefault();
    }, false);
    list[i].addEventListener('touchmove', function (e) {
    if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
    vthis.scrollTop+e.touches[0].pageY < scrollStartPosY-5) ||
    (this.scrollTop != 0 && this.scrollTop+e.touches[0].pageY > scrollStartPosY+5))
    e.preventDefault();
    if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
    this.scrollLeft+e.touches[0].pageX < scrollStartPosX-5) ||
    (this.scrollLeft != 0 && this.scrollLeft+e.touches[0].pageX > scrollStartPosX+5))
    e.preventDefault();
    this.scrollTop=scrollStartPosY-e.touches[0].pageY;
    this.scrollLeft=scrollStartPosX-e.touches[0].pageX;
    });
    }
    }
}

Just needed to know how to select all classes without jQuery.