I've a question related to jqgrid v4.15.4. I have used beforeSubmitCell event to return new array that will be posted to the server. Also I've kept options cellEdit: true , cellsubmit: 'remote'.
By default, if a jqGrid cell is editable, single click on that cell changes it to edit mode.Which I know can be done with ondblClickRow. But how can I call beforeSubmitCell event inside ondblClickRow event function.
for references, I've read : jQGrid Cell Editing on double click of row
Let me know if more info required?
If I correctly understand your problem, the you should don't use the option cellEdit: true (but still use cellsubmit: 'remote') and to set cellEdit: true dynamically before calling cell editing methods (editCell, restoreCell, saveCell, prevCell or nextCell). Additionally you will have to duplicate the keyboard operations (see the lines of free jqGrid code). The resulting code could look like the code below:
ondblClickRow: function (rowid, iRow, iCol, e) {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.cellEdit = true;
$self.jqGrid("editCell", iRow, iCol, true);
p.cellEdit = false;
},
afterEditCell: function (rowid, cmName, cellValue, iRow, iCol) {
var getTdByColumnIndex = function (tr, iCol) {
var $t = this, frozenRows = $t.grid.fbRows;
tr = frozenRows != null && frozenRows[0].cells.length > iCol ?
frozenRows[tr.rowIndex] : tr;
return tr != null && tr.cells != null ? $(tr.cells[iCol]) : $();
},
$td = getTdByColumnIndex.call(this, this.rows[iRow], iCol),
$self = $(this),
$t = this,
p = $self.jqGrid("getGridParam");
$("input, select, textarea", $td).on("keydown", function (e) {
if (e.keyCode === 27) { //ESC
p.cellEdit = true;
$self.jqGrid("restoreCell", iRow, iCol);
p.cellEdit = false;
} else if (e.keyCode === 13 && !e.shiftKey) { //Enter
p.cellEdit = true;
$self.jqGrid("saveCell", iRow, iCol);
p.cellEdit = false;
return false;
} else if (e.keyCode === 9) {
if (!$t.grid.hDiv.loading) {
p.cellEdit = true;
if (e.shiftKey) {
$self.jqGrid("prevCell", iRow, iCol); //Shift TAb
} else {
$self.jqGrid("nextCell", iRow, iCol); //Tab
}
p.cellEdit = false;
} else {
return false;
}
}
e.stopPropagation();
});
}
See https://jsfiddle.net/OlegKi/Lm7akxz2/
Related
Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from):
I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished.
Codepen
Since it's not working with Codepen on my mobile device:
Reduced test
Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete.
var vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
// assume the feature isn't supported
var supportsPassive = false;
// create options object with a getter to see if its passive property is accessed
var opts = Object.defineProperty && Object.defineProperty({}, 'passive', { get: function(){ supportsPassive = true }});
// create a throwaway element & event and (synchronously) test out our options
document.addEventListener('test', function() {}, opts);
// var allowScroll = true;
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
// if (e.stopImmediatePropagation) {
// e.stopImmediatePropagation();
// }
if (e.stopPropagation) {
e.stopPropagation();
}
e.returnValue = false;
}
function getBodyScrollTop() {
var el = document.scrollingElement || document.documentElement;
return el.scrollTop;
// return window.pageYOffset
}
function setBodyScrollTop(scrollTop) {
var el = document.scrollingElement || document.documentElement;
el.scrollTop = scrollTop;
// window.pageYOffset = scrollTop;
}
function addMousewheelListener() {
if (e.addEventListener)
{
// IE9, Chrome, Safari, Opera
e.addEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false);
// Firefox
e.addEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false);
}
// IE 6/7/8
else
{
e.attachEvent("onmousewheel", preventScroll);
}
}
function removeMousewheelListener() {
if (e.removeEventListener)
{
// IE9, Chrome, Safari, Opera
e.removeEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false);
// Firefox
e.removeEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false);
}
// IE 6/7/8
else
{
e.detachEvent("onmousewheel", preventScroll);
}
}
function removeTouchListeners(e) {
window.removeEventListener("touchmove", preventScroll);
window.removeEventListener("touchstart", removeTouchListeners);
window.removeEventListener("touchend", removeTouchListeners);
}
function preventScroll(e) {
// if(TweenMax.isTweening(window) || !allowScroll) {
// e.preventDefault();
// e.stopImmediatePropagation();
preventDefault(e)
// }
}
function deactivateScroll() {
// allowScroll = false;
console.log('fired 1');
// window.addEventListener("touchstart", preventScroll, { passive: false });
window.addEventListener("touchmove", preventScroll, { passive: false });
addMousewheelListener();
}
function activateScroll() {
// allowScroll = true;
removeMousewheelListener();
// var scrollTop = y;
// var scrollTop = getBodyScrollTop;
// setBodyScrollTop(scrollTop);
window.addEventListener("touchstart", removeTouchListeners, { passive: false });
window.addEventListener("touchend", removeTouchListeners, { passive: false });
// var event1 = new Event('touchstart');
// var event2 = new Event('touchmove');
// var event3 = new Event('touchend');
// window.dispatchEvent(event1);
// window.dispatchEvent(event2);
// window.dispatchEvent(event3);
}
var ctrl = new ScrollMagic.Controller();
var sceneLeave = new ScrollMagic.Scene({
triggerElement: "#content",
triggerHook: "onEnter",
offset: 1
})
.addTo(ctrl)
.on("enter", function(event) {
TweenMax.to(window, 1, {
scrollTo: {
y: "#content",
autoKill: false
},
onStart: deactivateScroll,
onComplete: activateScroll
});
});
I'm using Sencha Touch 2.3.1 and using a list defined like this :
{
xtype: 'list',
id: 'index_list',
infinite: true,
flex: 1,
scrollToTopOnRefresh: false,
disableSelection: true,
store: 'store_index'
}
List's store has got more than 300 records, that's why I put the flag "infinite" to true.
Problem is when I scroll very fastly up and down through the list, app freezes and I can't do anything else with UI.
Also tested, put infinite flag to false doesn't fix it.
Cannot reproduce if data are less than ~300 records.
Platforms : iOS 6, 7 (iPhone), not iPad.
Have you got any idea ?
Use this override works for me
Ext.define('InfiniteListScroll.override.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',
lastEventType: null,
changedTouchesId: null,
lastEventObject: null,
onEvent: function(e) {
console.log('InfiniteListScroll.override.TouchGesture - onEvent');
var type = e.type,
lastEventType = this.lastEventType,
touchList = [e];
if ( type == 'touchstart' ) {
if( this.changedTouchesId == null ) {
this.changedTouchesId = e.changedTouches[0].identifier;
this.lastEventObject = e;
}
else {
console.log('changedTouchesId NOT null, touchEnd event wasnt fired for corresponding touchStart event.');
this.onTouchEnd( this.lastEventObject );
}
}
if (this.eventProcessors[type]) {
this.eventProcessors[type].call(this, e);
return;
}
if ('button' in e && e.button > 0) {
return;
}
else {
// Temporary fix for a recent Chrome bugs where events don't seem to bubble up to document
// when the element is being animated with webkit-transition (2 mousedowns without any mouseup)
if (type === 'mousedown' && lastEventType && lastEventType !== 'mouseup') {
var fixedEvent = document.createEvent("MouseEvent");
fixedEvent.initMouseEvent('mouseup', e.bubbles, e.cancelable,
document.defaultView, e.detail, e.screenX, e.screenY, e.clientX,
e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.metaKey,
e.button, e.relatedTarget);
this.onEvent(fixedEvent);
}
if (type !== 'mousemove') {
this.lastEventType = type;
}
e.identifier = 1;
e.touches = (type !== 'mouseup') ? touchList : [];
e.targetTouches = (type !== 'mouseup') ? touchList : [];
e.changedTouches = touchList;
this.eventProcessors[this.mouseToTouchMap[type]].call(this, e);
}
},
onTouchEnd: function(e) {
console.log('InfiniteListScroll.override.TouchGesture - onTouchEnd');
if (!this.isStarted) {
return;
}
if (this.lastMoveEvent) {
this.onAnimationFrame();
}
var touchesMap = this.touchesMap,
currentIdentifiers = this.currentIdentifiers,
changedTouches = e.changedTouches,
ln = changedTouches.length,
identifier, i, touch;
this.changedTouchesId = null;
this.updateTouches(changedTouches);
changedTouches = e.changedTouches;
for (i = 0; i < ln; i++) {
Ext.Array.remove(currentIdentifiers, changedTouches[i].identifier);
}
e = this.factoryEvent(e);
for (i = 0; i < ln; i++) {
identifier = changedTouches[i].identifier;
touch = touchesMap[identifier];
delete touchesMap[identifier];
this.publish('touchend', touch.targets, e, {touch: touch});
}
this.invokeRecognizers('onTouchEnd', e);
// Only one touch currently active, and we're ending that one. So currentTouches should be 0 and clear the touchMap.
// This resolves an issue in iOS where it can sometimes not report a touchend/touchcancel
if (e.touches.length === 1 && currentIdentifiers.length) {
currentIdentifiers.length = 0;
this.touchesMap = {};
}
if (currentIdentifiers.length === 0) {
this.isStarted = false;
this.invokeRecognizers('onEnd', e);
if (this.animationQueued) {
this.animationQueued = false;
Ext.AnimationQueue.stop('onAnimationFrame', this);
}
}
}
});
I'm trying to link two jQuery UI sliders so they'll add up to 100%. I've found the perfect solution for three sliders here on SO, but for some reason I am unable to get the math to add up correctly when modifying this jsFiddle example to strip out the third slider: http://jsfiddle.net/gWbMp/3/
Can anyone help me out in forking this to simply include two sliders instead of three?
Here's the (close) javascript I've ended up with but it's not quite right:
var min = 0;
var max = 100;
$("input").change(function(){
console.log("a");
var index = $(this).attr('class').substring(0,1);
$("#slider_"+ index).slider('value', this.value);
refreshSliders( index - 0 );
});
$('.selector').slider({
animate : true
}, {
min : min
}, {
max : max
}, {
change : function(event, ui) {
totalvalue = $("#slider_1").slider("value") + $("#slider_2").slider("value");
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
}
}, {
slide : function(event, ui) {
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
}
});
$("#slider_1").slider('value', 10);
$("#slider_2").slider('value', 90);
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
function refreshSliders(slidermainin) {
var value1 = $("#slider_1").slider("option", "value");
var value2 = $("#slider_2").slider("option", "value");
var valuechange = (value1 + value2) - 100;
var valuemain = 0, valueother1 = 0;
switch(slidermainin) {
case 1:
slidermain = "#slider_1";
sliderother1 = "#slider_2";
valuemain = value1;
valueother1 = value2;
break;
case 2:
slidermain = "#slider_2";
sliderother1 = "#slider_1";
valuemain = value2;
valueother1 = value1;
break;
}
if (valueother1 === 0) {
if (valueother1 === 0) {
if (valuechange <= 0) {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
}
} else {
if (valuechange <= 0) {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
} else {
$(sliderother1).slider('value', valueother1 - valuechange);
}
}
} else {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
}
}
var bindSliders = function(selector, value) {
$(selector).bind("slidechange slide", function(event, ui) {
event.originalEvent && (event.originalEvent.type == 'mousemove' || event.originalEvent.type == 'mouseup' || event.originalEvent.type == 'keydown') && refreshSliders(value);
});
};
bindSliders("#slider_1", 1);
bindSliders("#slider_2", 2);
I think this can be done much shorter for two sliders
You can rewrite refreshSliders function to calculate second value on the basis of max value
And call it directly on slider "change" and "slide" (or even just second one)
function refreshSliders(thisSlider, ui){
var thisNum = $(thisSlider).attr("id").replace("slider_", "");
var otherNum = (thisNum==1)?2:1;
$('.'+thisNum+'percent').val(ui.value);
if ($("#slider_"+otherNum).slider("value")!=max-ui.value){
$("#slider_"+otherNum).slider("value", max-ui.value);
$('.'+otherNum+'percent').val(max-ui.value);
}
}
have a look at this jsfiddle, i forked it from original one and adjusted a bit: http://jsfiddle.net/paulitto/fBxCm/1/
I want to view each picture after a few seconds.
function display is rolling in program.
please add necessary code.
I could not understand timer function of actionscript.
function display(q:int):void{
if(q ==0)
{
ue.visible= true;
migi.visible= false;
shita.visible= false;
hidari.visible= false;
}
else if(q ==1)
{
ue.visible= false;
migi.visible= true;
shita.visible= false;
hidari.visible= false;
}
else if(q ==2)
{
ue.visible= false;
migi.visible= false;
shita.visible= true;
hidari.visible= false;
}
else
{
ue.visible= false;
migi.visible= false;
shita.visible= false;
hidari.visible= true;
}
}
Give the following a try. I've tried to include comments to explain what I'm doing:
import flash.utils.Timer;
import flash.events.TimerEvent;
// Put all the clips in an array to manage
var pictures:Array = [this.ue, this.migi, this.shita, this.hidari];
// Store the current image index
var currentPicture = 0;
// Delay in milliseconds to wait between each image
var delay = 1000;
// We can reuse the same timer instance throughout cycle
var timer:Timer = new Timer(this.delay, 1);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteHandler);
// Hide all the pictures in the array
function hidePictures():void
{
for (var i:int = 0; i < this.pictures.length; i ++)
{
MovieClip(this.pictures[i]).visible = false;
}
}
function showPicture():void
{
// Show the current image
MovieClip(this.pictures[this.currentPicture]).visible = true;
// Now start the pause on the current image
timer.start();
}
function timerCompleteHandler(event:TimerEvent):void
{
// Hide the old image
MovieClip(this.pictures[this.currentPicture]).visible = false;
// Increment current picture index unless we're at the end in which case loop
this.currentPicture = (this.currentPicture < this.pictures.length - 1)
? this.currentPicture + 1 : 0;
// Show the next picture
showPicture();
}
hidePictures();
showPicture();
I am unable to do pinch and zoom on ipad, I guess that the below given code may be effecting the code,
Please give any perfect solution.
Is there any issue with the binding of body child events or need to calculate the touches in different variables, and do manual calculation.
///I-Pad evenet Binding
$(document).ready(function () {
$("body").children().bind('touchstart touchmove touchend touchcancel', function () {
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);
if (touches.length < 2) {
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
});
(function () {
var last_x = null, last_y = null, w_area = workarea[0],
panning = false, keypan = false, dopanning = false;
$("#svgroot").bind('mousemove mouseup', function (evt) {
if (dopanning === false) return;
var clientxnew = +$("#svgcontent")[0].getAttribute("x"),
clientynew = +$("#svgcontent")[0].getAttribute("y");
clientxnew += (evt.clientX - last_x);
clientynew += (evt.clientY - last_y);
last_x = evt.clientX;
last_y = evt.clientY;
//this.setAttribute("viewBox", vb.join(' '));
// updateCanvas(true);
$("#svgcontent").show();
$("#svgcontent")[0].setAttribute("x", clientxnew);
$("#svgcontent")[0].setAttribute("y", clientynew);
svgedit.select.getSelectorManager().selectorParentGroup.setAttribute("transform", "translate(" + clientxnew + "," + clientynew + ")");
if (evt.type === 'mouseup') { dopanning = false; }
return false;
}).mousedown(function (evt) {
var mouse_target = svgCanvas.getMouseTarget(evt);
if (svgCanvas.getMode() == "text" || svgCanvas.getMode() == "textedit") {
dopanning = false; return;
}
if ((mouse_target.id.indexOf("grouplayerdragged") > -1 || mouse_target.id.indexOf("hotspot") > -1 ||
mouse_target.id.indexOf("clonediv") > -1 || mouse_target.tagName === "text")) { dopanning = false; return; }
if (selectedElement != null) {
dopanning = false; return;
}
if (evt.button === 0) {
dopanning = true;
last_x = evt.clientX;
last_y = evt.clientY;
svgCanvas.clearSelection(true);
return false;
}
});
$(window).mouseup(function () {
panning = false;
dopanning = false;
});
you should use gesturechange. try this way (this is not your exact solution but you can hack it)
var angle = 0;
var newAngle;
var scale = 1;
var newScale;
function saveChanges() {
angle = newAngle;
scale = newScale;
}
function getAngleAndScale(e) {
// Don't zoom or rotate the whole screen
e.preventDefault();
// Rotation and scale are event properties
newAngle = angle + e.rotation;
newScale = scale * e.scale;
// Combine scale and rotation into a single transform
var tString = "scale(" + newScale + ")";
document.getElementById("theDiv").style.webkitTransform = tString;
}
function init() {
// Set scale and rotation during gestures
document.getElementById("theDiv").addEventListener("gesturechange", getAngleAndScale, false);
// Preserve scale and rotation when gesture ends
document.getElementById("theDiv").addEventListener("gestureend", saveChanges, false);
}
<body>
<div style="width:300px;height:300px;overflow:scrool;-webkit-overflow-scrolling: touch;">
<img id="theDiv" style="width:100%;" src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" />
</div>
Try this on your ipad