When i click dropdown button and click it again for closing focus still remains. even when i move mouse away. How can focus removed for that case?
One possible solution is to remove the focus on the second click with the help of element.blur() - here are the related docs. You can add the class to the button on the first click and if the button has class (it will have on the second click) - just use blur.
But keep in mind, that some users want to interact with your site with the help of a keyboard, and removing focus will be annoying for them. Do you need focus to be visible on the button before opening the dropdown? Another possible solution is to remove :focus style from the element completely (outline: none), but it's not recommended.
I have an input and a checkbox, when the input is focused it display some information under it.
The problem is : when those information are displayed if I click on the checkbox it hides the information (because my input is not focused anymore) but the checkbox is not checked.
Here is a working plunker which reproduce this behavior.
Is there a way to make the checkbox checked in this scenario ?
EDIT :
I think the problem is because the input loose the focus on the event mousedown and the checkbox is checked on the event mouseup (or maybe click) so when the mouseup event is fired the input has already lost the focus so the message under it is hidden and the checkbox moves up. So when the mouseup event is fired the cursor is not anymore on the checkbox, that's why the checkbox is not checked.
Nothing in pure CSS. You would need to bind focus event on JS.
Something like this:
var input = document.querySelector('#input');
input.addEventListener('focus', function() {
this.classList.add('focus');
});
And then change your CSS from :focus to .focus
My solution for your question is attached here. This is a simple way. I have added JQuery code to it. You can try this code. I have written this code using JSFiddle. The link is given below:
[https://jsfiddle.net/679g9p6p/1/][1]
If you want to hide the information when focus out from the textbox, then you can try this code given below:
[https://jsfiddle.net/xxsL2e03/100/][2]
I have a tooltip label near the cursor.
I have 2 problems which i am not sure how to fix:
When the mouse is above the label the cursor changes to text cursor. I want the cursor to not change.
The Canvas element does not receive any mouse event. It seems that the label receives the events.
How it can be fixed?
Cursor should not change over a label. Something wrong with your CSS: check in your browser which style has "cursor" in it.
If you don't feel like figuring it out, just set style "cursor: default" on your label (you may need to add !important; if it does not work.
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
I used the :active pseudoclass on my buttons to change the padding and border color when clicked. This visually mimics a button press. See an example.
Works in FF. In Chrome, though, the clicks don't always register. Specifically, if you click-and-hold on the text inside the button, then drag off the text (but still inside the button), the click will not fire. Same goes if you click in the padding, then drag into the text.
I've read weird things about buttons and padding in FF vs. Chrome but I can't figure out how to solve this problem.
Solution: Give it a Single Thing to Click
Adding a position: relative to the button and then overlaying it with a :before pseudo element like so:
button:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Seemed to resolve the bug for me. See this fiddle. I imagine it resolves the bug (which I do think it is a bug) by giving a single "element" to focus upon when it is clicked.
Try this one: http://jsfiddle.net/uPZuJ/9/
Instead of checking for both mousedown and mouseup on the same element, check only for mousedown on your button and then check for mouseup on any other element.
Your button works great in Chrome. I have fixed the "click-and-hold on the text inside the button" thing by few lines of CSS and a attribute for IE.
http://jsfiddle.net/uPZuJ/2/
EDIT:
This is a screenshot of the bug I fixed:
Try this: http://jsfiddle.net/uPZuJ/22/ http://jsfiddle.net/uPZuJ/25/
This is how it works:
Initialize 'down' to false
mousedown on button causes 'down' to be true
On mouseup/click, if 'down' is true, append text 'click' and set 'down' to false
Clicking triggers a click.
Dragging the text into the padding triggers a click.
Dragging the padding into the text triggers a click.
Dragging from the inside to the outside does not trigger a click.
Dragging from outside to inside does not trigger a click.
Here is the code:
var down=false;
$("button").mousedown(function() {
down=true;
});
$("button").mouseup(function() {
if(down) {
$("#clicks").append("<div>click</div>");
}
down=false;
});
$("button").click(function() {
if(down) {
$("#clicks").append("<div>click</div>");
}
down=false;
});
After having playing around with your example, I think I got what happen behind the scene. By default click event will check both mousedown and mouseup event to be fired before it fires the callback. The problem is that you click on the text, your current target is the text now(it means mousedown event is already fired inside the text area, and it's waiting for mouseup event to be fired in order to complete a click event). However, you drag cursor out of the text and release mouse outside the text area, and your current target now is the Button, not the text anymore(mouseup event doesn't fire inside text area, but inside button area), so click event won't happen. However, if you click on the text and drag, and release your mouse inside text area, it will works just fine. This is the problem of event bubbling or capturing. In jQuery we have event.stopPropagation() or event.stopImmediatePropagation, but it just works for FF, not in Chrome.
What I suggest is using mousedown and mouseup event instead of click event.
Use "mouseup" instead of "click", it should work in ie, chrome and ff.
var elementName = "";
$("button").mouseup(function() {
if (elementName != "" && elementName == "BUTTON") {
$("#clicks").append("<span>click</span><br/>");
elementName = "";
}
});
$("button").mousedown(function() {
elementName = $(this).get(0).tagName;
});