We Keep Coding

enable vertical scrolling while see the last slide using owl carousel

I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});

fullcalendar event remove not working on eventDragStop method (full calendar v4)

I am using fullcalendar v4. i want to remove event in eventDragStop method.
Everything is work perfectly, but i can't remove event. actually i want drop external event in fullcalendar and also want to drop fullcalendar event in external event area.
Example for old version. I want to build similar demo with latest version(v4)
Example:
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
Full code :
<pre>
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
});
calendar.render();
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
});
</pre>

How to fix scrollX movement issue in jQuery DataTables on mobile devices?

I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,
'destroy': true,
'aoColumns': [
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "75px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "50px", bSearchable: false, bSortable: false }
],
'scrollY': 200,
'scrollX': true,
'info': false,
'paging': false
});
The above code is working fine in Desktop.
But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.
How to fix that header movement issue in mobile devices?

Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.
document.getElementById("btn").addEventListener("click", function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
},
);
});

OWL Carousel: center slide if click on it

I'm just wondering if there is a way to easily center a slide if I click on it.
So the clicked slide moves to the middle.
Here is my code. The "center on click" function should work on the first slide called "#singleprice".
jQuery(document).ready(function ($) {
var $sync1 = $("#singleprice"),
$sync2 = $("#meanprice"),
flag = false,
duration = 300;
$sync1
.owlCarousel({
nav: true,
items: '3',
startPosition: '4',
dots: false,
center: true,
navContainer: '#priceNav',
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
$sync2
.owlCarousel({
nav: false,
items: '1',
startPosition: '4',
touchDrag: false,
mouseDrag: false,
dots: false
})
.on('click', '.owl-item', function () {
$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
});

JqGrid unable to drag search modal on tablet

I implemented jqgrid for my data grid, and enabling its search feature.
When I use desktop browser, I can drag the search modal like normal. however, I cant do that when I drag it on tablet using touch.
Does anyone know how to enable it so I can drag the search modal on tablet device? This is my grid snippet code
$grid = $('#' + gridId);
var ListOfColName = ['Client PID', 'Date Assessed', 'Date Superseded', 'Client Name','Create From Existing', 'Detailed Care Plan'];
var ListOfColModel = [{ name: 'ClientPID', index: 'ClientPID', editable: true },{ name: 'ConsumerCarePlanId', formatter: ViewDetailLinkFormat, align: 'left', search: false}];
$grid.jqGrid({
datatype: 'json',
url: '../../JsGridService/ConsumerCarePlanSearchService.svc/GetCarePlanList',
jsonReader: { repeatitems: false },
loadui: "block",
mtype: 'GET',
rowNum: 5,
rowList: [5, 10, 20, 30],
viewrecords: true,
colNames: ListOfColName,
colModel: ListOfColModel,
pager: '#' + pagerId,
sortname: 'ClientPID',
sortorder: 'desc',
height: "100%",
width: "100%",
prmNames: { nd: null, search: null },
caption: 'Care Plan List',
autowidth: true,
rownumbers: true,
loadonce: true
});
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: false,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0
});
Thank You.

Touch events on a mobile device do not trigger the same way that Click Events trigger in the browser. This is something that I have been battling with as well, I have a custom map dragging application that I wrote and it is impossible to drag the map on the touch screen.
EDIT:
I used the following to map the touch events:
$('#zoomIn').on('click', function( e ) {
e.stopPropagation();
var scale = parseInt(mapscale) - 1;
rescaleMap( scale );
});
$('#zoomOut').on('click', function( e ){
e.stopPropagation();
var scale = parseInt(mapscale) + 1;
rescaleMap( scale );
});
$('#zoomIn').on('touchstart', function( e ) {
var scale = parseInt(mapscale) - 1;
rescaleMap( scale );
e.stopPropagation();
});
$('#zoomOut').on('touchstart', function( e ){
var scale = parseInt(mapscale) + 1;
rescaleMap( scale );
e.stopPropagation();
});
I included the on-click handler so you could see I was implementing it twice (This bad practice, code should really be in a function call to avoid duplication and following DRY patterns) once for standard mouse interface, and once for the mobile interface.
Later on in my code I have the following that gets called inside of document ready:
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
This is treating the touch events as mouse events, and allowing them to function within normal jQuery mouse move events. This code is lifted and adapted directly from this answer here: JavaScript mapping touch events to mouse events
The draggable handle is not usable (at least not on the devices I have tested on) because it is still looking specifically for mouse events.