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.
Related
So i injected some java script in my webview and on scroll event i call the nativ function on cs.
The problem is that the scroll function is lagging for some reasion even though i have it inside setTimeout event.
Any idee on how to solve it?
Obbs the scroll work just fine when i remove the code below.
Here is the js function
script.Append(#"var timer; window.addEventListener('scroll', function(e) {
if (timer)
clearTimeout(timer);
timer = setTimeout(function(){
if (window.toBottom === true){
window.toBottom = false;
Native('onScroll', window.scrollY);
return;
}
if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight -30)) {
Native('onScrolledBottomReached', window.scrollY);
}else if (window.scrollY<=5) {
Native('OnScrolledTopReached', window.scrollY);
}else {
Native('onScroll', window.scrollY);
}
},1000);
});");
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);
}
});
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
}
}
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?
I'd like to do something like:
var scrollable;
scrollable = $(window).scrollTo(99999, 99999);
$(window).scroll(function() {
// cancel the scrollTo
scrollable = null;
});
Based on jonobr1's code this works for me:
if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
document.onmousewheel = stopScroll;
function stopScroll() {
$(window)._scrollable().stop(true, false); // Stops and dequeue's animations
}
I added a call to stopScroll before my scrollTo calls in my event handlers too.
After some fiddling I found this to work well.
$(window).scrollTo(99999, 99999);
$(window).click(function() {
stopScroll();
});
if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
document.onmousewheel = stopScroll;
function stopScroll() {
$(window).stop(true, false); // Stops and dequeue's animations
}
No need to modify plugin or source!