Hello Associates,
Sorry I need to appropriate the positioning tackle to this: http://dev.harfrooz.com/
I searched quite a bit and I came upon that my downside is expounded to iscroll.js File. I’ll add content material of this file right here. If you understand javascrip are you able to please have a look and inform me what parameters ought to I cahnge on this file to have a smoother and sooner scroll for popup in cell gadgets. Thanks
/*!
* iScroll v4.1.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* Launched underneath MIT license, http://cubiq.org/license
*/
(operate($){
var m = Math,
mround = operate (r) return r >> 0; ,
vendor = (/webkit/i).take a look at(navigator.appVersion) ? 'webkit' :
(/firefox/i).take a look at(navigator.userAgent) ? 'Moz' :
(/trident/i).take a look at(navigator.userAgent) ? 'ms' :
'opera' in window ? 'O' : '',
// Browser capabilities
isAndroid = (/android/gi).take a look at(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).take a look at(navigator.appVersion),
isPlaybook = (/playbook/gi).take a look at(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).take a look at(navigator.appVersion),
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
hasTouch="ontouchstart" in window && !isTouchPad,
hasTransform = vendor + 'Remodel' in doc.documentElement.type,
hasTransitionEnd = isIDevice || isPlaybook,
nextFrame = (operate() )(),
cancelFrame = (operate () )(),
// Occasions
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
// Helpers
trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',
// Constructor
iScroll = operate (el, choices)
var that = this,
doc = doc,
i;
that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
that.scroller = that.wrapper.youngsters[0];
// Default choices
that.choices =
hScroll: true,
vScroll: true,
x: 0,
y: 0,
bounce: true,
bounceLock: false,
momentum: true,
lockDirection: true,
useTransform: true,
useTransition: false,
topOffset: 0,
checkDOMChanges: false, // Experimental
overflow: 'xy',
// Scrollbar
hScrollbar: true,
vScrollbar: true,
fixedScrollbar: isAndroid,
hideScrollbar: isIDevice,
fadeScrollbar: isIDevice && has3d,
scrollbarClass: '',
// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4,
doubleTapZoom: 2,
wheelAction: 'scroll',
// Snap
snap: false,
snapThreshold: 1,
// Occasions
onRefresh: null,
onBeforeScrollStart: operate (e) e.preventDefault(); ,
onScrollStart: null,
onBeforeScrollMove: null,
onScrollMove: null,
onBeforeScrollEnd: null,
onScrollEnd: null,
onTouchEnd: null,
onDestroy: null,
onZoomStart: null,
onZoom: null,
onZoomEnd: null,
scroller: null
;
// Consumer outlined choices
for (i in choices) that.choices[i] = choices[i];
if(that.choices.overflow.indexOf('x') != -1)
that.wrapper.type.overflowX = 'hidden';
if (that.choices.overflow.indexOf('y') != -1)
that.wrapper.type.overflowY = 'hidden';
if(that.choices.scroller)
that.scroller = that.choices.scroller;
// Set beginning place
that.x = that.choices.x;
that.y = that.choices.y;
// Normalize choices
that.choices.useTransform = hasTransform ? that.choices.useTransform : false;
that.choices.hScrollbar = that.choices.hScroll && that.choices.hScrollbar;
that.choices.vScrollbar = that.choices.vScroll && that.choices.vScrollbar;
that.choices.zoom = that.choices.useTransform && that.choices.zoom;
that.choices.useTransition = hasTransitionEnd && that.choices.useTransition;
// Helpers FIX ANDROID BUG!
// translate3d and scale does not work collectively!
// Ignoring 3d ONLY WHEN YOU SET that.choices.zoom
if ( that.choices.zoom && isAndroid )
trnOpen = 'translate(';
trnClose=")";
// Set some default kinds
that.scroller.type[vendor + 'TransitionProperty'] = that.choices.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'prime left';
that.scroller.type[vendor + 'TransitionDuration'] = '0';
that.scroller.type[vendor + 'TransformOrigin'] = '0 0';
if (that.choices.useTransition) that.scroller.type[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
if (that.choices.useTransform) that.scroller.type[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
else that.scroller.type.cssText += ';place:absolute;prime:' + that.y + 'px;left:' + that.x + 'px';
if (that.choices.useTransition) that.choices.fixedScrollbar = true;
that.refresh();
that._bind(RESIZE_EV, window);
if (!hasTouch)
that._bind('mouseout', that.wrapper);
if (that.choices.wheelAction != 'none')
//that._bind(WHEEL_EV);
$(that.scroller).bind('mousewheel', $.proxy(that._wheel, that));
else
that._bind(START_EV);
if (that.choices.checkDOMChanges) that.checkDOMTime = setInterval(operate ()
that._checkDOMChanges();
, 2000);
if(!hasTouch)
that.menter = 0;
$(that.wrapper).bind('mouseenter.iscroll', operate()
that.menter = 1;
$(that.vScrollbarWrapper).cease().fadeTo(250, 1);
).bind('mouseleave.iscroll', operate()
that.menter = 0;
if(!that.dMouseDown)
$(that.vScrollbarWrapper).cease().fadeTo(250, 0);
);
;
// Prototype
iScroll.prototype = {
enabled: true,
x: 0,
y: 0,
steps: [],
scale: 1,
currPageX: 0, currPageY: 0,
pagesX: [], pagesY: [],
aniTime: null,
wheelZoomCount: 0,
handleEvent: operate (e)
var that = this;
swap(e.sort)
case START_EV:
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV: that._move(e); break;
case END_EV:
case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break;
case 'mouseout': that._mouseout(e); break;
case 'webkitTransitionEnd': that._transitionEnd(e); break;
,
_checkDOMChanges: operate () this.animating ,
_scrollbar: operate (dir) {
var that = this,
doc = doc,
bar;
if (!that[dir + 'Scrollbar'])
if (that[dir + 'ScrollbarWrapper'])
if (hasTransform) that[dir + 'ScrollbarIndicator'].type[vendor + 'Transform'] = '';
$(that[dir + 'ScrollbarWrapper']).take away();
that[dir + 'ScrollbarWrapper'] = null;
that[dir + 'ScrollbarIndicator'] = null;
return;
if (!that[dir + 'ScrollbarWrapper'])
// Create the scrollbar wrapper
bar = doc.createElement('div');
if (that.choices.scrollbarClass) bar.className = that.choices.scrollbarClass + dir.toUpperCase();
else bar.type.cssText="place:absolute;z-index:100;" + (dir == 'h' ? 'top:7px;backside:1px;left:2px;proper:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;backside:' + (that.hScrollbar ? '7' : '2') + 'px;prime:2px;proper:1px');
bar.type.cssText += (hasTouch ? ';pointer-events:none' : '') + (that.choices.hideScrollbar ? (';-' + vendor + '-transition-property:opacity;-' + vendor + '-transition-duration:' + (that.choices.fadeScrollbar ? '350ms' : '0')) : '') + ';overflow:hidden;opacity:' + (that.choices.hideScrollbar ? '0' : '1');
that.wrapper.appendChild(bar);
that[dir + 'ScrollbarWrapper'] = bar;
// Create the scrollbar indicator
bar = doc.createElement('div');
if (!that.choices.scrollbarClass)
bar.type.cssText="place:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px stable rgba(255,255,255,0.9);-" + vendor + '-background-clip:padding-box;-' + vendor + '-box-sizing:border-box;' + (dir == 'h' ? 'top:100%' : 'width:100%') + ';-' + vendor + '-border-radius:3px;border-radius:3px';
bar.type.cssText += (hasTouch ? ';pointer-events:none' : '') + ';-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0; ' + (that.choices.useTransform ? ('-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose) : '');
if (that.choices.useTransition) bar.type.cssText += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
that[dir + 'ScrollbarWrapper'].appendChild(bar);
that[dir + 'ScrollbarIndicator'] = bar;
if(!hasTouch)
that.dMouse = h: 0, v: 0;
that.dPos = h: 0, v: 0;
that.dMouseDown = 0;
var downhandler = operate(oEvent)
that.dMouse[dir] = (dir == 'h' ? oEvent.pageX : oEvent.pageY);
that.dPos[dir] = (dir == 'h' ? that.x : that.y) * that[dir + 'ScrollbarProp'];
that.dMouseDown = 1;
$('<div id="scrollmask"></div>').css(place: 'fastened', prime: 0, left: 0, width: '100%', top: '100%', zIndex: 2147483645, background: 'clear').appendTo(doc.physique);
$(doc).bind('mousemove', movehandler).bind('mouseup', uphandler);
return false;
,
movehandler = operate (oEvent)
if(that.dMouseDown)
var pos = Math.min((dir == 'h' ? that.hScrollbarMaxScroll : that.vScrollbarMaxScroll), Math.max(0, (dir == 'h' ? oEvent.pageX : oEvent.pageY) - that.dMouse[dir] + that.dPos[dir]));
that.scrollTo(dir == 'h' ? pos / that.hScrollbarProp : 0, dir == 'h' ? 0 : pos / that.vScrollbarProp, 0);
return false;
,
uphandler = operate()
that.dMouseDown = 0;
if(!hasTouch && !that.menter)
$(that.vScrollbarWrapper).cease().fadeTo(250, 0);
$('#scrollmask').take away();
$(doc).unbind('mousemove', movehandler).unbind('mouseup', uphandler);
return false;
;
$(bar).bind('mousedown', downhandler);
$(that[dir + 'ScrollbarWrapper']).bind('click on', operate(oEvent)
var pos = Math.min((dir == 'h' ? that.hScrollbarMaxScroll : that.vScrollbarMaxScroll), Math.max(0, (dir == 'h' ? oEvent.pageX : oEvent.pageY) - $(this).offset().prime));
that.scrollTo(dir == 'h' ? pos / that.hScrollbarProp : 0, dir == 'h' ? 0 : pos / that.vScrollbarProp, 250);
);
if (dir == 'h')
that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
that.hScrollbarIndicatorSize = m.max(mround(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
that.hScrollbarIndicator.type.width = that.hScrollbarIndicatorSize + 'px';
that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
else
that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
that.vScrollbarIndicatorSize = m.max(mround(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
that.vScrollbarIndicator.type.top = that.vScrollbarIndicatorSize + 'px';
that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
// Reset place
that._scrollbarPos(dir, true);
},
_resize: operate ()
var that = this;
setTimeout(operate () that.refresh(); , isAndroid ? 200 : 0);
,
_pos: operate (x, y)
x = this.hScroll ? x : 0;
y = this.vScroll ? y : 0;
if (this.choices.useTransform)
this.scroller.type[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')';
else
x = mround(x);
y = mround(y);
this.scroller.type.left = x + 'px';
this.scroller.type.prime = y + 'px';
this.x = x;
this.y = y;
this._scrollbarPos('h');
this._scrollbarPos('v');
,
_scrollbarPos: operate (dir, hidden)
var that = this,
pos = dir == 'h' ? that.x : that.y,
dimension;
if (!that[dir + 'Scrollbar']) return;
pos = that[dir + 'ScrollbarProp'] * pos;
if (pos < 0)
if (!that.choices.fixedScrollbar)
dimension = that[dir + 'ScrollbarIndicatorSize'] + mround(pos * 3);
if (dimension < 20) dimension = 20;
that[dir + 'ScrollbarIndicator'].type[dir == 'h' ? 'width' : 'height'] = dimension + 'px';
pos = 0;
else if (pos > that[dir + 'ScrollbarMaxScroll'])
if (!that.choices.fixedScrollbar)
dimension = that[dir + 'ScrollbarIndicatorSize'] - mround((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
if (dimension < 20) dimension = 20;
that[dir + 'ScrollbarIndicator'].type[dir == 'h' ? 'width' : 'height'] = dimension + 'px';
pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - dimension);
else
pos = that[dir + 'ScrollbarMaxScroll'];
that[dir + 'ScrollbarWrapper'].type[vendor + 'TransitionDelay'] = '0';
that[dir + 'ScrollbarWrapper'].type.opacity = hidden && that.choices.hideScrollbar ? '0' : '1';
if(that.choices.useTransform)
that[dir + 'ScrollbarIndicator'].type[vendor + 'Transform'] = trnOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + trnClose;
else
that[dir + 'ScrollbarIndicator'].type[dir == 'h' ? 'left' : 'top'] = (pos) + 'px';
if($.browser.msie && $.browser.model < 9)
that[dir + 'ScrollbarIndicator'].type[dir == 'h' ? 'left' : 'top'] = (pos) + 'px';
,
_start: operate (e)
var that = this,
level = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2;
if (!that.enabled) return;
if (that.choices.onBeforeScrollStart) that.choices.onBeforeScrollStart.name(that, e);
if (that.choices.useTransition ,
_move: operate (e) ,
_end: operate (e) {
if (hasTouch && e.touches.size != 0) return;
var that = this,
level = hasTouch ? e.changedTouches[0] : e,
goal, ev,
momentumX = dist:0, time:0 ,
momentumY = dist:0, time:0 ,
period = (e.timeStamp || Date.now()) - that.startTime,
newPosX = that.x,
newPosY = that.y,
distX, distY,
newDuration,
snap,
scale;
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
if (that.choices.onBeforeScrollEnd) that.choices.onBeforeScrollEnd.name(that, e);
if (that.zoomed)
scale = that.scale * that.lastScale;
scale = Math.max(that.choices.zoomMin, scale);
scale = Math.min(that.choices.zoomMax, scale);
that.lastScale = scale / that.scale;
that.scale = scale;
that.x = that.originX - that.originX * that.lastScale + that.x;
that.y = that.originY - that.originY * that.lastScale + that.y;
that.scroller.type[vendor + 'TransitionDuration'] = '200ms';
that.scroller.type[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + that.scale + ')';
that.zoomed = false;
that.refresh();
if (that.choices.onZoomEnd) that.choices.onZoomEnd.name(that, e);
return;
if (!that.moved) {
if (hasTouch)
if (that.doubleTapTimer && that.choices.zoom)
// Double tapped
clearTimeout(that.doubleTapTimer);
that.doubleTapTimer = null;
if (that.choices.onZoomStart) that.choices.onZoomStart.name(that, e);
that.zoom(that.pointX, that.pointY, that.scale == 1 ? that.choices.doubleTapZoom : 1);
if (that.choices.onZoomEnd)
setTimeout(operate()
that.choices.onZoomEnd.name(that, e);
, 200); // 200 is default zoom period
else
that.doubleTapTimer = setTimeout(operate ()
that.doubleTapTimer = null;
// Discover the final touched component
goal = level.goal;
whereas (goal.nodeType != 1) goal = goal.parentNode;
if (goal.tagName != 'SELECT' && goal.tagName != 'INPUT' && goal.tagName != 'TEXTAREA')
ev = doc.createEvent('MouseEvents');
ev.initMouseEvent('click on', true, true, e.view, 1,
level.screenX, level.screenY, level.clientX, level.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
0, null);
ev._fake = true;
goal.dispatchEvent(ev);
, that.choices.zoom ? 250 : 0);
that._resetPos(200);
if (that.choices.onTouchEnd) that.choices.onTouchEnd.name(that, e);
return;
}
