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.
Above you have a button in 3 states, normal, hover, and then what is the third state called? What would need to put into my CSS to style this?
The button seems to be in this state after a right click too.
Really simple probably, I know, but I can't figure it out.
The state you are looking for is the focus state
There are actually 4 states in the GIF you presented
Normal (light pink)
Hover (darker pink, mouse is hovering)
Active (when you are still holding on, but dragging away)
Focus (not pink anymore but still focused with blue rectangle)
Cannot replicate your gif exactly, but here is a JSFIDDLE demonstrating these 4 states.
I basically want to hide the tooltip on click anywhere in the chart. For this I have configured tooltip as follows:
tooltip:{
hideDelay: 50000 //So that the tooltip stays open for a long time
}
You can check out the example at:
http://jsfiddle.net/e56KT/16/
Anyone with bright ideas!!!
Updated Question:
Before hiding the tooltip:
After hiding the tooltip:
As you can see the div element si not hiding even after hiding the tooltip by the method you described. In a series chart, if we customize the tooltip with increased width and height, the mouse over on other markers doesn't work as this div element stays on top of those markers.
Your code is actually working. It appears not to though because the hide method honors the hideDelay. If you want it to hide immediately try:
hideTooltip = function(){
chart.tooltip.label.fadeOut();
chart.tooltip.isHidden = true;
}
This is what the hide method does internally.
Finally, if you want it to hide if you click anywhere on the chart then I'd hook both the chart: events: click event and the plotOptions: events: click event.
See updated fiddle here.
I have a CustomCellRenderer for a TileList that has a button on the cell. The button does not display except for the label text on the button. Once I mouse over the button it displays like normal again. I'm not doing anything fancy with the button, simply adding it as a child of the cell. I had to set the mouseChildren = true; for the customcellrenderer to even get the mouseover to work, so I'm guessing there is something funky about a customcellrenderer with a TileList?
buttonName.drawNow()
That will force the button to redraw :) That solves this issue.
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;
});