I want to re-open a question someone else asked. What's the best way to emulate mouseenter with live or delegate? The original question was here:
How should I emulate a mouseenter event using jquery's live functionality?
And the OP's proposal was:
// mouseenter emulation
jQuery('.selector').live('mouseover',function (e) {
// live sees all mouseover events within the selector
// only concerned about events where the selector is the target
if (this != e.target) return;
// examine relatedTarget's parents to see if target is a parent.
// if target is a parent, we're "leaving" not entering
var entering = true;
jQuery(e.relatedTarget).parents().each(function () {
if (this == e.target) {
entering = false;
return false; // found; stop searching
}
});
if (!entering) return;
/*
the rest of my code
*/
});
$('ul.cms_tabs_edit').delegate('li', 'mouseenter', function() {
$(this).addClass('hover');
});
$('ul.cms_tabs_edit').delegate('li', 'mouseleave', function() {
$(this).removeClass('hover');
});
I ended up doing:
$("#id").delegate(".selector", "mouseover", function(){
if(!$(this).hasClass("bound")){
$(this).hover(function(){
alert('entering');
},
function(){
alert('leaving');
}).mouseover().addClass("bound");
}
});
Does anyone have a better solution?
Related
I'm fairly new to canvas and experimenting with random functions. I've gotten mouseClick events and now I'm trying to implement a keydown event to do something simple like change the background color.
I'm looking at a lot of keyDown event examples and am a little confused about the structured.
Is it as simple as
if (e.keyCode == 40) { *change background color code }
I'm seeing a lot of people having some false, true statements in there as well, which throws me off.
Yes, it's that simple. Check if the key was pressed inside of a listener for the keydown event:
window.addEventListener('keydown', function (event) {
if (event.keyCode === 40) {
*change background*
}
});
Alternative:
var keys = [];
window.addEventListener('keydown', function (event) {
keys[event.keyCode] = true;
if (keys[40] === true) {
*change background color*
}
});
window.addEventListener('keyup', function (event) {
keys[event.keyCode] = false;
});
(might be aforementioned true/false statements OP mentioned)
JSFiddle: #1, #2.
I'm using Kendo MVVM and I have a kendo numerictextbox bound to a kendo observable.
All I want is: when the user changes value, a confirm should pop saying something like 'are you sure?' if yes -> no problem, go on.
if no -> NOTHING should happen!
In theory it sounds simple as that... but I found 3 major issues:
1) numerictextbox only got 2 events: spin and change... so any idea of using keypress/focus/or any other event is discarded.
2) So tried using the change event... but I can't preventDefault! Another try was to save previous value and restore it back in case of 'no answer' but this brings me to trigger event change TWICE!
3) Any other model field who is 'observing' the numerictextbox will change before I even answer the confirm box... And I absolutely don't want this!
P.S. I also got a dropdownlist and a datepicker that must work in the same way!
Help please!
Provided a fast example: http://dojo.telerik.com/EyItE
Here you can see how the numericbox2 (who is observing numericbox1 and is computed) changes itself before the user answer yes/no (problem 3)
and keypress/focus/preventDefault doesn't work.
here is an answer about binding events not supported by default:
Kendo MVVM and binding or extending custom events
For preventDefault (or "reverting" the value). I tried to store the previous value as you suggested and it is does not fire twice:
var viewModel = kendo.observable({
myItem: {
// fields, etc
myNumericBox: 10,
myNumericBox2: function () {
return viewModel.get("myItem.myNumericBox")*2;
},
tmp: 10
},
onChange: function (e) {
if ( confirm("are you sure?")) {
viewModel.set("myItem.tmp", viewModel.get("myItem.myNumericBox"));
}
else {
viewModel.set("myItem.myNumericBox", viewModel.get("myItem.tmp"));
}
},
tryf: function () {
alert("hello!"); // doesn't trigger
},
tryk: function() {
alert("hello2!"); // doesn't trigger
}
});
I solved with a custom binding that ask you a confirm between html widget change -> model update.
kendo.data.binders.widget.valueConfirm = kendo.data.Binder.extend({
init: function (widget, bindings, options) { // start
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change); // observe
},
refresh: function () { // when model change
if (!this._initChange) {
var widget = this.widget;
var value = this.bindings.valueConfirm.get(); // value of the model
if (widget.ns == ".kendoDropDownList") { // for the dropdown i have to use select
widget.select(function (d) {
return d.id == value.id;
});
}
else widget.value(value); // update widget
}
},
change: function () { // when html item change
var widget = this.widget;
if (widget.ns == ".kendoDropDownList") var value = widget.dataItem(); // for dropdown i need dataitem
else var value = widget.value();
var old = this.bindings.valueConfirm.get();
this._initChange = true;
// I want to bypass the confirm if the value is not valid (for example after 1st load with blank values).
if (old == null || old == 'undefined' || old == 'NaN') this.bindings.valueConfirm.set(value); // Update the View-Model
else {
if (confirm("Are you sure?")) {
this.bindings.valueConfirm.set(value); // Update the View-Model
}
else {
this._initChange = false;
this.refresh(); // Reset old value
}
}
this._initChange = false;
},
destroy: function () { // dunno if this is useful
this.widget.unbind("change", this._change);
}
});
I'm using a kendo grid.
I want to add a slide-down animation - when I click on a row in the grid it expands with animation
(the expansion happens with grid.ExpandRow function - kendo inner).
I think that I need the animation on k-detail-row element.
But I still cant find the proper place/way to do that.
Anyone did that already, and can help me with that.
Unfortunately animations are not supported for table rows. Here is a related question: How to Use slideDown (or show) function on a table row?
I had the same question, and although this is an old post, I figured someone might need it.
Unfortunately Kendo does not support this functionality as yet, however there is a solution.
Kendo uses the jquery toggle() to show and hide the detail row, thus by performing a conditional override on the jQuery you can insert animation.
jQuery(function($) {
var _oldShow = $.fn.show;
var _oldHide = $.fn.hide;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function(index, item) {
var obj = $(item);
_oldShow.apply(obj, [speed, oldCallback]);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
var grid = $(this);
grid.slideDown(300);
});
}
});
}
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
$(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
});
} else {
_oldHide.apply(obj, [speed, oldCallback]);
}
});
}
});
I ran into this issue today and managed to solve it using the detailExpand function of the grid. You can then use the Kendo Fx slidedown effect to make the detail row slide down. For example:
detailExpand: function (e) {
var detailRow = e.detailRow;
setTimeout(function () {
kendo.fx(detailRow).slideIn("down").duration(375).play();
}, 0);
}
For more information, please check:
Detailexpand documentation
Kendo Fx documentation
let's say i do this:
$('field').addEvents ({
'focus' : function() { // do some stuff }
'blur' : function() { // do other stuff }
});
this is the default behaviour for all my text input fields. what i now want to do is something like this
<button id='shinyButton' name='shinyButton'>Poke Me</button>
then:
$('shinyButton').addEvent('click', function() {
stopDefaultBlurFunctionInCurrentlyFocussedField();
// do seriously cool stuff
if (finishedDoingSeriouslyCoolStuff) {
$('field').focus(); // return focus to input field
}
}
so:
1) how do i stopDefaultBlurFunctionInCurrentlyFocussedField();?
2) how do i tell if i'm actually finishedDoingSeriouslyCoolStuff?
Strictly speaking you can't do what you want to do because the blur event fires before your click handler does.
Dimitar's suggestion of disabling the event on mouseover works fine for mouse users, but prevents users from triggering the button with the keyboard.
One option (but a bit of a hack) would be to introduce a tiny delay into the blur event handler, and use a variable flag to control the event firing (you might need to tune the delay so it's imperceptible but still long enough for your purposes:
var disableBlurMethod = false;
$('field').addEvents ({
'focus' : function() { // do some stuff }
'blur' : function() {
(function() {
if (!disableBlurMethod) {
// do some stuff
}
}).delay(50);
}
});
$('shinyButton').addEvent('click', function() {
disableBlurMethod = true;
// do seriously cool stuff
if (finishedDoingSeriouslyCoolStuff) {
disableBlurMethod = false;
$('field').focus(); // return focus to input field
}
}
Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}