I am using the jquery-resizable plugin, and I need to inject some code as soon as users stop dragging the splitter. As soon as I add the onDragEnd event, I am not able to drag the handles anymore! I am using the onDragEnd function as listed on Git. Any idea why I am not able to catch that event?
onDragEnd: function () {
alert();
return false;
});
Fiddle: https://jsfiddle.net/mvg0vdm8/2/
Plugin: https://github.com/RickStrahl/jquery-resizable
You have a syntax error, try this:
onDragEnd: function () {
alert();
return false;
}
Complete script (from your fiddle):
$(document).ready(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
onDragEnd: function () {
alert();
return false;
}
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false,
onDragEnd: function () {
alert();
return false;
}
});
});
Related
I couldn't figure out how could I write a Jasmine unit test for AddEventListener? How do I test the following code if the addEventListener is working?
private static disableScrollingOnPageWhenPanelOpen(): void {
window.addEventListener('DOMMouseScroll', PhoneInputComponent.preventDefault, { passive: false });
window.addEventListener('mousewheel', PhoneInputComponent.preventDefault, { passive: false });
window.addEventListener('touchmove', PhoneInputComponent.preventDefault, { passive: false });}
This is what I've tried but it wasn't working.
describe('disableScrollingOnPageWhenPanelOpen', () => {
it('should disable DOMMouseScroll', () => {
const e = new Event('DOMMouseScroll');
PhoneInputComponent['disableScrollingOnPageWhenPanelOpen']();
window.dispatchEvent(e);
spyOn(window, 'addEventListener').and.callThrough();
expect(window).toHaveBeenCalledWith('e',
PhoneInputComponent['preventDefault'], { passive: false });
});
Could anyone help me with this? I was gonna test if the addEventListener has been called but I'm not sure if the method I'm using is the right approach to test the code.
expect(window), this line window is not a spy.
Try changing the line to:
expect(window.addEventListener).not.toHaveBeenCalledWith('e',
PhoneInputComponent['preventDefault'], { passive: false });
_initEventHandlers: function () {
if (this._isXHRUpload(this.options)) {
this._on(this.options.dropZone, {
dragover: this._onDragOver,
drop: this._onDrop,
// event.preventDefault() on dragenter is required for IE10+:
dragenter: this._onDragEnter,
// dragleave is not required, but added for completeness:
dragleave: this._onDragLeave
});
this._on(this.options.pasteZone, {
paste: this._onPaste
});
}
if ($.support.fileInput) {
this._on(this.options.fileInput, {
change: this._onChange
});
}
this code inside Jquery.fileupload.js but throw error:
this._on() is not a function
what can i do?
I am trying to refactor my code and decided to re-implement my on events by mapping
Here's what i have:
$('img#sorc').on({
mousemove: function (e) {
alert('test in');
}
}, {
mouseleave: function () {
alert('test out');
}
});
Now mouseleave won't work.
I checked my code x10 and stared at it for so long, what did i miss?
You have additional }, { remove it with ,
$('img#sorc').on({
mousemove: function(e) {
alert('test in');
},
mouseleave: function() {
alert('test out');
}
});
DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?
Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.
Here is the fiddle that I am working on, I referred this example.
require(["dijit/form/ToggleButton", "dojo/domReady!"], function(ToggleButton){
new ToggleButton({
showLabel: true,
checked: false,
onChange: function(val){
this.set('label',val);
alert("function 1");
},
label: "Start"
}, "programmatic");
});
Here, I did not understand where val is passed from.
How can I toggle the label as "Start" and "Stop"?
How can I do alert('function 1') when Start button is clicked and
alert('function 2') when Stop is clicked? I plan to have different functionalities.
Your onChange event handler returns a boolean if the togglebutton is checked/toggled or not. So you could easily write an if like this:
onChange: function(val) {
if (val) {
this.set('label', 'Stop');
alert('function 1');
} else {
this.set('label', 'Start');
alert('function 2');
}
}
If you want to seperate both in other functions you could override the onChange event handler each time, but I think it's easier if you just do something like this:
onChange: function(val) {
if (val) {
this.function1();
} else {
this.function2();
}
},
function1: function() {
this.set('label', 'Stop');
alert("function1");
},
function2: function() {
this.set('label', 'Start');
alert("function2");
},
I also updated your JSFiddle.