How to remove button hover property upon clicking the button? - javascript

I've seen a lot of post with almost the same problem as mine but it is not working for me.
I would like to remove the hover property of my button upon clicking the said button before the remove event I have.
Edit: I have 3 buttons for this.
Edi2: I found a workaround for this. I manually set the button color upon clicking the button

$('button').on('click', function() { // when you click the button
$(this).addClass('no-hover-button'); // add the class 'no-hover-button'
});
button:not(.no-hover-button):hover { /* only apply hover styling when the button does not have the class 'no-hover-button' */
color: red;
}
like in your case
.btn-group button:not(.no-hover-button):hover {
background-color: #FFF6C3;
border: 1px solid grey;
}

You can't change or alter the actual :hover selector through Javascript.However, you can add an another class (new) and remove that class(new) onClick.

Related

FireFox keyboard active button

Having a UI that is meant to be keyboard friendly. It has various controls in the for of buttons etc.
Problem is that when one click a button by keyboard, the button does not get the :active status. I have a strong style to show it gets :focus - but the active status is only triggered when one use mouse and click with main button.
This makes things very user-unfriendly. It looks as if the button is not activated. The page has frozen or the like. One risk users clicking multiple times as they expect a visual feedback.
From what I read at MDN it looks as this is a feature in the CSS3 specification:
Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
As this is a JavaScript based UI, I have tried to solve this by JS on the click event:
Add, and remove a .activated class.
This does not work as the page is not re-rendered. To fix this without using a setTimeout() I have tried things like these:
https://css-tricks.com/restart-css-animation/#article-header-id-0
element.classList.add('activated');
void element.offsetWidth; // Trigger reflow
element.classList.remove('activated');
No effect.
I have tried to add class, remove element, insert a new with the class, and remove the class. No effect.
Used dataset-active=1 and CSS by that. No effect. Same issue as with adding and removing class.
And some other things.
I have also tried to use setTimeout(), but this is somewhat buggy. Especially if one use Enter key (to trigger multiple clicks.)
In the end I also tried to listen for keydown, keyup etc. setting statuses if it was enter, space or mouse click etc. But that quickly got very messy.
Is there a neat trick for this that I am missing? A solution that is not overly complex.
Sample code
button:focus {
outline: 1px solid blue;
}
button:active {
outline: 4px solid red;
}
<button onclick="counter.value = ++counter.value;">Button</button>
<input id="counter" value="0">
How about that: Adding a data-attribute containing the related keycode to the button. While pressing the key down an active class is assigned and click() and focus() are triggert. When the key is released the active class will be unassigned.
document.onkeydown = function (evt)
{
let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
if (btn)
{
btn.classList.add ('active');
btn.click();
btn.focus();
}
}
document.onkeyup = function (evt)
{
let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
if (btn)
{
btn.classList.remove ('active');
}
}
button:focus {
outline: 1px solid blue;
}
button.active, button:active {
outline: 4px solid red;
}
<button data-key="32" onclick="console.log(1);">Button 1 [space]</button>
<button data-key="16" onclick="console.log(2);">Button 2 [shift]</button>
<button data-key="13" onclick="console.log(3);">Button 3 [enter]</button>
Alternatively you can take a look at accesskey attribute.

Set outline border on a focused element

My code loads various items on some button click event into the document.
I managed to set the focus properly on the first item from those freshly loaded items once there all have been displayed using the following code:
$(function () {
$("a.getfocus").focus();
});
This works but I would also like the browser's default outline to show up on this focused item.
Is there any easy solution to achieve this ?
With the :focus pesudoselector to the element and the outline property:
outline: [properties]
Say, you have a link which usually shows an outline on focus (yep, that's the default behaviour):
<a id="test" href="https://test.com">Test</a>
With CSS, you can do the following:
#test {
outline: 1px dotted red;
}
to get a red outline. Usually, you'd want to do:
a {
outline: none;
}
Back to your question, you can do:
a:focus {
...
// rules
...
}
You can see a small sample here.

How to add a button in any expected place by using appendChild() function in JavaScript?

I want to add a button in my web page when a certain event is occurred by using javaScript. I searched online much and try to solve this problem by using appendChild() function.
My code is like this :
var btn = document.createElement(‘button’);
btn.body.appendChild(btn);
Here I am facing two problems
My button is added but in a certain corner of my html page and
I can’t add style to this new created button without providing css to other buttons.
So how can I add this button in a certain positon and add css to this button
Thanks in advance.
Your first problem is you added the button after body. So that your button is appeared in a certain corner of your html page.
To solve this problem you may add this after an id containing div. And this div must be in your expected location.
Make a div which id is myButton in your expected location
id="addButton"
Then append your button after this id like this
document.getElementById("addButton").appendChild(newButton);
To provide CSS to this new created button your CSS code will be like this
#addButton button {
display: block;
background: green;
padding: 10px;
color: #ffffff;
}
To provide the hover effect your code will be
#addButton button:hover {
background: red;
}
Append it to the document instead of a button..
var btn = document.createElement('button');
btn.innerText="button";
btn.style.background="red";
document.body.appendChild(btn);

CSS/JavaScript - Adding the :focus state when an element is hovered

So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.
I did some searching and found this snippet:
.dropdown:hover .dropdown-menu{
display: block;
}
This opens the menu on hover, which is great (without having to toggle .dropdown-toggle
My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.
So the question is: is there a way to force the :focus state when :hover is active?
I tried to do this:
.dropdown:hover #home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?
$(".dropdown").hover(function(){
$('#home .dropdown-toggle').focus();
});
And in css
#home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
when the focus is on, the css gets apply.
I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.
I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).
A simple example: https://jsfiddle.net/matu2vd6/5/
HTML:
<div class='dropdown'>My dropdown element.</div>
<div class='dropdown-toggle'>My dropdown-toggle element.</div>
JS/JQUERY:
let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");
dropDownEl.on("mouseover", function() {
dropDownToggleEl.css({"background": "#00aaff",
"border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
dropDownToggleEl.css({"background": "transparent",
"border": "none"});
});

Styling buttons in Webix Web skin

For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2

Categories

Resources