This tv.ui.button only responds to mouseclick when initially loaded, but then responds to keyboard ENTER or mouseclick after it's been clicked at least once. Do I have something wrong here?
HTML
<div class="tv-button alert-button" id="test-button">Alert button</div>
JS
decorateHandler.addClassHandler('alert-button', function(button) {
goog.events.listen(button, tv.ui.Button.EventType.ACTION,
function() {
alert('Button clicked.');
var elementToFocus = goog.dom.getElement('tab1');
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);;
});
});
EDIT: it seems this may be a question about javascript, not closure specifically. I'm posting a new question under the appropriate tag
Have you made sure that the button has cursor focus? If not then the "Enter" key event will get handed to the default handler.
Well, I fixed it with a semi hack. i used a $('target').click on the button within $(document).ready, which seems to set the focus as if a click event had actually happened
Related
I am using a CSS hover trick to clean up my interface. Controls will only be shown when the cursor is hovering inside the element. I'm running into an issue when using the interface on a touch screen device. If the control button is not shown display:none and I touch where it should be, the event is still triggered for the button.
Try this fiddle both in your browser and on a touchscreen device to see what I mean...
http://jsfiddle.net/6PvCn/2/
On a touchscreen device, touch the red square and the alert should fire, without the button even showing up. I tested this on both the desktop Android Emulator and my real Android 2.3 phone.
The effect I'm going for is for the button to first be shown without firing, even if the user touches where the button "is".
I'd rather use a pure CSS solution before resorting to javascript.
Try pointer-events: none; along with display: none;
I just tested it on my real device, and it indeed executes the button's action.
You could maybe try to make the red box an image and change the image to a button by an onclick with Javascript. I would have provided you with some code if I wasn't short on time.
You can't do it with pure CSS, tapping the button will put the button into hover state and fire the click event. Instead you should fire the button off on active.
Here is the solution I came up with... http://jsfiddle.net/6PvCn/7/
On an Android touchscreen (don't know about IOS), the hover event for the hidden element is not fired if it is not shown. So basically I check to see if the element was hovered before it was clicked.
In a nutshell
$(".hidden").hover(function(e) {
if(e.type == "mouseenter") $(this).addClass("hovering");
else $(this).removeClass("hovering");
}).click(function(e) {
if(!$(this).hasClass("hovering") return false;
});
The fiddle explains the more complicated situation I had with form elements and dynamically added content. It provides a general solution as opposed to this element specific one.
I wrote a JS solution for you:
https://codepen.io/anon/pen/bmYROr
The trick is to prevent the button's click event getting fired for the first time the outer div is getting clicked because on touch devices click event has hover effect.
let isTouchDevice = true;
let isHovered = false;
document.getElementById('outer').addEventListener('click', (e) => {
if (isTouchDevice) {
if (!isHovered) {
e.stopPropagation();
}
isHovered = true;
}
}, true);
document.getElementById('outer').addEventListener('mouseleave', (e) => {
if (isTouchDevice) {
isHovered = false;
}
}, true);
document.getElementById('btn').addEventListener('click', () => {
alert("hi");
});
I just found out that after upgrading to Meteor 0.5.2 (from 0.5) event handling for key events ('keypress', 'keydown', keyup') stopped working for me. Other events like ('click' & 'blur') work just fine.
Even in sample apps the code like this doesn't do anything:
Template.someTemplate.events = {
'keydown' : function(e) {
console.log(e);
}
};
The interesting thing is that this code does work (function fires) for keypresses in I'm typing inside an input type="text" or a textarea.
But elsewhere - nothing happens.
I'm testing on the latest Crome in Ubuntu 12.10.
Has anybody else experienced the issue?
Thanks,
George
The keydown event works for me for html that is editable. Input fields or contenteditable tags fire the keydown event.
But if you're asking how to handle keydown events on the body, this thread might help:
You can take a look at this thread: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/uHy--xIGH8o.
Basically, for now, you can attach an event handler to the body element directly. In the example in the above link, he waits until the template is rendered, and then used jQuery to attach the handler:
Template.myTemplate.rendered = function() {
// Assuming you're using jQuery
$('body').on('keydown',function() {
console.log('key pressed');
});
}
The Meteor team is apparently going to include better support for attaching body level events soon.
You could have simply enclosed
$('body').on('keydown',function() {
console.log('key pressed');
});
in meteor.startup function
I am trying to set a focus on a dropdown within GridView(gridViewDropDown class) when page loads:
if ($('select.gridViewDropDown').length)
{
alert("Found my dropdown");
//$('select.gridViewDropDown:first').focus();
setTimeout(function() { $('select.gridViewDropDown').focus(); }, 10);
}
I can see the alert which means that dropdown is found but it never gets a focus. What do I need to change here? I am using IE 6/7.
I'd try this approach:
$(function() {
setTimeout(function() { $('select.gridViewDropDown').focus(); }, 50);
});
You need to wait until the DOM is ready, it's possible that something else is set to steal focus when the page loads (code that's most likely executing when the DOM's ready as well) This approach times it to be just slightly after that happens.
It also takes advantage of how jQuery works, if no elements are found when this function fires, none will steal focus, so it's safe to just leave in there as-is.
I'm working on an own combobox control for ASP.Net which should behave like a selectbox, I'm using a textbox, a button and a div as a selectbox replacement. It works fine and looks like this Image:
My problem now is the Selectbox close behaviour: when clicking anywhere outside the opened selectbox it should close.
So I need something like an onClick event for the whole page which should only fire when my div is open. Any suggest how to do that?
Add a click event handler to document. In the event handler, examine its target (or srcElement in IE) property to check that it isn't your open div or any of its descendants.
Set a click event handler on the document that "closes" the pseudo-combobox. In addition, set a click event handler on the pseudo-combobox's container (the div, in this case) which cancels bubbling of the event. Then any clicks in the div will bubble up only as far as the div before being halted, while clicks anywhere else will bubble all the way up to the document.
This is a much easier option than mucking around traversing the DOM from the event's target upwards to work out where the click came from.
EDIT: if you are setting the div's style to display: none; (or something similar) to hide it, then it doesn't matter if you leave the event handler on the document - hiding it when it's already hidden will have no effect. If you want to be very tidy, then add the event listeners when the div is shown, and remove them when it is hidden; but there's probably no need to bother.
document.onclick = function() {
if(clickedOutsideElement('divTest'))
alert('Outside the element!');
else
alert('Inside the element!');
}
function clickedOutsideElement(elemId) {
var theElem = getEventTarget(window.event);
while(theElem = theElem.offsetParent) {
if(theElem.id == elemId)
return false;
}
return true;
}
function getEventTarget(evt) {
var targ = (evt.target) ? evt.target : evt.srcElement;
if(targ && targ.nodeType == 3)
targ = targ.parentNode;
return targ;
}
Put a transparent div that covers whole the page and lies under your dropdown. At that div's click event hiğde your dropdown.
I have a webform and i want to detect if F5 button was pressed or if the page was refreshed. I know about postback but it is not what i'm looking for. I have a gridview that loads in a modal popup when a button is clicked and a parameter's value is set for the gridview. When refresh is hit and if the modal popup button was previously clicked the modal popup is visible right after refresh. I want to detect if the page is refreshed to prevent this. any ideas? I thought to try Override but I'm not exactly sure how to use it. I tried Control.ModifierKeys but I don't have access to ModifierKeys.
Pressing F5 or physically clicking the browser refresh behaves similarly to navigating away from the page. This is captured in the event window.onunload. Try the snippet example below:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
This will capture the refresh and allow you to do something or prompt the user.
Reemember that hotkeys are processed in the client side in the browser. The easiest way to implement this is through javascript.
Look at the following link:
http://snippets.dzone.com/posts/show/3552