Why can't I hook on html5 video play event? - meteor

I am using an HTML5 video tag with videoJS (last stable release, 4.12). I have no trouble to get the loadedmetadata event but for some reason I probably missed, I can't hook using the "meteor way" on the video object play event.
My template events code:
Template.Player.events({
'loadedmetadata #video_player':function (e,t) {
console.log(e.target); //working fine
},
'play #video_player':function(e,t){
console.log("play!");//now it works
}
});
I am debugging on Chrome but i guess it is not browser related.
edit:
It appears that it works when I don't use id or class selectors. Since I have only one video tag on my template, I can catch the play event by doing this:
Template.Player.events({
'play video':function(e,t){
console.log("play!");//not working
}
});
I still don't buy the fact that meteor can't handle that. If so, why? What is the difference between loadedmetadata and play events that allows the first to use an id selector when the latter can't?
play triggers only when playback is resumed, playing triggers every
time playback starts.
#Oskar, you are right when I look at the documentation. However, in my case, play triggers both when starting a video and when resuming it after a pause.

First off, make sure you're using the correct event - play triggers only when playback is resumed, playing triggers every time playback starts.
Looking at the Meteor docs, these are the events that are "officially" supported:
Event types and their uses include:
click
Mouse click on any element, including a link, button, form control, or div. Use preventDefault() to prevent a clicked link from being followed. Some ways of activating an element from the keyboard also fire click.
dblclick
Double-click.
focus, blur
A text input field or other form control gains or loses focus. You can make any element focusable by giving it a tabindex property. Browsers differ on whether links, checkboxes, and radio buttons are natively focusable. These events do not bubble.
change
A checkbox or radio button changes state. For text fields, use blur or key events to respond to changes.
mouseenter, mouseleave
The pointer enters or leaves the bounds of an element. These events do not bubble.
mousedown, mouseup
The mouse button is newly down or up.
keydown, keypress, keyup
The user presses a keyboard key. keypress is most useful for catching typing in text fields, while keydown and keyup can be used for arrow keys or modifier keys.
Other DOM events are available as well, but for the events above, Meteor has taken some care to ensure that they work uniformly in all browsers.

Related

Force focus client under mouse

There are recipes on how to change focus on mouse move or client change.
But what I want, is to prevent any window from stealing focus. E.g. I open a new terminal via the default meta-Enter shortcut, and when it opens it immediately steals focus. Is there any way to prevent it?
Yes, it's possible. Focus events can happen in many ways. In the case of the new clients, just comment the focus line in your rules.
For the focus follow mouse, remove the client.focus = c in the mouse::enter section of rc.lua
For specific clients, you can add focus filters:
https://awesomewm.org/apidoc/libraries/awful.ewmh.html#add_activate_filter
For the deepest and most advanced focus control, you can disconnect the default focus handler (awful.ewmh.activate) from the request::activate (Awesome 4.0+) signal and implement your own. In that case, you will have absolute control over every focus events.

Difference between focus, focusleave,focusenter with extjs

Can anyone explain me what the difference between focus, focusleave and focusenter on button method with extjs, I'm lost because it seems to be the same when I add event listener. Thanks
kind regards
difference between focus, focusleave and focusenter on button method
with extjs
Method? I guess you mean the events right? Cos:
The focus method will focus your button when you call it.
As you can see on the picture the middle button has focus, you can change the focus on the webpage usually by using TAB key. ExtJS supports full control over your app using keyboard.
The focus, focusenter, focusleave events. If you are not sure what to use - just use "focus"
The focus event should be clear - it's simply fired when the button has focus.
The focusenter is fired when the component get's focus but as the docs states it's also fired in the whole component hirearchy. That means that if the button is in panel which is in view and you focus the button - the focusenter will be fired on the view, panel, button.
main -> panel -> button
Events
The focusleave is the same as focus enter. Fired when focus is lost on the component - again fired in the whole hirearchy. So if the focus went completly away form the page you would see focus leave on the button -> panel -> view

Make WKInterfaceButton keypress clearer in watchOS 2

I find the graphical feedback when pressing buttons (WKInterfaceButton) in watchOS2 is very weak. It is hard to see and even Apple seems to thinks this is the case as they e.g. in the unlock screen change the background to white on active buttons. The default behaviour is to dim the whole button.
How can I make a button press cleared in watchOS 2? I can e.g. change the button text color on activity but how do I easily change it back when it is no longer active?
There is currently no way to detect touch-down, or other events, on WKInterfaceButtons like you can on UIButtons on iOS. The only touch event you can detect is touch-up-inside, which calls the IBAction method.
Therefore what you wish to accomplish cannot be accomplished. Something you might consider is animating the button appearance once the action has been triggered. For example in my app upon button tap I animate the button's background color, then animate it back to the original color. That provides more visual confirmation to the user so they are certain the button was tapped.
I'd encourage you to file an enhancement request at bugreport.apple.com if you'd like to have more control with touch events.

IE8 flex not triggering focusOut event

I have a textfield in flex with a focusOut event on it. I can type in the box and in Firefox and Chrome when I click elsewhere on the page (outside the flash element) the focusOut event will be triggered. However in IE8, the texfield never loses focus when you click elsewhere on the page, outside the flash object. I've tried with focusManager.browserMode set to true and false with no difference (I believe that effects incoming focus anyway). Does anyone have any idea why?
check if your application becomes deactivated when the user clicks outside

jQuery dialog serving multiple button's click event handller

I have a scenario where...
1.) Have created a div with a dropdown list and ok, cancel button
2.) On document ready - registering div created on step 1 into a jQuery dialog
3.) on a javascript button click - I am opening this dialog box.
4.) Now, the problem is - the jQuery dialogbox which I have created, needs to be used by other button clicks as well on same page. Now, my div's (which is a dialog at runtime using jQuery) ok button click is already engaged with a javascript function (button1 click) and I can not associate other button's click events with it - thus stuck up here and have no clues or hit to resolve this.
Anyone have faced this issue in asp.net, jquery earlier? Can someone provide a guidance?
Why you cant associate another event?
buttons will have different id. Is it?
$('#button1').click(function() {
alert('Handler for button 1 .click() called.');
});
$('#button2').click(function() {
alert('Handler for button 2 .click() called.');
});
Is this not possible in your case.?
Options:
1) disassociate the click handler when the function opens the div, then later in the function of opening the div associate a click handler to the button.
2) create multiple buttons toggle them all hidden, associate the click handler to each button you want. When the div is opened do a check to see which button to toggle to visible.
3) create no buttons but have a function create the button on the fly. When the div is opened, create the button for that div by calling the function and passing in a code telling it which button to open and what to associate to the click handler (this can be stored in an array and all that is passed in is the key).
Depending on the application, I have used all of these methods. The last one can have a twist that allows it to call an ajax server based application to get the button text and functionality (stored in a database), this saves you from having to load an array with button data, and also allows for easier expansion of the application.

Resources