Hy everybody,
I try now to get status from Animatedcontainer widget, to set the State after it is finishing, but I cann't find so much info's about this feature in google, only one, this widget has onEnd void function, but also 😓, I haven't any idea how to use this in my code.
could you have, idea how can this be doing?
You mean something like this ?
AnimatedContainer(onEnd: (){
// do something or update state
setState(() {
_didFinishAnimating = true;
});
});
Related
I am looking to make the enter key behave exactly like the tab key on a form.
I am stuck on the fireEvent section.
var inputs = $$('input, textarea');
$each(inputs,function(el,i) {
el.addEvent('keypress',function(e) {
if(e.key == 'enter') {
e.stop();
el.fireEvent('keypress','tab');
}
});
});
How do I fire a keypress event with a specified key? Any help would be greatly appreciated.
this will work but it relies on dom order and not tabindex
var inputs = $$('input,textarea');
inputs.each(function(el,i){
el.addEvent('keypress',function(e) {
if(e.key == 'enter'){
e.stop();
var next = inputs[i+1];
if (next){
next.focus();
}
else {
// inputs[0].focus(); or form.submit() etc.
}
}
});
});
additionally, textarea enter capture? why, it's multiline... anyway, to do it at keyboard level, look at Syn. https://github.com/bitovi/syn
the above will fail with hidden elements (you can filter) and disabled elements etc. you get the idea, though - focus(). not sure what it will do on input[type=radio|checkbox|range] etc.
p.s. your code won't work because .fireEvent() will only call the bound event handler, not actually create the event for you.
Take a look at the class keyboard (MooTools More).
It can fire individual events for keys and provides methodology to disable and enable the listeners assigned to a Keyboard instance.
The manual has some examples how to work with this class, here's just a simple example how I implemented it in a similar situation:
var myKeyEv1 = new Keyboard({
defaultEventType: 'keydown'
});
myKeyEv1.addEvents({
'shift+h': myApp.help() // <- calls a function opening a help screen
});
Regarding the enter key in your example, you have to return false somewhere to prevent the enter-event from firing. Check out this SO post for more details.
The title explains it all...
I need to perform a custom action when I know a user has finished resizing, but from what I can find in the Kendo UI documentation there is no event for this accessible to me other that 'resize' which I cannot use as is.
Perhaps i just missed the event?
if not:
Is there a way to use the 'resize' event to determine that a user has stopped resizing?
So here's my answer thus far:
Mine differs slightly due to architectural needs, but here's a general solution
var isResizing = false;
var wndw = $(element).kendoWindow({
// .....
resize: OnResize,
// .....
}).data('kendoWindow');
function onResize() {
isResizing = true;
}
$('body').on('mouseup', '.k-window', function() {
if(isResizing){
// **Your 'Stopped' code here**
isResizing = false;
}
});
Have you considered using underscore.js debounce? I have used it successfully to only trigger then change after the resize events have stopped coming for a certain period (in the case below 300ms). This does add a small delay to captureing the end, but if like me you just want to store the final size then that works fine. Here is the version of the code above but using underscore debounce:
var wndw = $(element).kendoWindow({
// .....
resize: _.debounce( this.hasResized, 300)
// .....
}).data('kendoWindow');
//This is called at the end of a resize operation (using _.debounce)
function hasResized (args) {
// ** Your code here **
};
Hope that helps.
Here's the scenario
$("p").live('customEvent', function (event, chkSomething){
//this particular custom event works with live
if(chkSomething){
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
}
})
Here's some background
The custom event is from a plugin called inview
The actual issue is here http://syndex.me
In a nutshell, new tumblr posts are being infnitely scrolled via
javascript hack (the only one out there for tumblr fyi.)
The inview plugin listens for new posts to come into the viewport, if the top of an image is shown, it makes it visible.
It's kinda working, but if you check your console at http://.syndex.me check how often the event is being fired
Maybe i'm also being to fussy and this is ok? Please let me know your professional opinion. but ideally i'd like it to stop doing something i dont need anymore.
Some things I've tried that did not work:
stopPropagation
.die();
Some solutions via S.O. didnt work either eg In jQuery, is there any way to only bind a click once? or Using .one() with .live() jQuery
I'm pretty surprised as to why such an option isnt out there yet. Surely the .one() event is also needed for future elements too? #justsayin
Thanks.
Add a class to the element when the event happens, and only have the event happen on elements that don't have that class.
$("p:not(.nolive)").live(event,function(){
$(this).addClass("nolive");
dostuff();
});
Edit: Example from comments:
$("p").live(event,function(){
var $this = $(this);
if ($this.data("live")) {
return;
}
$this.data("live",true);
doStuff();
});
This one works (see fiddle):
jQuery(function($) {
$("p").live('customEvent', function(event, chkSomething) {
//this particular custom event works with live
if (chkSomething) {
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
$(this).bind('customEvent', false);
}
});
function doStuff() {
window.alert('ran dostuff');
};
$('#content').append('<p>Here is a test</p>');
$('p').trigger('customEvent', {one: true});
$('p').trigger('customEvent', {one: true});
$('p').trigger('customEvent', {one: true});
});
This should also work for your needs, although it's not as pretty :)
$("p").live('customEvent', function (event, chkSomething){
//this particular custom event works with live
if(chkSomething && $(this).data('customEventRanAlready') != 1){
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
$(this).data('customEventRanAlready', 1);
}
})
Like Kevin mentioned, you can accomplish this by manipulating the CSS selectors, but you actually don't have to use :not(). Here's an alternative method:
// Use an attribute selector like so. This will only select elements
// that have 'theImage' as their ONLY class. Adding another class to them
// will effectively disable the repeating calls from live()
$('div[class=theImage]').live('inview',function(event, visible, visiblePartX, visiblePartY) {
if (visiblePartY=="top") {
$(this).animate({ opacity: 1 });
$(this).addClass('nolive');
console.log("look just how many times this is firing")
}
});
I used the actual code from your site. Hope that was okay.
I apologize if this has been asked before but, is there a way to add an event listener/handler to a Javascript object? Preferably using JQuery.
Such as:
var foo;
$(foo).bind('change', function() {
alert("Foo has changed!");
});
I have tried this, but nothing seems to happen. Does this only work with DOM elements?
EDIT:
I need an event fired every time that the audio or video tags throw an error. Originally, I was using an interval to check whether or not the error, 'media.error', object was null, but this uses excess processing power and I would like to avoid it.
EDIT 2: Apparently I was going about it wrong, easiest way I found was to add the "onerror" property to the video/audio tag.
I agree with Cheeso that it's more important for you to state what you actually want to do, however one workaround for your specific question could be to store your variable within an object and only provide access through getter / setter, then you can do what you want in the setter. e.g.
function data() {
var foo = 0;
this.setFoo = function(newVal) {
foo = newVal;
alert(foo);
};
}
var theData = new data();
theData.setFoo(5);
Yes, that's correct. You cannot make a "variable watcher". There is no event fired for variables when they are changed.
What are you really trying to do?
You could try:
http://higginsforpresident.net/js/static/jq.pubsub.js
See
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events
Or use a framework like backbone/underscore or knockout.js.
HTML/Elements/audio
var foo;
$(foo).bind('error', function() {
//your code here
});
I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.
I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.
Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.
I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.
Anybody on this?
Lille
Triggering 'focusout' event formats the field. Triggering 'change' does not work in the most recent version (1.7.4).
$('input.money').autoNumeric({aNeg: '-'}).trigger('focusout');
autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:
$('input.money').autoNumeric({aNeg: '-'}).trigger('change');
Hope this helps!
I just ran into this problem myself. I had to make it more general, but this worked for me:
$('input.auto-numeric').ready(function(){
var format_options = {
aSign: '$'
};
$('input.auto-numeric').each(function(){
$(this).autoNumeric(format_options);
if($(this).attr('id')){
$(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
}
});
});
This should work.
jQuery(function($) {
$('input.auto').ready(function(){
$('input.auto').autoNumeric();
var inputID = uniqueID; // use the jQuery.get() function to retrieve data
var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
if(jQuery().autoNumeric){
$('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
}
else{
alert('plugin not available');
}
});
});
Bob
This is what I eventually did:
$(document).ready(function(){
$('input.auto').autoNumeric();
$('input.auto').each(function(){
var element = this
if(element.value !=""){
$('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
}
}
);
});
Another way of forcing formatting is using 'update' like
$(".input-numeric").autoNumeric('update');
In the current version 2.* and onward, this is done by default thanks to the formatOnPageLoad option that is set to true.
It's that simple ;)