Scrolling Menu That Works on an iPhone. Does such a thing exist?

Take a look at http://www.brucegust.com/rodgers/mobile/about.php. Check it out on your desktop then look at it on your mobile device. The navbar works great on your desktop, but you can't click on any of the nav options and be directed to the appropriate page. Rather, you get a series of prompts that ask you how you want to access the image.

I've run into this with more than one scrolling menu and I'm out of options.

Does anyone have a similar solution that actually works on mobile devices?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Neil RussellTechnical Development LeadCommented:
It is widely accepted now that what you see on a PC screen and what you see/get on an iPhone/iPad/tablet are never going to look or function in the same way.

You need to explore responsive menus that change there method of display and how they function depending on the device/technology that they are displayed on.

Secondly....

This is a criticism but a constructive one... What you are doing with the menu is goinf to be totally Ailien to 99% of your visitors no matter what device they are using.  Use technologies and layouts that your target audience is used to seeing/using on the device that they are on.

If you can't find a similar menu construct for an iPhone/iPad by google then it is probably because nobody wants one.

I have to admit that when I loaded your page it took me about a minute to realise what it was that was not functioning as you wanted.

And lastly.....

Can you imagine how difficult it would be to swipe that tiny menu on an iPhone 5c screen?  Make the users want to use your site and not make it more difficult for them.  Gadgets are a wonderful thing but the right gadget in the right place at the right time.....

Hope you take that in the helpful manner in witch it is meant.

Kind Regards,
Neil
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
This is another scrolling widget I found. Right out of the box: Works great on the desktop, doesn't do anything on a mobile device as far as going to the link the image references: http://brucegust.com/portfolio/menu/demos/horizontal/
0
brucegustPHP DeveloperAuthor Commented:
Noted, Neil and I do respect / appreciate your constructive criticism. Fact is, however, I've used this navbar on several sites that I've built and they've worked up until recently. However I may change my approach in the future, I still need a fix now for what I currently have in place.
0
brucegustPHP DeveloperAuthor Commented:
Neil, I found the issue!

Head out to https://github.com/tkahn/Smooth-Div-Scroll/issues/62 to get the kind of background info that will resonate with you as a Javascript guru.

 Bottom line: On the page I referenced above, the solution is:


The solution in my case consisted of two answers, given by davetayls here: davetayls/jquery.kinetic#41 and warren-bank here: #153.

 In short: Use filterTarget and jquery.kinetic v 1.8.4.

Apparently, at one point it was possible to drag through the options on a menu AND select them. As of the release of a recent update, it doesn't work anymore. There is a workaround, however, but I don't understand how to implement it.

You have to apply this:

$('#wrapper').kinetic({
    filterTarget: function(target, e){
        if (!/down|start/.test(e.type)){
            return !(/area|a|input/i.test(target.tagName));
        }
    }
});

...in the js.kinetic file which I've got attached. Any idea on how to proceed / implement the referenced solution?

/*! jquery.kinetic - v2.0.6 - 2014-10-07 http://the-taylors.org/jquery.kinetic 
 * Copyright (c) 2014 Dave Taylor; Licensed MIT */
!function(t){"use strict";var e="kinetic-active";window.requestAnimationFrame||(window.requestAnimationFrame=function(){return window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()),t.support=t.support||{},t.extend(t.support,{touch:"ontouchend"in document});var s=function(){return!1},i=function(e,s){return this.settings=s,this.el=e,this.$el=t(e),this._initElements(),this};i.DATA_KEY="kinetic",i.DEFAULTS={cursor:"move",decelerate:!0,triggerHardware:!1,y:!0,x:!0,slowdown:.9,maxvelocity:40,throttleFPS:60,movingClass:{up:"kinetic-moving-up",down:"kinetic-moving-down",left:"kinetic-moving-left",right:"kinetic-moving-right"},deceleratingClass:{up:"kinetic-decelerating-up",down:"kinetic-decelerating-down",left:"kinetic-decelerating-left",right:"kinetic-decelerating-right"}},i.prototype.start=function(e){this.settings=t.extend(this.settings,e),this.velocity=e.velocity||this.velocity,this.velocityY=e.velocityY||this.velocityY,this.settings.decelerate=!1,this._move()},i.prototype.end=function(){this.settings.decelerate=!0},i.prototype.stop=function(){this.velocity=0,this.velocityY=0,this.settings.decelerate=!0,t.isFunction(this.settings.stopped)&&this.settings.stopped.call(this)},i.prototype.detach=function(){this._detachListeners(),this.$el.removeClass(e).css("cursor","")},i.prototype.attach=function(){this.$el.hasClass(e)||(this._attachListeners(this.$el),this.$el.addClass(e).css("cursor",this.settings.cursor))},i.prototype._initElements=function(){this.$el.addClass(e),t.extend(this,{xpos:null,prevXPos:!1,ypos:null,prevYPos:!1,mouseDown:!1,throttleTimeout:1e3/this.settings.throttleFPS,lastMove:null,elementFocused:null}),this.velocity=0,this.velocityY=0,t(document).mouseup(t.proxy(this._resetMouse,this)).click(t.proxy(this._resetMouse,this)),this._initEvents(),this.$el.css("cursor",this.settings.cursor),this.settings.triggerHardware&&this.$el.css({"-webkit-transform":"translate3d(0,0,0)","-webkit-perspective":"1000","-webkit-backface-visibility":"hidden"})},i.prototype._initEvents=function(){var e=this;this.settings.events={touchStart:function(t){var s;e._useTarget(t.target,t)&&(s=t.originalEvent.touches[0],e._start(s.clientX,s.clientY),t.stopPropagation())},touchMove:function(t){var s;e.mouseDown&&(s=t.originalEvent.touches[0],e._inputmove(s.clientX,s.clientY),t.preventDefault&&t.preventDefault())},inputDown:function(t){e._useTarget(t.target,t)&&(e._start(t.clientX,t.clientY),e.elementFocused=t.target,"IMG"===t.target.nodeName&&t.preventDefault(),t.stopPropagation())},inputEnd:function(t){e._useTarget(t.target,t)&&(e._end(),e.elementFocused=null,t.preventDefault&&t.preventDefault())},inputMove:function(t){e.mouseDown&&(e._inputmove(t.clientX,t.clientY),t.preventDefault&&t.preventDefault())},scroll:function(s){t.isFunction(e.settings.moved)&&e.settings.moved.call(e,e.settings),s.preventDefault&&s.preventDefault()},inputClick:function(t){return Math.abs(e.velocity)>0?(t.preventDefault(),!1):void 0},dragStart:function(t){return e._useTarget(t.target,t)&&e.elementFocused?!1:void 0}},this._attachListeners(this.$el,this.settings)},i.prototype._inputmove=function(e,s){{var i=this.$el;this.el}if((!this.lastMove||new Date>new Date(this.lastMove.getTime()+this.throttleTimeout))&&(this.lastMove=new Date,this.mouseDown&&(this.xpos||this.ypos))){this.elementFocused&&(t(this.elementFocused).blur(),this.elementFocused=null,i.focus()),this.settings.decelerate=!1,this.velocity=this.velocityY=0;var o=this.scrollLeft(),n=this.scrollTop(),l=e-this.xpos,r=s-this.ypos;this.scrollLeft(this.settings.x?o-l:o),this.scrollTop(this.settings.y?n-r:n),this.prevXPos=this.xpos,this.prevYPos=this.ypos,this.xpos=e,this.ypos=s,this._calculateVelocities(),this._setMoveClasses(this.settings.movingClass),t.isFunction(this.settings.moved)&&this.settings.moved.call(i,this.settings)}},i.prototype._calculateVelocities=function(){this.velocity=this._capVelocity(this.prevXPos-this.xpos,this.settings.maxvelocity),this.velocityY=this._capVelocity(this.prevYPos-this.ypos,this.settings.maxvelocity)},i.prototype._end=function(){this.xpos&&this.prevXPos&&this.settings.decelerate===!1&&(this.settings.decelerate=!0,this._calculateVelocities(),this.xpos=this.prevXPos=this.mouseDown=!1,this._move())},i.prototype._useTarget=function(e,s){return t.isFunction(this.settings.filterTarget)?this.settings.filterTarget.call(this,e,s)!==!1:!0},i.prototype._start=function(t,e){this.mouseDown=!0,this.velocity=this.prevXPos=0,this.velocityY=this.prevYPos=0,this.xpos=t,this.ypos=e},i.prototype._resetMouse=function(){this.xpos=!1,this.ypos=!1,this.mouseDown=!1},i.prototype._decelerateVelocity=function(t,e){return 0===Math.floor(Math.abs(t))?0:t*e},i.prototype._capVelocity=function(t,e){var s=t;return t>0?t>e&&(s=e):0-e>t&&(s=0-e),s},i.prototype._setMoveClasses=function(t){var e=this.settings,s=this.$el;s.removeClass(e.movingClass.up).removeClass(e.movingClass.down).removeClass(e.movingClass.left).removeClass(e.movingClass.right).removeClass(e.deceleratingClass.up).removeClass(e.deceleratingClass.down).removeClass(e.deceleratingClass.left).removeClass(e.deceleratingClass.right),this.velocity>0&&s.addClass(t.right),this.velocity<0&&s.addClass(t.left),this.velocityY>0&&s.addClass(t.down),this.velocityY<0&&s.addClass(t.up)},i.prototype._move=function(){var e=(this.$el,this.el),s=this,i=s.settings;i.x&&e.scrollWidth>0?(this.scrollLeft(this.scrollLeft()+this.velocity),Math.abs(this.velocity)>0&&(this.velocity=i.decelerate?s._decelerateVelocity(this.velocity,i.slowdown):this.velocity)):this.velocity=0,i.y&&e.scrollHeight>0?(this.scrollTop(this.scrollTop()+this.velocityY),Math.abs(this.velocityY)>0&&(this.velocityY=i.decelerate?s._decelerateVelocity(this.velocityY,i.slowdown):this.velocityY)):this.velocityY=0,s._setMoveClasses(i.deceleratingClass),t.isFunction(i.moved)&&i.moved.call(this,i),Math.abs(this.velocity)>0||Math.abs(this.velocityY)>0?this.moving||(this.moving=!0,window.requestAnimationFrame(function(){s.moving=!1,s._move()})):s.stop()},i.prototype._getScroller=function(){var e=this.$el;return(this.$el.is("body")||this.$el.is("html"))&&(e=t(window)),e},i.prototype.scrollLeft=function(t){var e=this._getScroller();return"number"!=typeof t?e.scrollLeft():(e.scrollLeft(t),void(this.settings.scrollLeft=t))},i.prototype.scrollTop=function(t){var e=this._getScroller();return"number"!=typeof t?e.scrollTop():(e.scrollTop(t),void(this.settings.scrollTop=t))},i.prototype._attachListeners=function(){var e=this.$el,i=this.settings;t.support.touch&&e.bind("touchstart",i.events.touchStart).bind("touchend",i.events.inputEnd).bind("touchmove",i.events.touchMove),e.mousedown(i.events.inputDown).mouseup(i.events.inputEnd).mousemove(i.events.inputMove),e.click(i.events.inputClick).scroll(i.events.scroll).bind("selectstart",s).bind("dragstart",i.events.dragStart)},i.prototype._detachListeners=function(){var e=this.$el,i=this.settings;t.support.touch&&e.unbind("touchstart",i.events.touchStart).unbind("touchend",i.events.inputEnd).unbind("touchmove",i.events.touchMove),e.unbind("mousedown",i.events.inputDown).unbind("mouseup",i.events.inputEnd).unbind("mousemove",i.events.inputMove),e.unbind("click",i.events.inputClick).unbind("scroll",i.events.scroll).unbind("selectstart",s).unbind("dragstart",i.events.dragStart)},t.Kinetic=i,t.fn.kinetic=function(e,s){return this.each(function(){var o=t(this),n=o.data(i.DATA_KEY),l=t.extend({},i.DEFAULTS,o.data(),"object"==typeof e&&e);n||o.data(i.DATA_KEY,n=new i(this,l)),"string"==typeof e&&n[e](s)})}}(window.jQuery||window.Zepto);

Open in new window

0
brucegustPHP DeveloperAuthor Commented:
Here's a more legible version of the updated jquery.kinetic.js code:

/** 

 jQuery.kinetic v2.0.6 

 Dave Taylor http://davetayls.me 


 @license The MIT License (MIT) 

 @preserve Copyright (c) 2012 Dave Taylor http://davetayls.me 

 */ 

(function ($){ 

  'use strict'; 


  var ACTIVE_CLASS = 'kinetic-active'; 


  /** 

   * Provides requestAnimationFrame in a cross browser way. 

   * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 

   */ 

  if (!window.requestAnimationFrame){ 


    window.requestAnimationFrame = ( function (){ 


      return window.webkitRequestAnimationFrame || 

        window.mozRequestAnimationFrame || 

        window.oRequestAnimationFrame || 

        window.msRequestAnimationFrame || 

        function (/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){ 

          window.setTimeout(callback, 1000 / 60); 

        }; 


    }()); 


  } 


  // add touch checker to jQuery.support 

  $.support = $.support || {}; 

  $.extend($.support, { 

    touch: 'ontouchend' in document 

  }); 

  var selectStart = function (){ 

    return false; 

  }; 



  // KINETIC CLASS DEFINITION 

  // ====================== 


  var Kinetic = function (element, settings) { 

    this.settings = settings; 

    this.el       = element; 

    this.$el      = $(element); 


    this._initElements(); 


    return this; 

  }; 


  Kinetic.DATA_KEY = 'kinetic'; 

  Kinetic.DEFAULTS = { 

    cursor: 'move', 

    decelerate: true, 

    triggerHardware: false, 

    y: true, 

    x: true, 

    slowdown: 0.9, 

    maxvelocity: 40, 

    throttleFPS: 60, 

    movingClass: { 

      up: 'kinetic-moving-up', 

      down: 'kinetic-moving-down', 

      left: 'kinetic-moving-left', 

      right: 'kinetic-moving-right' 

    }, 

    deceleratingClass: { 

      up: 'kinetic-decelerating-up', 

      down: 'kinetic-decelerating-down', 

      left: 'kinetic-decelerating-left', 

      right: 'kinetic-decelerating-right' 

    } 

  }; 



  // Public functions 


  Kinetic.prototype.start = function (options){ 

    this.settings = $.extend(this.settings, options); 

    this.velocity = options.velocity || this.velocity; 

    this.velocityY = options.velocityY || this.velocityY; 

    this.settings.decelerate = false; 

    this._move(); 

  }; 


  Kinetic.prototype.end = function (){ 

    this.settings.decelerate = true; 

  }; 


  Kinetic.prototype.stop = function (){ 

    this.velocity = 0; 

    this.velocityY = 0; 

    this.settings.decelerate = true; 

    if ($.isFunction(this.settings.stopped)){ 

      this.settings.stopped.call(this); 

    } 

  }; 


  Kinetic.prototype.detach = function (){ 

    this._detachListeners(); 

    this.$el 

      .removeClass(ACTIVE_CLASS) 

      .css('cursor', ''); 

  }; 


  Kinetic.prototype.attach = function (){ 

    if (this.$el.hasClass(ACTIVE_CLASS)) { 

      return; 

    } 

    this._attachListeners(this.$el); 

    this.$el 

      .addClass(ACTIVE_CLASS) 

      .css('cursor', this.settings.cursor); 

  }; 



  // Internal functions 


  Kinetic.prototype._initElements = function (){ 

    this.$el.addClass(ACTIVE_CLASS); 


    $.extend(this, { 

      xpos: null, 

      prevXPos: false, 

      ypos: null, 

      prevYPos: false, 

      mouseDown: false, 

      throttleTimeout: 1000 / this.settings.throttleFPS, 

      lastMove: null, 

      elementFocused: null 

    }); 


    this.velocity = 0; 

    this.velocityY = 0; 


    // make sure we reset everything when mouse up 

    $(document) 

      .mouseup($.proxy(this._resetMouse, this)) 

      .click($.proxy(this._resetMouse, this)); 


    this._initEvents(); 


    this.$el.css('cursor', this.settings.cursor); 


    if (this.settings.triggerHardware){ 

      this.$el.css({ 

        '-webkit-transform': 'translate3d(0,0,0)', 

        '-webkit-perspective': '1000', 

        '-webkit-backface-visibility': 'hidden' 

      }); 

    } 

  }; 


  Kinetic.prototype._initEvents = function(){ 

    var self = this; 

    this.settings.events = { 

      touchStart: function (e){ 

        var touch; 

        if (self._useTarget(e.target, e)){ 

          touch = e.originalEvent.touches[0]; 

          self._start(touch.clientX, touch.clientY); 

          e.stopPropagation(); 

        } 

      }, 

      touchMove: function (e){ 

        var touch; 

        if (self.mouseDown){ 

          touch = e.originalEvent.touches[0]; 

          self._inputmove(touch.clientX, touch.clientY); 

          if (e.preventDefault){ 

            e.preventDefault(); 

          } 

        } 

      }, 

      inputDown: function (e){ 

        if (self._useTarget(e.target, e)){ 

          self._start(e.clientX, e.clientY); 

          self.elementFocused = e.target; 

          if (e.target.nodeName === 'IMG'){ 

            e.preventDefault(); 

          } 

          e.stopPropagation(); 

        } 

      }, 

      inputEnd: function (e){ 

        if (self._useTarget(e.target, e)){ 

          self._end(); 

          self.elementFocused = null; 

          if (e.preventDefault){ 

            e.preventDefault(); 

          } 

        } 

      }, 

      inputMove: function (e){ 

        if (self.mouseDown){ 

          self._inputmove(e.clientX, e.clientY); 

          if (e.preventDefault){ 

            e.preventDefault(); 

          } 

        } 

      }, 

      scroll: function (e){ 

        if ($.isFunction(self.settings.moved)){ 

          self.settings.moved.call(self, self.settings); 

        } 

        if (e.preventDefault){ 

          e.preventDefault(); 

        } 

      }, 

      inputClick: function (e){ 

        if (Math.abs(self.velocity) > 0){ 

          e.preventDefault(); 

          return false; 

        } 

      }, 

      // prevent drag and drop images in ie 

      dragStart: function (e){ 

        if (self._useTarget(e.target, e) && self.elementFocused){ 

          return false; 

        } 

      } 

    }; 


    this._attachListeners(this.$el, this.settings); 


  }; 


  Kinetic.prototype._inputmove = function (clientX, clientY){ 

    var $this = this.$el; 

    var el = this.el; 


    if (!this.lastMove || new Date() > new Date(this.lastMove.getTime() + this.throttleTimeout)){ 

      this.lastMove = new Date(); 


      if (this.mouseDown && (this.xpos || this.ypos)){ 

        if (this.elementFocused){ 

          $(this.elementFocused).blur(); 

          this.elementFocused = null; 

          $this.focus(); 

        } 


        this.settings.decelerate = false; 

        this.velocity = this.velocityY = 0; 


        var scrollLeft = this.scrollLeft(); 

        var scrollTop = this.scrollTop(); 

        var movedX = (clientX - this.xpos); 

        var movedY = (clientY - this.ypos); 


        this.scrollLeft(this.settings.x ? scrollLeft - movedX : scrollLeft); 

        this.scrollTop(this.settings.y ? scrollTop - movedY : scrollTop); 


        this.prevXPos = this.xpos; 

        this.prevYPos = this.ypos; 

        this.xpos = clientX; 

        this.ypos = clientY; 


        this._calculateVelocities(); 

        this._setMoveClasses(this.settings.movingClass); 


        if ($.isFunction(this.settings.moved)){ 

          this.settings.moved.call($this, this.settings); 

        } 

      } 

    } 

  }; 


  Kinetic.prototype._calculateVelocities = function (){ 

    this.velocity = this._capVelocity(this.prevXPos - this.xpos, this.settings.maxvelocity); 

    this.velocityY = this._capVelocity(this.prevYPos - this.ypos, this.settings.maxvelocity); 

  }; 


  Kinetic.prototype._end = function (){ 

    if (this.xpos && this.prevXPos && this.settings.decelerate === false){ 

      this.settings.decelerate = true; 

      this._calculateVelocities(); 

      this.xpos = this.prevXPos = this.mouseDown = false; 

      this._move(); 

    } 

  }; 


  Kinetic.prototype._useTarget = function (target, event){ 

    if ($.isFunction(this.settings.filterTarget)){ 

      return this.settings.filterTarget.call(this, target, event) !== false; 

    } 

    return true; 

  }; 


  Kinetic.prototype._start = function (clientX, clientY){ 

    this.mouseDown = true; 

    this.velocity = this.prevXPos = 0; 

    this.velocityY = this.prevYPos = 0; 

    this.xpos = clientX; 

    this.ypos = clientY; 

  }; 


  Kinetic.prototype._resetMouse = function (){ 

    this.xpos = false; 

    this.ypos = false; 

    this.mouseDown = false; 

  }; 


  Kinetic.prototype._decelerateVelocity = function (velocity, slowdown){ 

    return Math.floor(Math.abs(velocity)) === 0 ? 0 // is velocity less than 1? 

      : velocity * slowdown; // reduce slowdown 

  }; 


  Kinetic.prototype._capVelocity = function (velocity, max){ 

    var newVelocity = velocity; 

    if (velocity > 0){ 

      if (velocity > max){ 

        newVelocity = max; 

      } 

    } else { 

      if (velocity < (0 - max)){ 

        newVelocity = (0 - max); 

      } 

    } 

    return newVelocity; 

  }; 


  Kinetic.prototype._setMoveClasses = function (classes){ 

    // FIXME: consider if we want to apply PL #44, this should not remove 

    // classes we have not defined on the element! 

    var settings = this.settings; 

    var $this = this.$el; 


    $this.removeClass(settings.movingClass.up) 

      .removeClass(settings.movingClass.down) 

      .removeClass(settings.movingClass.left) 

      .removeClass(settings.movingClass.right) 

      .removeClass(settings.deceleratingClass.up) 

      .removeClass(settings.deceleratingClass.down) 

      .removeClass(settings.deceleratingClass.left) 

      .removeClass(settings.deceleratingClass.right); 


    if (this.velocity > 0){ 

      $this.addClass(classes.right); 

    } 

    if (this.velocity < 0){ 

      $this.addClass(classes.left); 

    } 

    if (this.velocityY > 0){ 

      $this.addClass(classes.down); 

    } 

    if (this.velocityY < 0){ 

      $this.addClass(classes.up); 

    } 


  }; 



  // do the actual kinetic movement 

  Kinetic.prototype._move = function (){ 

    var $scroller = this.$el; 

    var scroller = this.el; 

    var self = this; 

    var settings = self.settings; 


    // set scrollLeft 

    if (settings.x && scroller.scrollWidth > 0){ 

      this.scrollLeft(this.scrollLeft() + this.velocity); 

      if (Math.abs(this.velocity) > 0){ 

        this.velocity = settings.decelerate ? 

          self._decelerateVelocity(this.velocity, settings.slowdown) : this.velocity; 

      } 

    } else { 

      this.velocity = 0; 

    } 


    // set scrollTop 

    if (settings.y && scroller.scrollHeight > 0){ 

      this.scrollTop(this.scrollTop() + this.velocityY); 

      if (Math.abs(this.velocityY) > 0){ 

        this.velocityY = settings.decelerate ? 

          self._decelerateVelocity(this.velocityY, settings.slowdown) : this.velocityY; 

      } 

    } else { 

      this.velocityY = 0; 

    } 


    self._setMoveClasses(settings.deceleratingClass); 


    if ($.isFunction(settings.moved)){ 

      settings.moved.call(this, settings); 

    } 


    if (Math.abs(this.velocity) > 0 || Math.abs(this.velocityY) > 0){ 

      if (!this.moving) { 

        this.moving = true; 

        // tick for next movement 

        window.requestAnimationFrame(function (){ 

          self.moving = false; 

          self._move(); 

        }); 

      } 

    } else { 

      self.stop(); 

    } 

  }; 


  // get current scroller to apply positioning to 

  Kinetic.prototype._getScroller = function(){ 

    var $scroller = this.$el; 

    if (this.$el.is('body') || this.$el.is('html')){ 

      $scroller = $(window); 

    } 

    return $scroller; 

  }; 


  // set the scroll position 

  Kinetic.prototype.scrollLeft = function(left){ 

    var $scroller = this._getScroller(); 

    if (typeof left === 'number'){ 

      $scroller.scrollLeft(left); 

      this.settings.scrollLeft = left; 

    } else { 

      return $scroller.scrollLeft(); 

    } 

  }; 

  Kinetic.prototype.scrollTop = function(top){ 

    var $scroller = this._getScroller(); 

    if (typeof top === 'number'){ 

      $scroller.scrollTop(top); 

      this.settings.scrollTop = top; 

    } else { 

      return $scroller.scrollTop(); 

    } 

  }; 


  Kinetic.prototype._attachListeners = function (){ 

    var $this = this.$el; 

    var settings = this.settings; 


    if ($.support.touch){ 

      $this 

        .bind('touchstart', settings.events.touchStart) 

        .bind('touchend', settings.events.inputEnd) 

        .bind('touchmove', settings.events.touchMove); 

    } 


    $this 

      .mousedown(settings.events.inputDown) 

      .mouseup(settings.events.inputEnd) 

      .mousemove(settings.events.inputMove); 


    $this 

      .click(settings.events.inputClick) 

      .scroll(settings.events.scroll) 

      .bind('selectstart', selectStart) // prevent selection when dragging 

      .bind('dragstart', settings.events.dragStart); 

  }; 


  Kinetic.prototype._detachListeners = function (){ 

    var $this = this.$el; 

    var settings = this.settings; 

    if ($.support.touch){ 

      $this 

        .unbind('touchstart', settings.events.touchStart) 

        .unbind('touchend', settings.events.inputEnd) 

        .unbind('touchmove', settings.events.touchMove); 

    } 


    $this 

      .unbind('mousedown', settings.events.inputDown) 

      .unbind('mouseup', settings.events.inputEnd) 

      .unbind('mousemove', settings.events.inputMove); 


    $this 

      .unbind('click', settings.events.inputClick) 

      .unbind('scroll', settings.events.scroll) 

      .unbind('selectstart', selectStart) // prevent selection when dragging 

      .unbind('dragstart', settings.events.dragStart); 

  }; 



  // EXPOSE KINETIC CONSTRUCTOR 

  // ========================== 

  $.Kinetic = Kinetic; 


  // KINETIC PLUGIN DEFINITION 

  // ======================= 


  $.fn.kinetic = function (option, callOptions) { 

    return this.each(function () { 

      var $this    = $(this); 

      var instance = $this.data(Kinetic.DATA_KEY); 

      var options  = $.extend({}, Kinetic.DEFAULTS, $this.data(), typeof option === 'object' && option); 


      if (!instance) { 

        $this.data(Kinetic.DATA_KEY, (instance = new Kinetic(this, options))); 

      } 


      if (typeof option === 'string') { 

        instance[option](callOptions); 

      } 


    }); 

  }; 


}(window.jQuery || window.Zepto)); 

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.