I have this script which enable scrollbar within <div>
I want to add functionality to scroll even using "Mouse Scroll-Wheel"
Here is code :
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
return{
init:function(a,c,b,s,d){
a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
b.style.display='block'; a.style.overflow='hidden';
var h=a.offsetHeight, t=c.offsetHeight;
if(t<h){
b.style.display='none'
}else{
a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
s.onselectstart=function(){return false}
}
a.l=b.offsetHeight-s.offsetHeight
},
st:function(e,f){
var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
if(a.mv){this.sp(f)}
a.mv=function(event){TINY.scroller.mv(event,f)};
a.sp=function(){TINY.scroller.sp(f)};
if(T$$$()){
document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
}else{
document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
}
if(a.d){s.className+=' '+a.n}
},
mv:function(e,f){
var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
if(m>=0&&m<a.l){
s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
}else if(m<0){
s.style.top=0; c.style.top=0
}else if(m>a.l){
s.style.top=a.l+'px'; c.style.top=a.m+'px'
}
},
sp:function(f){
var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
if(T$$$()){
document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
}else{
document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
}
a.mv=0;
}
}
}();
TINY.cursor=function(){
return{
top:function(e){
return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
}
}
}();
How to add this ability to current code ?
Thanks.
EDIT : Issue Solved
Use this code:
http://adomas.org/javascript-mouse-wheel/
TINY.scroller=function(){
return{
init:function(a,c,b,s,d){
a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
b.style.display='block'; a.style.overflow='hidden';
var h=a.offsetHeight, t=c.offsetHeight;
if(t<h){
b.style.display='none'
}else{
a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
s.onselectstart=function(){return false}
}
if (window.addEventListener) a.addEventListener('DOMMouseScroll', function(event){TINY.scroller.wheel(event,a.id); return false}, false);
/** IE/Opera. */
a.onmousewheel = a.onmousewheel = function(event){TINY.scroller.wheel(event,a.id); return false};
a.l=b.offsetHeight-s.offsetHeight
},
/** Event handler for mouse wheel event.
*/
wheel: function (event,f){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta) {
console.log(delta);
var a=T$(f), s=T$(a.s), c=T$(a.c); a.bcs=TINY.cursor.top(event); a.bct=parseInt(s.style.top);
var m = a.bct - delta;
if(m>=0&&m<a.l){
s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
}else if(m<0){
s.style.top=0; c.style.top=0
}else if(m>a.l){
s.style.top=a.l+'px'; c.style.top=a.m+'px'
}
}
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
},
st:function(e,f){
var a=T$(f), s=T$(a.s), c=T$(a.c); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
if(a.mv){this.sp(f)}
a.mv=function(event){TINY.scroller.mv(event,f)};
a.sp=function(){TINY.scroller.sp(f)};
if(T$$$()){
document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
}else{
document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
}
if(a.d){s.className+=' '+a.n}
},
mv:function(e,f){
var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
if(m>=0&&m<a.l){
s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
}else if(m<0){
s.style.top=0; c.style.top=0
}else if(m>a.l){
s.style.top=a.l+'px'; c.style.top=a.m+'px'
}
},
sp:function(f){
var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
if(T$$$()){
document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
}else{
document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
}
a.mv=0;
}
}
}();
Or, just create a hidden scrollbar on the left, under your scrollbar!
Related
Assume 6 absolute positioned HTML elements stacked one on top of the other, A-F, with "A" on top.
<body data-swipe-threshold="100">
<div><img alt = "F"/></div>
<div><img alt = "E"/></div>
<div><img alt = "D"/></div>
<div><img alt = "C"/></div>
<div><img alt = "B"/></div>
<div><img alt = "A"/></div>
</body>
For touch-enabled screens I want the user to be able to swipe to the right over the "A" div/image to place it on the bottom of the stack (exposing "B"). The next right-swipe exposing "C", etc. Conversely, a swipe left should bring the "card" on the bottom of the deck to the top, where it becomes visible. I would allow "F" to expose "A" with a right-swipe when "F" is on top, and also allow "A" to expose "F" with a left swipe. I realize I'll be manipulating zIndex, but I seem unable to capture/process a swipe event with elements stacked in this way. "swiped-events.js" is the script I am using. My code is here: https://jsfiddle.net/okrcmLw5/ but even when I test outside of "fiddle" the demo seems to ignore my swipes. Thanks!
swiped-events.js creates an event when the user swipes. It does this on the element at which the touchstart event was seen, and it looks for touchstart events on the whole document.
Putting an event listener on the deck element receives the 'swipe' event but the target of the event seems to be the contained img element. So we cannot use event.target to find the whole swiped div, but it's the whole swiped div we want to move.
If we do not try to do things with z-index but instead use the JS prepend and appendChild functions we can move the top element to the bottom or vice versa without worrying about which of the div's child elements (there is only one at the moment, but there is no reason there could not be several, a caption for instance) has been swiped.
Here's the JS to do this:
document.getElementById('deck').addEventListener('swiped-left', function () { deck.appendChild(deck.firstElementChild); });
document.getElementById('deck').addEventListener('swiped-right', function () { deck.prepend(deck.lastElementChild); });
and here is a snippet. It includes all the js code from github.com/john-doherty/swiped-event in case that gets moved/deleted. Snippet tested on touch device - iPad with IOS14.2 - and on Edge dev tools 'emulator'.
/*!
* swiped-events.js - v#version#
* Pure JavaScript swipe events
* https://github.com/john-doherty/swiped-events
* #inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
* #author John Doherty <www.johndoherty.info>
* #license MIT
*/
function init() {
'use strict';
// patch CustomEvent to allow constructor creation (IE/Chrome)
if (typeof window.CustomEvent !== 'function') {
window.CustomEvent = function (event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
};
window.CustomEvent.prototype = window.Event.prototype;
}
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);
var xDown = null;
var yDown = null;
var xDiff = null;
var yDiff = null;
var timeDown = null;
var startEl = null;
/**
* Fires swiped event if swipe detected on touchend
* #param {object} e - browser event object
* #returns {void}
*/
function handleTouchEnd(e) {
// if the user released on a different target, cancel!
// !!THIS NEVER HAPPENS AT LEAST ON SAFARI IPAD IOS 14.2, IF RELEASE OUTSIDE THE START ELEMENT IT GIVES THE TARGET AS THE START ELEMENT
if (startEl !== e.target) { return;}
var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px
var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10); // default 500ms
var timeDiff = Date.now() - timeDown;
var eventType = '';
var changedTouches = e.changedTouches || e.touches || [];
if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
if (xDiff > 0) {
eventType = 'swiped-left';
}
else {
eventType = 'swiped-right';
}
}
}
else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
if (yDiff > 0) {
eventType = 'swiped-up';
}
else {
eventType = 'swiped-down';
}
}
if (eventType !== '') {
var eventData = {
dir: eventType.replace(/swiped-/, ''),
xStart: parseInt(xDown, 10),
xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
yStart: parseInt(yDown, 10),
yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
};
// fire `swiped` event event on the element that started the swipe
startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
// fire `swiped-dir` event on the element that started the swipe
startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
}
// reset values
xDown = null;
yDown = null;
timeDown = null;
}
/**
* Records current location on touchstart event
* #param {object} e - browser event object
* #returns {void}
*/
function handleTouchStart(e) {
// if the element has data-swipe-ignore="true" we stop listening for swipe events
if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
startEl = e.target;
timeDown = Date.now();
xDown = e.touches[0].clientX;
yDown = e.touches[0].clientY;
xDiff = 0;
yDiff = 0;
}
/**
* Records location diff in px on touchmove event
* #param {object} e - browser event object
* #returns {void}
*/
function handleTouchMove(e) {
if (!xDown || !yDown) return;
var xUp = e.touches[0].clientX;
var yUp = e.touches[0].clientY;
xDiff = xDown - xUp;
yDiff = yDown - yUp;
}
/**
* Gets attribute off HTML element or nearest parent
* #param {object} el - HTML element to retrieve attribute from
* #param {string} attributeName - name of the attribute
* #param {any} defaultValue - default value to return if no match found
* #returns {any} attribute value or defaultValue
*/
function getNearestAttribute(el, attributeName, defaultValue) {
// walk up the dom tree looking for data-action and data-trigger
while (el && el !== document.documentElement) {
var attributeValue = el.getAttribute(attributeName);
if (attributeValue) {
return attributeValue;
}
el = el.parentNode;
}
return defaultValue;
}
}
document.getElementById('deck').addEventListener('swiped-left', function () { deck.appendChild(deck.firstElementChild); });
document.getElementById('deck').addEventListener('swiped-right', function () { deck.prepend(deck.lastElementChild); });
init();
body { overflow: hidden; padding: 100px; }
#deck {
position: relative;
}
#deck > div {
position: absolute;
top: 0;
left: 0;
}
<div id="deck" data-swipe-threshold="100">
<div><img src="http://dummyimage.com/250x250/000/fff&text=F" /></div>
<div><img src="http://dummyimage.com/250x250/000/fff&text=E" /></div>
<div><img src="http://dummyimage.com/250x250/000/fff&text=D" /></div>
<div><img src="http://dummyimage.com/250x250/000/fff&text=C" /></div>
<div><img src="http://dummyimage.com/250x250/000/fff&text=B" /></div>
<div><img src="http://dummyimage.com/250x250/000/fff&text=A" /></div>
</div>
Scalize is a jQuery plugin used for adding custom markers (hotspots) with custom popovers and animations to containers or images.
But now When I click one by one on pointer it show all one by one But I am trying to show only one so when click another pointer will close the other which already opened.
Here is my EXAMPLE
(function(jQuery) {
"use strict";
//----------------------------------------//
// Variable
//----------------------------------------//
var variable = {
width : 0,
height : 0,
selector : '.item-point',
styleSelector : 'circle',
animationSelector : 'pulse2',
animationPopoverIn : 'flipInY',
animationPopoverOut : 'flipOutY',
onInit : null,
getSelectorElement : null,
getValueRemove : null
}
//----------------------------------------//
// Scaling
//----------------------------------------//
var scaling = {
settings : null,
//----------------------------------------//
// Initialize
//----------------------------------------//
init: function(el, options){
this.settings = jQuery.extend(variable, options);
this.event(el);
scaling.layout(el);
jQuery(window).on('load', function(){
scaling.layout(el);
});
jQuery(el).find('.target').on('load', function(){
scaling.layout(el);
});
jQuery(window).on('resize', function(){
scaling.layout(el);
});
},
//----------------------------------------//
// Event
//----------------------------------------//
event : function(elem){
// Set Style Selector
if ( this.settings.styleSelector ) {
jQuery(this.settings.selector).addClass( this.settings.styleSelector );
}
// Set Animation
if ( this.settings.animationSelector ) {
if( this.settings.animationSelector == 'marker' ){
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
jQuery(this.settings.selector).append('<div class="pin"></div>')
jQuery(this.settings.selector).append('<div class="pulse"></div>')
}else{
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
}
}
// Event On Initialize
if ( jQuery.isFunction( this.settings.onInit ) ) {
this.settings.onInit();
}
// Content add class animated element
jQuery(elem).find('.content').addClass('animated');
// Wrapper selector
jQuery(this.settings.selector).wrapAll( "<div class='wrap-selector' />");
// Event Selector
jQuery(this.settings.selector).each(function(){
// Toggle
jQuery('.toggle', this).on('click', function(e){
e.preventDefault();
jQuery(this).closest(scaling.settings.selector).toggleClass('active');
// Selector Click
var content = jQuery(this).closest(scaling.settings.selector).data('popover'),
id = jQuery(content);
if(jQuery(this).closest(scaling.settings.selector).hasClass('active') && !jQuery(this).closest(scaling.settings.selector).hasClass('disabled')){
if ( jQuery.isFunction( scaling.settings.getSelectorElement ) ) {
scaling.settings.getSelectorElement(jQuery(this).closest(scaling.settings.selector));
}
id.fadeIn(500,function(){
if( getBrowserName() == "Safari" ){
setTimeout(function(){
id.removeClass('flipInY');
},125);
}
});
scaling.layout(elem);
id.removeClass(scaling.settings.animationPopoverOut);
id.addClass(scaling.settings.animationPopoverIn);
}else{
if(jQuery.isFunction( scaling.settings.getValueRemove )){
scaling.settings.getValueRemove(jQuery(this).closest(scaling.settings.selector));
}
id.removeClass(scaling.settings.animationPopoverIn);
id.addClass(scaling.settings.animationPopoverOut);
id.delay(500).fadeOut();
}
});
// Exit
var target = jQuery(this).data('popover'),
idTarget = jQuery(target);
idTarget.find('.exit').on('click', function(e){
e.preventDefault();
// selector.removeClass('active');
jQuery('[data-popover="'+ target +'"]').removeClass('active');
idTarget.removeClass(scaling.settings.animationPopoverIn);
idTarget.addClass(scaling.settings.animationPopoverOut);
idTarget.delay(500).fadeOut();
});
});
},
//----------------------------------------//
// Layout
//----------------------------------------//
layout : function(elem){
// Get Original Image
var image = new Image();
image.src = elem.find('.target').attr("src");
// Variable
var width = image.naturalWidth,
height = image.naturalHeight,
getWidthLess = jQuery(elem).width(),
setPersenWidth = getWidthLess/width * 100,
setHeight = height * setPersenWidth / 100;
// Set Heigh Element
jQuery(elem).css("height", setHeight);
// Resize Width
if( jQuery(window).width() < width ){
jQuery(elem).stop().css("width","100%");
}else{
jQuery(elem).stop().css("width",width);
}
// Set Position Selector
jQuery(this.settings.selector).each(function(){
if( jQuery(window).width() < width ){
var getTop = jQuery(this).data("top") * setPersenWidth / 100,
getLeft = jQuery(this).data("left") * setPersenWidth / 100;
}else{
var getTop = jQuery(this).data("top"),
getLeft = jQuery(this).data("left");
}
jQuery(this).css("top", getTop + "px");
jQuery(this).css("left", getLeft + "px");
// Target Position
var target = jQuery(this).data('popover'),
allSize = jQuery(target).find('.head').outerHeight() + jQuery(target).find('.body').outerHeight() + jQuery(target).find('.footer').outerHeight();
jQuery(target).css("left", getLeft + "px");
jQuery(target).css("height", allSize + "px");
if(jQuery(target).hasClass('bottom')){
var getHeight = jQuery(target).outerHeight(),
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else if(jQuery(target).hasClass('center')){
var getHeight = jQuery(target).outerHeight() * 0.50,
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else{
jQuery(target).css("top", getTop + "px");
}
jQuery('.toggle', this).css('width', jQuery(this).outerWidth());
jQuery('.toggle', this).css('height', jQuery(this).outerHeight());
// Toggle Size
if(jQuery(this).find('.pin')){
var widthThis = jQuery('.pin', this).outerWidth(),
heightThis = jQuery('.pin', this).outerHeight();
jQuery('.toggle', this).css('width', widthThis);
jQuery('.toggle', this).css('height', heightThis);
}
});
}
};
//----------------------------------------//
// Scalize Plugin
//----------------------------------------//
jQuery.fn.scalize = function(options){
return scaling.init(this, options);
};
}(jQuery));
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}
Add this to your initialisation:
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
This hooks into the getSelectorElement method in the Scalize plugin and triggers a click on any active (open) elements that don't match the most recently clicked item.
Add it like so:
$(document).ready(function(){
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'fadeIn',
animationPopoverOut: 'fadeOut',
animationSelector: 'pulse2',
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
});
});
Note, because this is hooking into existing methods in the plugin it's a little safer (no unpredictable side effects, plus you get the intended transition out on the disappearing elements). Fiddle.
I've modified your jsFiddle to work.
TL;DR: Anytime an point is clicked, if there are other active siblings, loop over them and hide their popups.
It isn't a pretty way of doing it but it is working in the Fiddle.
$('.scalize').on('click', '.item-point', (function() {
$(this).siblings('.item-point.active').each(function() {
var popover = $(this).data('popover');
$(popover).removeClass('fadeIn').css({
'display': 'none'
});
$(this).removeClass('active');
});
}));
I am using DataGrid component of Ext.js 4.2.2 in RTL mode
In official example of that component I am using CellEditing plugin.
When I press the tab key for tab navigation in cell editor.
But when the cell editor gets out of grid region the scroll bar doesn't adapt itself to new position.
You can see the problem in following image.
I am using Chrome as browser.
Any idea?
After debugging Ext.js code for about 2 days I found the problem.
The problem was in one of Dom.Element_Scroll's methods.
With overriding that method the problem solved.
Originally the problem cause was, not normalizing scrollLeft value for setting to container element in RTL mode.
you should change methods like this.
me.scrollChildFly.attach(container).ScrollTo('left', newPos, animate);
To
me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
and the same for scroll top.
The full code to use is as follows.
NOTE: I am using Ext.JS 4.2.2
*/
Ext.define('Ext.rtl.dom.Element_scroll', {
override: 'Ext.dom.Element',
/**
* Scrolls this element into view within the passed container.
* #param {String/HTMLElement/Ext.Element} [container=document.body] The container element
* to scroll. Should be a string (id), dom node, or Ext.Element.
* #param {Boolean} [hscroll=true] False to disable horizontal scroll.
* #param {Boolean/Object} [animate] true for the default animation or a standard Element
* #param {Boolean} [highlight=false] true to {#link #highlight} the element when it is in view.
* animation config object
* #return {Ext.dom.Element} this
*/
scrollIntoView: function (container, hscroll, animate, highlight) {
var me = this,
dom = me.dom,
offsets = me.getOffsetsTo(container = Ext.getDom(container) || Ext.getBody().dom),
// el's box
left = offsets[0] + container.scrollLeft,
top = offsets[1] + container.scrollTop,
bottom = top + dom.offsetHeight,
right = left + dom.offsetWidth,
// ct's box
ctClientHeight = container.clientHeight,
ctScrollTop = parseInt(container.scrollTop, 10),
ctScrollLeft = parseInt(container.scrollLeft, 10),
ctBottom = ctScrollTop + ctClientHeight,
ctRight = ctScrollLeft + container.clientWidth,
newPos;
// Highlight upon end of scroll
if (highlight) {
if (animate) {
animate = Ext.apply({
listeners: {
afteranimate: function () {
me.scrollChildFly.attach(dom).highlight();
}
}
}, animate);
} else {
me.scrollChildFly.attach(dom).highlight();
}
}
if (dom.offsetHeight > ctClientHeight || top < ctScrollTop) {
newPos = top;
} else if (bottom > ctBottom) {
newPos = bottom - ctClientHeight;
}
if (newPos != null) {
//previous : me.scrollChildFly.attach(container).ScrollTo('top', newPos, animate);
me.scrollChildFly.attach(container).rtlScrollTo('top', newPos, animate);
}
if (hscroll !== false) {
newPos = null;
if (dom.offsetWidth > container.clientWidth || left < ctScrollLeft) {
newPos = left;
} else if (right > ctRight) {
newPos = right - container.clientWidth;
}
if (newPos != null) {
// previous : me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
}
}
return me;
},
});
So, I'm looking to implement the ability for a plugin I wrote to read a touch "swipe" from a touch-capable internet device, like an iPhone, iPad or android.
Is there anything out there? I'm not looking for something as full as jQtouch, though was considering reverse engineering the code I would need out of it.
Any suggestions on the best way to approach this? A snippet of code already available?
Addendum: I realize in hindsight the solution won't strictly be jQuery, as I'm pretty sure there aren't any built-in methods to handle this. I would expect standard Javascript to find itself in the answer.
(function($) {
$.fn.swipe = function(options) {
// Default thresholds & swipe functions
var defaults = {
threshold: {
x: 30,
y: 10
},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') },
preventDefaultEvents: true
};
var options = $.extend(defaults, options);
if (!this) return false;
return this.each(function() {
var me = $(this)
// Private variables for each element
var originalCoord = { x: 0, y: 0 }
var finalCoord = { x: 0, y: 0 }
// Screen touched, store the original coordinate
function touchStart(event) {
console.log('Starting swipe gesture...')
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
}
// Store coordinates as finger is swiping
function touchMove(event) {
if (defaults.preventDefaultEvents)
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
finalCoord.y = event.targetTouches[0].pageY
}
// Done Swiping
// Swipe should only be on X axis, ignore if swipe on Y axis
// Calculate if the swipe was left or right
function touchEnd(event) {
console.log('Ending swipe gesture...')
var changeY = originalCoord.y - finalCoord.y
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
changeX = originalCoord.x - finalCoord.x
if(changeX > defaults.threshold.x) {
defaults.swipeLeft()
}
if(changeX < (defaults.threshold.x*-1)) {
defaults.swipeRight()
}
}
}
// Swipe was canceled
function touchCancel(event) {
console.log('Canceling swipe gesture...')
}
// Add gestures to all swipable areas
this.addEventListener("touchstart", touchStart, false);
this.addEventListener("touchmove", touchMove, false);
this.addEventListener("touchend", touchEnd, false);
this.addEventListener("touchcancel", touchCancel, false);
});
};
})(jQuery);
$('.swipe').swipe({
swipeLeft: function() { $('#someDiv').fadeIn() },
swipeRight: function() { $('#someDiv').fadeOut() },
})
and this is how you detect iphone
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page";
}
There's also jQuery.touchwipe at http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
The smallest and most jQuery-esque solution is here: https://github.com/eikes/jquery.swipe-events.js
I was playing around with the jquery autogrow plugin, which expands the height of the text automatically as the text needs it. The problem is that with every key down, the bottom border of the textarea jitters in a noticeable way. I'm not sure what the problem could be, so I'm going to go out on a limb and post the 132 lines of this GPL plugin here. Any hints where the problem could be or how to circumvent it?
/*
Auto Expanding Text Area (1.2.2) by Chrys Bader */
(function(jQuery) {
var self = null;
jQuery.fn.autogrow = function(o){
return this.each(function() {
new jQuery.autogrow(this, o);
});
};
/**
* The autogrow object.
*
* #constructor
* #name jQuery.autogrow
* #param Object e The textarea to create the autogrow for.
* #param Hash o A set of key/value pairs to set as configuration properties.
* #cat Plugins/autogrow
*/
jQuery.autogrow = function (e, o) {
this.options = o || {};
this.dummy = null;
this.interval = null;
this.line_height = this.options.lineHeight || parseInt(jQuery(e).css('line-height'));
this.min_height = this.options.minHeight || parseInt(jQuery(e).css('min-height'));
this.max_height = this.options.maxHeight || parseInt(jQuery(e).css('max-height'));;
this.textarea = jQuery(e);
if(this.line_height == NaN) this.line_height = 0;
// Only one textarea activated at a time, the one being used
this.init();
};
jQuery.autogrow.fn = jQuery.autogrow.prototype = { autogrow: '1.2.2' };
jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend;
jQuery.autogrow.fn.extend({ init: function(){
var self = this;
this.textarea.css({overflow: 'hidden', display: 'block'});
this.textarea.bind('focus', function(){ self.startExpand() }).bind('blur', function() { self.stopExpand() });
this.checkExpand();
},
startExpand: function() {
var self = this;
this.interval = window.setInterval(function() { self.checkExpand()}, 400); },
stopExpand: function() { clearInterval(this.interval); },
checkExpand: function() {
if (this.dummy == null) {
this.dummy = jQuery('<div></div>');
this.dummy.css({
'font-size' : this.textarea.css('font-size'),
'font-family': this.textarea.css('font-family'),
'width' : this.textarea.css('width'),
'padding' : this.textarea.css('padding'),
'line-height': this.line_height + 'px',
'overflow-x' : 'hidden',
'position' : 'absolute',
'top' : 0,
'left' : -9999
}).appendTo('body');
}
// Strip HTML tags
var html = this.textarea.val().replace(/(<|>)/g,'');
// IE is different, as per usual
if ($.browser.msie){
html = html.replace(/\n/g, '<BR>new');
} else {
html = html.replace(/\n/g, '<br>new');
}
if (this.dummy.html() != html){
this.dummy.html(html);
if (this.max_height > 0 && (this.dummy.height() + this.line_height > this.max_height)){
this.textarea.css('overflow-y', 'auto');
} else {
this.textarea.css('overflow-y', 'hidden');
if (this.textarea.height() < this.dummy.height() + this.line_height || (this.dummy.height() < this.textarea.height())) {
this.textarea.animate({height: (this.dummy.height() + this.line_height) + 'px'}, 100);
}
}
}
}
});
})(jQuery);
In regard to jeerose's comment:
http://www.aclevercookie.com/aclevercookiecom-breached-problem-resolved/
It has been brought to my attention by
visitors that their virus protection
goes off when they come to this blog.
I investigated the matter and found
that harmful code had been injected
into the source of the site.
This has been resolved and measures
have been taken to increase the
security of the site.
Thanks for the report, and I apologize
for the alarm.
Which doesn't seem to be true. As my antivirus still fires when opening that site