We Keep Coding

Vuetify Vue - Always listening for sliding events, but only return the value once

I installed the vuetify plugin for the project in order to use a colorpicker plugin. Due to special requirements, I need to manually change the function and style of the plugin.
The plug-in has a scroll bar, each time you slide the button, it will return a current color hex value.
Now I need to make it slideable, but only return a current color value when I let go.
what should I do?
Here is how to listen to scroll events
if ('touches' in e) {
this.app.addEventListener('touchmove', this.onMouseMove, mouseMoveOptions);//滑动
Object(_util_helpers__WEBPACK_IMPORTED_MODULE_6__["addOnceEventListener"])(this.app, 'touchend', this.onSliderMouseUp, mouseUpOptions);
} else {
this.app.addEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
Object(_util_helpers__WEBPACK_IMPORTED_MODULE_6__["addOnceEventListener"])(this.app, 'mouseup', this.onSliderMouseUp, mouseUpOptions);
}//addEventListener is a custom function,listener event just once.
when slider moves
onMouseMove: function onMouseMove(e) {
var value = this.parseMouseMove(e).value;
this.internalValue = value;
},
parseMouseMove: function parseMouseMove(e) {
var start = this.vertical ? 'top' : 'left';
var length = this.vertical ? 'height' : 'width';
var click = this.vertical ? 'clientY' : 'clientX';
var _a = this.$refs.track.getBoundingClientRect(),
_b = start,
trackStart = _a[_b],
_c = length,
trackLength = _a[_c];
var clickOffset = 'touches' in e ? e.touches[0][click] : e[click]; // Can we get rid of any here?
// It is possible for left to be NaN, force to number
var clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0;
if (this.vertical) clickPos = 1 - clickPos;
if (this.$vuetify.rtl) clickPos = 1 - clickPos;
var isInsideTrack = clickOffset >= trackStart && clickOffset <= trackStart + trackLength;
var value = parseFloat(this.min) + clickPos * (this.maxValue - this.minValue);
return {
value: value,
isInsideTrack: isInsideTrack
};
},

If you are using Vue.js, I can recommend you to use Vue.js 'Event Handling', instead of addEventListener, in you <template> part, like:
<div
#mousedown="moveStartMethod($event)"
#mousemove.prevent="moveMotionMethod"
#mouseup="moveEndMethod"
>
</div>
Then in your <script> part, you can call the methods:
moveStartMethod: function (event) {
...
},
more info: https://learnvue.co/2020/01/a-vue-event-handling-cheatsheet-the-essentials/ and search for 'Handling mouse modifiers' part

JS function that scrolls an element into view taking into account possible scrollable and positioned parent

I was looking for a function that would scroll a given element into view with some smart behavior:
if an element is descendant of a scrollable element - that ancestor is scrolled rather than body.
if an element is descendant of a positioned element - body won't be scrolled.
I didn't find any suitable function, so I made one and wanted some expert opinion on it. Please check the plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview . There are problems with animated scroll in FF, so please use Chrome to check the logic.
To illustrate, what I'm looking for - here is the first update that came to mind - if we reached an element that can scroll, lets call it SC (Scroll Parent), we should not only scroll SC to make the target visible inside it, but also recursively scroll SC itself into view, since it may outside of the currently visible are of the page. Here is the update plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview (also applied fix for FF scrolling problem).
And here is the code of the function
function scrollTo(target){
//Position delta is used for scrollable elements other than BODY
var combinedPositionDelta = 0;
var previousParent = $(target);
var parent = $(target).parent();
while(parent){
combinedPositionDelta += previousParent.position().top - parent.position().top;
//If we reached body
if(parent.prop("tagName").toUpperCase() == "BODY"){
scrollBody(target.offset().top);
break;
}
//if we reached an element that can scroll
if(parent[0].scrollHeight > parent.outerHeight()){
scrollElementByDelta(parent,combinedPositionDelta);
//Recursively scroll parent into view, since it itself might not be visible
scrollTo(parent);
break;
}
//if we reached a apositioned element - break
if(parent.css('position').toUpperCase() != 'STATIC'){
console.log("Stopping due to positioned parent " + parent[0].outerHTML);
break;
}
previousParent = parent;
parent = parent.parent();
}
}
var offsetSkin = 20;
function scrollElementByDelta(element,offsetDelta){
$(element).animate({
scrollTop: element.scrollTop() + (offsetDelta - offsetSkin)
}, 1000);
}
function scrollBody(offset){
$('body,html').animate({
scrollTop: offset - offsetSkin
}, 1000);
}

Well I'm Using this one which works very well for me:
function scrollIntoView (element, alignTop) {
var document = element.ownerDocument;
var origin = element, originRect = origin.getBoundingClientRect();
var hasScroll = false;
var documentScroll = this.getDocumentScrollElement(document);
while (element) {
if (element == document.body) {
element = documentScroll;
} else {
element = element.parentNode;
}
if (element) {
var hasScrollbar = (!element.clientHeight) ? false : element.scrollHeight > element.clientHeight;
if (!hasScrollbar) {
if (element == documentScroll) {
element = null;
}
continue;
}
var rects;
if (element == documentScroll) {
rects = {
left : 0,
top : 0
};
} else {
rects = element.getBoundingClientRect();
}
// check that elementRect is in rects
var deltaLeft = originRect.left - (rects.left + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaRight = originRect.right
- (rects.left + element.clientWidth + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaTop = originRect.top - (rects.top + (parseInt(element.style.borderTopWidth, 10) | 0));
var deltaBottom = originRect.bottom
- (rects.top + element.clientHeight + (parseInt(element.style.borderTopWidth, 10) | 0));
// adjust display depending on deltas
if (deltaLeft < 0) {
element.scrollLeft += deltaLeft;
} else if (deltaRight > 0) {
element.scrollLeft += deltaRight;
}
if (alignTop === true && !hasScroll) {
element.scrollTop += deltaTop;
} else if (alignTop === false && !hasScroll) {
element.scrollTop += deltaBottom;
} else {
if (deltaTop < 0) {
element.scrollTop += deltaTop;
} else if (deltaBottom > 0) {
element.scrollTop += deltaBottom;
}
}
if (element == documentScroll) {
element = null;
} else {
// readjust element position after scrolls, and check if vertical scroll has changed.
// this is required to perform only one alignment
var nextRect = origin.getBoundingClientRect();
if (nextRect.top != originRect.top) {
hasScroll = true;
}
originRect = nextRect;
}
}
}
}
I hope this helps.

If you do not mind venturing into jQuery, the scrollTo plugin is the best bet. It handles most needs and gives a very refined smooth trasition.
Hope it helps.

If condition not executes while mouse move fastly

CSS
.selected
{
background-color: Red;
color: #ffffff;
}
jQuery
$(document).on('mousemove', '#mytable tr', function (e)
{
var currentColoumn = $(e.target).closest('td').index();
if ($(this).find("td").eq(currentColoumn).hasClass('selected') == true) {
e.preventDefault();
return false;
}
});
HTML
<table border="1" id="mytable ">
<tr>
<td>
9:30 AM
</td>
<td>
30
</td>
<td>
</td>
<td class="selected">
SELECTED
</td>
<td>
</td>
</tr>
</table>
I have to check a condition in tr mouse move where if td has class selected then mouse move stops.
If condition not executes while mouse move fastly
Demo

The way you're using on here, is attaching the event listener to the document, and apply the callback to any mousemove events on rows in the #mytable element. That means internally, the call to on is translated into a call to delegate.
Normally, I'm all for event delegation, for obvious reasons (performance being the most obvious of all). However, when you delegate mouse events, your handler is being called every time the event is fired. When doesn't a mouse move somewhere in the document? When the client is reading, the window is minimized or not in focus.
Though jQuery hides this, your code actually does this:
document.body.addEventListener('mousemove',function(e)
{
var parent, target = (e = e || window.event).target || e.srcElement;
if (target.tagName.toLowerCase() === 'tr')
{//this reverse DOM lookup is probably cached, but anyway
parent = target;
while(parent = parent.parentNode)
{//or something
if (parent.getAttribute('id') === 'myTable')
{
break;
}
if (parent === document.body)
{//not child of #myTable
return e;
}
}
if (yourCallbackFunction.apply(target, [e]) === false)
{//remember: return false in jQ == preventDefault + stopPropagation:
e.preventDefault();
e.stopPropagation();
}
}
}, false);
Your callback is only called when the element is a child of a #myTable, but each time the mouse moves, an event handler is being called!
When delegating events like this, it'd be wiser to do this:
$('#myTable').on('mousemove', 'tr', function()
{
//your code here
});
This way, an event handler will only be called when the mousemove event occurs inside the #myTable element. Since that's all you're interested in, that's what you should do.
The fiddle you linked to is also packed with live calls. live has been deprecated for years now, one of the reasons being: it was slooow.
Another thing to look into if speed is an issue is: avoid excessive DOM calls, by using closures for example. DOM calls are slow!
If speed is still an issue, don't use jQuery: use VanillaJs, if done right... it'll always be faster than a lib

I think the approach just needs some tweaking. The constraints can be calculated at the time a cell is clicked; as the mouse moves you know when to stop colouring the cells.
Here's a breakdown:
jQuery(function($) {
document.onselectstart = function () { return false; }
var $table = $('#contentPlaceHolderMain_tableAppointment'),
columns = [],
dragInfo = null;
$table.find('td').each(function() {
var i = $(this).index();
(columns[i] = columns[i] || []).push(this);
});
This creates a pivoted array so that you can reference each column more easily. This comes in handy later.
$table.on('mouseup', function() {
// reset selection
dragInfo = null;
});
This is the same as your previous code, except you may have noticed two differences:
I'm setting up the click event handler on $table instead of document; this prevents some overheads when clicks outside the table are received.
Because .live() is deprecated, .on() should be used instead.
Let's move on to the mousedown handler.
$table.on('mousedown', 'td', function() {
var $this = $(this),
columnIndex = $this.index();
if ($this.is('.selected') || columnIndex < 2) {
return;
}
var thisRow = $this.parent().index(),
selectionRowAbove = -Infinity,
selectionRowBelow = Infinity;
$.each(columns[columnIndex], function(rowIndex) {
if ($(this).is('.selected')) {
if (rowIndex < thisRow && rowIndex > selectionRowAbove) {
selectionRowAbove = rowIndex;
} else if (rowIndex > thisRow && rowIndex < selectionRowBelow) {
selectionRowBelow = rowIndex;
}
}
});
By adding a listener on td instead of tr you don't have to find the nearest cell; it gets calculated for you. This part of the function works out the red cells above and below the current cell.
// unmark cells
$table.find(".csstdhighlight").removeClass("csstdhighlight");
dragInfo = {
column: columnIndex,
enclosure: {
above: selectionRowAbove,
below: selectionRowBelow
},
min: thisRow,
max: thisRow
};
$this.addClass('csstdhighlight');
});
The last part of the function saves all the drag information that you will need later on.
$table.on('mousemove', 'td', function() {
if (!dragInfo) {
return;
}
var $this = $(this),
columnIndex = $this.index(),
rowIndex = $this.parent().index();
if (columnIndex != dragInfo.column || rowIndex == 0 || rowIndex <= dragInfo.enclosure.above || rowIndex >= dragInfo.enclosure.below) {
dragInfo = null;
return;
}
These conditions make sure the selection stays within the bounds that we have determined earlier.
// mark cells
var cells = [columns[columnIndex][rowIndex]];
while (dragInfo.min > rowIndex) {
cells.push(columns[columnIndex][dragInfo.min--]);
}
while (dragInfo.max < rowIndex) {
cells.push(columns[columnIndex][dragInfo.max++]);
}
$(cells).addClass('csstdhighlight');
});
});
The last part of the function marks the selection; it does so by calculating the differences between the last invocation, so that you don't have to mark cells again.
Demo

There is one semi-solution, however, that could be done.
Use CSS on the body to hide the actual mouse cursor, then display a fake mouse pointer (just a regular graphic) at the mouse location.
If the mouse pointer is out of bounds, stop the fake cursor at the bounding box.
I don't know what your use-case is, but it would be MUCH better if you don't hide the real mouse pointer, but display some kind of oversized mouse pointer in the bounding box. Mostly the same effect and much more user friendly.

Consider a diferent approach to deciding on wether a mousemove should stop highlighting a cell. Instead of "stoping when it goes over a cell with the class selected",
Try stoping if between the initial cell and the current cell exists a cell with the class selected. This ensures that if a fast movement prevents the mousemove event from being delegated to your "selected" cells it will still be able to detect that you have passed over one.

I think that the main problem here is that the mouse does not stop on every single cell. The mouse usually looks like it moves continuously, but when I move it quickly, it jumps around, skipping large amounts of space in between.
I think you've already seen this affect. Hence, you are highlighting a range of cells, not just the one you are pointing to (current cell). However, you are only checking if the current cell is selected, not if any of the in between cells are selected.
The solution is to check all the in between cells to make sure that they are not selected. jQuery has a filter function that does that nicely. I've refactored your code to use filter:
$("#contentPlaceHolderMain_tableAppointment tr").live('mousemove', function (e) {
// Compares with the last and next row index.
var currentRow = $(this).closest("tr")[0].rowIndex;
var currentColoumn = $(e.target).closest('td').index();
var allRows = $('#contentPlaceHolderMain_tableAppointment tr');
var previousRowIndex = parseInt(lastRow, 10);
var currentRowIndex = parseInt(currentRow, 10);
var traversedRows;
if (previousRowIndex < currentRowIndex)
traversedRows = allRows.slice(previousRowIndex, parseInt(currentRowIndex + 1));
else {
traversedRows = allRows.slice(currentRowIndex, previousRowIndex)
}
var affectedCells = traversedRows.children(':nth-child(' + parseInt(currentColoumn + 1) + ')');
if ($(this).find("td").eq(currentColoumn).hasClass('selected') == true ||
affectedCells.filter('.selected').length > 0) {
if (flag != false) {
flag = false;
e.preventDefault();
return false;
}
}
if (currentRow == 0) {
flag = false;
return false;
}
//cross cell selection.
if (colIndex != currentColoumn) {
flag = false;
return;
}
if (flag) {
affectedCells.addClass('csstdhighlight');
e.preventDefault();
return false;
}
});
The fiddle is at: http://jsfiddle.net/Jg58G/7/
There still exists an issue where some cells are supposed to be highlighted, but they are not. Now that you have the row of the selected cell, you can redo your slice logic to slice at the right place. I'll leave that part to you.

Note sure if this is precisely what you're aiming for, but it should be easy to adapt. Using mouseover cuts down on the calls, should have better performance.
Fiddle at: http://jsfiddle.net/VJG4F/
$(document).ready(function () {
// setup
var doc = this;
doc.checkOver = false;
doc.activeCell = {
x: -1,
y: -1
};
doc.lastCell = {
x: -1,
y: -1
};
doc.highlightClass = 'csstdhighlight';
doc.selectionClass = 'selected';
doc.selectionText = 'SELECTED';
// start checking on mousedown
$('#contentPlaceHolderMain_tableAppointment td').on('mousedown', function (e) {
doc.checkOver = true;
// set active and last cell for reference
doc.lastCell.x = doc.activeCell.x = $(this).closest('td').index();
doc.lastCell.y = doc.activeCell.y = $(this).closest("tr").index();
// highlight selected cells
var cellSelector = '#contentPlaceHolderMain_tableAppointment tr:eq(' + doc.activeCell.y + ') td:eq(' + doc.activeCell.x + ')';
$(cellSelector).addClass(doc.highlightClass);
// check for movement
$('#contentPlaceHolderMain_tableAppointment td').on('mouseover', function (e) {
if (!(doc.checkOver)) return;
// get current cell for reference
var currCell = {
x: $(e.target).closest('td').index(),
y: $(e.target).closest('tr').index()
};
// verify mouse is over a different cell
if ( !((currCell.y != doc.lastCell.y && currCell.y != -1) || (currCell.x != doc.lastCell.x && currCell.x != -1)) ) return false;
// make sure other cells are not highlighted
$('#contentPlaceHolderMain_tableAppointment td').removeClass(doc.highlightClass);
// highlight selected cells
var topLeft = {
x: Math.min(currCell.x, doc.activeCell.x),
y: Math.min(currCell.y, doc.activeCell.y)
};
var botRight = {
x: Math.max(currCell.x, doc.activeCell.x),
y: Math.max(currCell.y, doc.activeCell.y)
};
for (var x=topLeft.x;x<=botRight.x;x++) {
for (var y=topLeft.y;y<=botRight.y;y++) {
var cellSelector = '#contentPlaceHolderMain_tableAppointment tr:eq(' + y + ') td:eq(' + x + ')';
$(cellSelector).addClass(doc.highlightClass);
}
}
// update last cell
doc.lastCell.y = currCell.y;
doc.lastCell.x = currCell.x;
return false;
});
// check for mouseup
$('#contentPlaceHolderMain_tableAppointment td').on('mouseup', function (e) {
// stop checking for movement
$('#contentPlaceHolderMain_tableAppointment td').off('mouseup');
$('#contentPlaceHolderMain_tableAppointment td').off('mouseout');
// get current cell for reference
var currCell = {
x: $(this).closest("td").index(),
y: $(this).closest('tr').index()
};
// make sure cells are not highlighted
$('#contentPlaceHolderMain_tableAppointment td').removeClass(doc.highlightClass);
// select cells
var topLeft = {
x: Math.min(currCell.x, doc.activeCell.x),
y: Math.min(currCell.y, doc.activeCell.y)
};
var botRight = {
x: Math.max(currCell.x, doc.activeCell.x),
y: Math.max(currCell.y, doc.activeCell.y)
};
// single cell - toggle
if( topLeft.x == botRight.x && topLeft.y == botRight.y ) {
var cellSelector = '#contentPlaceHolderMain_tableAppointment tr:eq(' + topLeft.y + ') td:eq(' + topLeft.x + ')';
$(cellSelector).toggleClass(doc.selectionClass);
if( $(cellSelector).text() == doc.selectionText ) $(cellSelector).text('');
else $(cellSelector).text(doc.selectionText);
// multi-cell, select all
} else {
for (var x=topLeft.x;x<=botRight.x;x++) {
for (var y=topLeft.y;y<=botRight.y;y++) {
var cellSelector = '#contentPlaceHolderMain_tableAppointment tr:eq(' + y + ') td:eq(' + x + ')';
$(cellSelector).addClass(doc.selectionClass);
$(cellSelector).text(doc.selectionText);
}
}
}
// reset
doc.checkOver = false;
doc.activeCell.y = -1;
doc.activeCell.x = -1;
doc.lastCell.y = -1;
doc.lastCell.x = -1;
return false;
});
return false; // prevent default
});
});

How do I move the parent element when swiping over an iframe?

I have a slider that detects swipes via the touchmove event and moves the content accordingly. However when there is an iframe in the content, and I slide my finger over the iframe, the page won't move because the touchmove event is intercepted by the iframe itself, not the parent page. Thus the parent div doesn't move.
This iframe also needs to remain clickable since it is an ad so I can't just cover it with another div that has a higher z-index.
What can I do in Javascript to bubble the touchmove event up to the parent? They are on the same domain. Any help would be appreciated!
The slider I am using is this - http://dezignhero.github.io/swiper.js/ (which works fine when there are no iframes in the pages)
var Swiper = function(selector, options) {
/*------- Globals -------*/
var viewportWidth = 0,
frameWidth = 0,
animating = false,
numSlides = 0,
limitEnd = 0,
goTo = 0,
currentSlide = 0,
orientation = 0;
// Swiping
var swipe = {
started : false,
startX : 0,
endX : 0,
at : 0,
strength : 0
};
// Settings
var settings = {
ease : 0.3,
swipeMin : 40,
preventAdvance : false,
container : '.container',
frame : '.page',
frameWidth : false, // accepts a number in pixels
controls : '.control',
clickEvent : 'click',
updateEvent : 'update',
controlsOnly : false,
};
/*------- Handles -------*/
var el = selector,
$parent = $(el),
$container, $controls, $frame, $prevCtrl, $nextCtrl;
/*------- Methods -------*/
var init = function(options) {
// Exit if element doesn't exist
if ( $(el).length == 0 ) return;
// Merge settings
settings = $.extend(settings, options || {});
// Initialize handles
$container = $(settings.container, el);
$controls = $(settings.controls, el);
$frame = $(settings.frame, el);
// Assign Ids to frames
$frame.each(function(i){
$(this).attr('data-id', i);
numSlides++;
});
// Add initial class
$($frame.selector+'[data-id=0]', el).addClass('current');
// Set Dimensions
resize();
// Setup CSS
$container.css({
'-webkit-transition' : 'all '+settings.ease+'s ease-out',
'-webkit-transform' : 'translate3d(0,0,0)', // Performance optimization, put onto own layer for faster start
'left' : 0
});
// Monitoring controls if they exist
if ( $controls.length > 0 ) {
// Determine whether or not to use click event
if ('ontouchstart' in document.documentElement) {
settings.clickEvent = 'touchstart';
}
// Create handlers
$prevCtrl = $(settings.controls+'[data-action=prev]');
$nextCtrl = $(settings.controls+'[data-action=next]');
// Bind behavior
$controls.on(settings.clickEvent, function(){
var self = $(this),
action = self.attr('data-action');
// Ensure action defined
if ( typeof action == 'undefined' ) return;
if ( action == 'next' && currentSlide < numSlides - 1 ) {
goTo = currentSlide + 1;
} else if ( action == 'prev' && currentSlide > 0 ) {
goTo = currentSlide - 1;
}
// Move container
jumpTo(goTo);
});
}
// Display controls correctly
if ( settings.preventAdvance ) {
disableSliding();
} else {
updateControls();
}
// Swiping
if ( !settings.controlsOnly ) {
$container[0].addEventListener('touchstart', function(e) { touchStart(e); }, false);
$container[0].addEventListener('touchmove', function(e) { touchMove(e); }, false);
$container[0].addEventListener('touchend', function(e) { touchEnd(e); }, false);
// Desktop
$container[0].addEventListener('mousedown', function(e) { touchStart(e); }, false);
$container[0].addEventListener('mousemove', function(e) { if (e.which==1) { touchMove(e); } }, false);
$container[0].addEventListener('mouseup', function(e) { touchEnd(e); }, false);
}
// Prevent anchor tags from getting in the way
$('a', el).on('touchstart click', function(){
return swipe.started ? false : true;
});
// Prevent image dragging on getting in the way
$('img', el).on('dragstart', function(){
return false;
});
// Check if Android
var ua = navigator.userAgent.toLowerCase(),
isAndroid = ua.indexOf("android") > -1;
// Orientation Change
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = (supportsOrientationChange && !isAndroid) ? "orientationchange" : "resize";
// Listener for orientation changes
window.addEventListener(orientationEvent, function() {
// Prevent 'fake' orientation calls
if ( orientation != window.orientation ) {
orientation = window.orientation;
resize(function(){
jumpTo(currentSlide);
});
}
}, false);
},
resize = function(callback){
viewportWidth = $parent.width();
frameWidth = ( settings.frameWidth ) ? settings.frameWidth : viewportWidth;
// Apply new sizes
$frame.width(frameWidth);
$container.width(frameWidth*numSlides);
// Set end limit
limitEnd = settings.frameWidth ? viewportWidth/frameWidth : numSlides;
// callback
if ( typeof callback == 'function' ) {
callback();
}
},
touchStart = function(e) {
swipe.at = getPosition(); // for touch move
// Get start point
swipe.startX = e.touches ? e.touches[0].pageX : e.pageX;
swipe.startY = e.touches ? e.touches[0].pageY : e.pageY;
swipe.endX = swipe.startX; // prevent click swiping when touchMove doesn't fire
},
touchEnd = function(e) {
swipe.started = false;
// Nullify event
e.preventDefault();
if ( animating ) return;
var moved = swipe.endX - swipe.startX,
threshold = frameWidth / 3;
goTo = currentSlide;
// Figure out closest slide
if ( Math.abs(moved) > threshold || swipe.strength > settings.swipeMin ) {
if ( moved > 0 && currentSlide > 0 ) {
goTo--;
} else if ( moved < 0 && currentSlide < limitEnd-1 ) {
goTo++;
}
}
// Jump to closest
jumpTo(goTo);
},
touchMove = function(e) {
if ( !$parent.hasClass('disabled') ) {
swipe.started = true;
var touchX = e.touches ? e.touches[0].pageX : e.pageX,
touchY = e.touches ? e.touches[0].pageY : e.pageY,
dX = touchX - swipe.startX,
dY = touchY - swipe.startY;
swipe.strength = Math.abs(touchX - swipe.endX);
swipe.endX = touchX;
// Escape if motion wrong
if ( Math.abs(dX) < Math.abs(dY) ) return;
e.preventDefault();
// Always run this so that hit the ends
animate(swipe.at+dX, false);
}
},
getPosition = function() {
// Get current point and Stay there
var style = document.defaultView.getComputedStyle($container[0], null),
transform = new WebKitCSSMatrix(style.webkitTransform);
// Return position based on direction
return transform.m41;
},
animate = function(scrollTo, ease) {
// Momentum Effect or Not
$container[0].style.webkitTransition = ( ease ) ? 'all '+settings.ease+'s ease-out' : 'none';
$container[0].style.webkitTransform = 'translate3d('+scrollTo+'px,0,0)';
// Allow animating again
if ( ease ) {
animating = true;
window.setTimeout(function(){
animating = false;
}, settings.ease*1000);
}
},
jumpTo = function(num, ease) {
// Keep within range
if ( num >= 0 && num < limitEnd ) {
// Animate
var hasEase = ( typeof ease !== 'undefined' ) ? ease : true;
animate(-num*frameWidth, hasEase);
// If new slide
if ( num != currentSlide ) {
// Update current slide
currentSlide = num;
// Update current slide
$frame.removeClass('current');
$($frame.selector+'[data-id='+currentSlide+']').addClass('current');
// Update parent to trigger update event and new slide
$parent.trigger(settings.updateEvent, [ currentSlide, Math.floor(limitEnd) ]);
// Control Buttons
updateControls();
// Disable Again
if ( settings.preventAdvance ) {
disableSliding();
}
}
}
},
updateControls = function() {
// Only run if controls exist
if ( $controls.length == 0 ) return;
if ( currentSlide >= 0 && currentSlide < limitEnd ) {
$controls.show();
if ( currentSlide == 0 ) {
$prevCtrl.hide();
} else if ( currentSlide == limitEnd-1 ) {
$nextCtrl.hide();
}
} else {
$controls.hide();
}
},
disableSliding = function() {
// Hide Controls
$('.control', el).hide();
// Add disabled flag
$parent.addClass('disabled');
},
enableSliding = function() {
// Enable control buttons
updateControls();
// Remove disabled flag
$parent.removeClass('disabled');
};
// Initialize the object
init(options);
return {
element : $parent,
jumpTo : jumpTo,
swiping : function() {
return swipe.started;
},
disableSliding : disableSliding,
enableSliding : enableSliding,
status : function() {
return {
'current' : currentSlide+1,
'total' : numSlides
}
},
next : function() {
jumpTo(currentSlide+1);
},
prev : function() {
jumpTo(currentSlide-1);
}
};
}

The problem is that the iframe swallows touch events. So on the area that you are swiping if there is any iframe, you wont be able to swipe. The only solution I know, is to cover the iframe with a transparent div and dispatch any click events to the iframe. This way touchmove event will be enabled on the iframe.
I have created a basic jquery plugin to do that here.
https://gist.github.com/agaase/6971953
Usage
$(selector).coverIframes();
This will cover any iframes inside $(selector) with a transparent div and transfer any click events.

I know it's an old question but you can use:
iframe {
pointer-events: none;
}

Jquery slideshow starts with an image on the left of a row but I want it to start at the right end

I'm using this javascript and the slide show slides right to left with the images in this order and positon:
start postion > 1 | 2 | 3 | 4 | 5 | 6 etc etc
but I want to swap them so they run in this position
6 | 5 | 4 | 3 | 2 | 1 < start position
Kind of like reading a book back to front, but keeping it in the right order
I've been told I need to modify the lines labelled below: //MODIFY ME
I hope someone can help! Thank you
Here's my code
(function($) {
$.fn.slideshow = function(method) {
if ( this[0][method] ) {
return this[0][ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return this.each(function() {
var ANIMATION_DURATION = .6; // The duration to flick the content. In seconds.
var MOVE_THRESHOLD = 10; // Since touch points can move slightly when initiating a click this is the
// amount to move before allowing the element to dispatch a click event.
var itemWidth;
var horizontalGap;
var $this = $(this);
var collection;
var viewItems = [];
var touchStartTransformX; // The start transformX when the user taps.
var touchStartX; // The start x coord when the user taps.
var interval; // Interval used for measuring the drag speed.
var wasContentDragged; // Flag for whether or not the content was dragged. Takes into account MOVE_THRESHOLD.
var targetTransformX; // The target transform X when a user flicks the content.
var touchDragCoords = []; // Used to keep track of the touch coordinates when dragging to measure speed.
var touchstartTarget; // The element which triggered the touchstart.
var selectedIndex = 0; // The current visible page.
var viewPortWidth; // The width of the div that holds the horizontal content.
var isAnimating;
var pageChangedLeft;
// The x coord when the items are reset.
var resetX;
var delayTimeout;
init(method);
function init(options) {
collection = options.data;
renderer = options.renderer;
itemWidth = options.itemWidth;
horizontalGap = options.horizontalGap;
initLayout();
$this[0].addEventListener("touchstart", touchstartHandler);
$this[0].addEventListener("mousedown", touchstartHandler);
viewPortWidth = $this.width();
$this.on("webkitTransitionEnd", transitionEndHandler);
collection.on("add", addItem);
}
// MODIFY ME
function initLayout() {
// Layout five items. The one in the middle is always the selected one.
for (var i = 0; i < 5; i++) {
var viewItem;
if (i > 1 && collection.at(i - 2)) // Start at the one in the middle. Subtract 2 so data index starts at 0.
viewItem = new renderer({model: collection.at(i - 2)});
else
viewItem = new renderer();
viewItem.render().$el.appendTo($this);
viewItem.$el.css("left", itemWidth * i + horizontalGap * i);
viewItem.setState(i != 2 ? "off" : "on");
viewItems.push(viewItem);
}
// Center the first viewItem
resetX = itemWidth * 2 - ($this.width() - itemWidth - horizontalGap * 4) / 2;
setTransformX(-resetX);
}
function getCssLeft($el) {
var left = $el.css("left");
return Number(left.split("px")[0]);
}
// MODIFY ME
function transitionEndHandler() {
if (pageChangedLeft != undefined) {
var viewItem;
if (pageChangedLeft) {
// Move the first item to the end.
viewItem = viewItems.shift();
viewItems.push(viewItem);
viewItem.model = collection.at(selectedIndex + 2);
viewItem.$el.css("left", getCssLeft(viewItems[3].$el) + itemWidth + horizontalGap);
} else {
// Move the last item to the beginning.
viewItem = viewItems.pop();
viewItems.splice(0, 0, viewItem);
viewItem.model = collection.at(selectedIndex - 2);
viewItem.$el.css("left", getCssLeft(viewItems[1].$el) - itemWidth - horizontalGap);
}
viewItem.render();
// Reset the layout of the items.
for (var i = 0; i < 5; i++) {
var viewItem = viewItems[i];
viewItem.$el.css("left", itemWidth * i + horizontalGap * i);
viewItem.setState(i != 2 ? "off" : "on");
}
// Reset the transformX so we don't run into any rendering limits. Can't find a definitive answer for what the limits are.
$this.css("-webkit-transition", "none");
setTransformX(-resetX);
pageChangedLeft = undefined;
}
}
function touchstartHandler(e) {
clearInterval(interval);
wasContentDragged = false;
transitionEndHandler();
// Prevent the default so the window doesn't scroll and links don't open immediately.
e.preventDefault();
// Get a reference to the element which triggered the touchstart.
touchstartTarget = e.target;
// Check for device. If not then testing on desktop.
touchStartX = window.Touch ? e.touches[0].clientX : e.clientX;
// Get the current transformX before the transition is removed.
touchStartTransformX = getTransformX();
// Set the transformX before the animation is stopped otherwise the animation will go to the end coord
// instead of stopping at its current location which is where the drag should begin from.
setTransformX(touchStartTransformX);
// Remove the transition so the content doesn't tween to the spot being dragged. This also moves the animation to the end.
$this.css("-webkit-transition", "none");
// Create an interval to monitor how fast the user is dragging.
interval = setInterval(measureDragSpeed, 20);
document.addEventListener("touchmove", touchmoveHandler);
document.addEventListener("touchend", touchendHandler);
document.addEventListener("mousemove", touchmoveHandler);
document.addEventListener("mouseup", touchendHandler);
}
function measureDragSpeed() {
touchDragCoords.push(getTransformX());
}
function touchmoveHandler(e) {
var deltaX = (window.Touch ? e.touches[0].clientX : e.clientX) - touchStartX;
if (wasContentDragged || Math.abs(deltaX) > MOVE_THRESHOLD) { // Keep track of whether or not the user dragged.
wasContentDragged = true;
setTransformX(touchStartTransformX + deltaX);
}
}
function touchendHandler(e) {
document.removeEventListener("touchmove", touchmoveHandler);
document.removeEventListener("touchend", touchendHandler);
document.removeEventListener("mousemove", touchmoveHandler);
document.removeEventListener("mouseup", touchendHandler);
clearInterval(interval);
e.preventDefault();
if (wasContentDragged) { // User dragged more than MOVE_THRESHOLD so transition the content.
var previousX = getTransformX();
var bSwitchPages;
// Compare the last 5 coordinates
for (var i = touchDragCoords.length - 1; i > Math.max(touchDragCoords.length - 5, 0); i--) {
if (touchDragCoords[i] != previousX) {
bSwitchPages = true;
break;
}
}
// User dragged more than halfway across the screen.
if (!bSwitchPages && Math.abs(touchStartTransformX - getTransformX()) > (viewPortWidth / 2))
bSwitchPages = true;
if (bSwitchPages) {
if (previousX > touchStartTransformX) { // User dragged to the right. go to previous page.
if (selectedIndex > 0) { // Make sure user is not on the first page otherwise stay on the same page.
selectedIndex--;
tweenTo(touchStartTransformX + itemWidth + horizontalGap);
pageChangedLeft = false;
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
} else { // User dragged to the left. go to next page.
if (selectedIndex + 1 < collection.length) {// Make sure user is not on the last page otherwise stay on the same page.
selectedIndex++;
tweenTo(touchStartTransformX - itemWidth - horizontalGap);
pageChangedLeft = true;
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
}
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
} else { // User dragged less than MOVE_THRESHOLD trigger a click event.
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
touchstartTarget.dispatchEvent(event);
}
}
// Returns the x of the transform matrix.
function getTransformX() {
var transformArray = $this.css("-webkit-transform").split(","); // matrix(1, 0, 0, 1, 0, 0)
var transformElement = $.trim(transformArray[4]); // remove the leading whitespace.
return transformX = Number(transformElement); // Remove the ).
}
// Sets the x of the transform matrix.
function setTransformX(value) {
$this.css("-webkit-transform", "translateX("+ Math.round(value) + "px)");
}
function tweenTo(value) {
isAnimating = true;
targetTransformX = value;
// Set the style for the transition.
$this.css("-webkit-transition", "-webkit-transform " + ANIMATION_DURATION + "s");
// Need to set the timing function each time -webkit-transition is set.
// The transition is set to ease-out.
$this.css("-webkit-transition-timing-function", "cubic-bezier(0, 0, 0, 1)");
setTransformX(targetTransformX);
}
// MODIFY ME
function addItem(folio) {
clearTimeout(delayTimeout);
// Create a timeout in case multiple items are added in the same frame.
// When the timeout completes all of the view items will have their model
// updated. The renderer should check to make sure the model is different
// before making any changes.
delayTimeout = setTimeout(function(folio) {
var index = collection.models.indexOf(folio);
var dataIndex = index;
var firstIndex = selectedIndex - 2;
var dataIndex = firstIndex;
var viewItem;
for (var i = 0; i < viewItems.length; i++) {
viewItem = viewItems[i];
if (dataIndex >= 0 && dataIndex < collection.length) {
viewItem.model = collection.at(dataIndex);
viewItem.render();
}
viewItem.setState(i != 2 ? "off" : "on");
dataIndex += 1;
}
}, 200);
}
// Called when the data source has changed. Resets the view with the new data source.
this.setData = function(data) {
$this.empty();
viewItems = [];
collection = data;
selectedIndex = 0;
initLayout();
}
});
} else {
$.error( 'Method ' + method + ' does not exist on Slideshow' );
}
}
})(jQuery);

From what I can make out, you need to simply "flip" the loops that create the sides in the slideshow so that it makes the last slide where it was making the first. It seems to do this in two places.
Then, you will need to amend the code which adds a slide to make it add it before the other slides instead of after.
This sounds an awful lot like homework - it's always best to attempt an answer before asking on here. An example on a site like JSFiddle is also generally appreciated.