Develop Reference

Javascript set button active

I have a table of buttons and once it is populated, I am using
document.getElementById("btn0").click();
to click the first button. The button is doing what it should do, but the background color of the button is not changing the same way it does when I am clicking it manually.
As you can see when its running, the background-color of the div is changing, but the button is not set to active.
Code Snippet:
var myfunc = function(){
document.getElementById("test").style.backgroundColor="red";
};
document.getElementById("btn0").click();
.btn{
border: none;
color: white;
width: 100%;
padding: 5px 5px 5px 5px;
height: 50px;
cursor: pointer;
font-size: 12px;
background-color: #343a40;
}
.btn:active .btn.active{
background-color:green;
outline: none;
}
.btn:focus{
background-color:green;
outline: none;
}
#test{
background-color: green;
width: 600px;
height: 400px;
}
<button class="btn" onclick="myfunc()" id="btn0"> Cool button</button>
<div id="test">
Hello
</div>
Here is a link to a jsfiddle I created:
https://jsfiddle.net/58hrwcgo/3/

There's a difference between click and focus.
click() clicks on the element and then unfocuses, unlike a real mouse click, which clicks and then focuses.
I would recommend simulating a real click by doing both:
document.getElementById("btn0").click();
document.getElementById("btn0").focus();

js
const btn = document.getElementById("btn0")
var myfunc = function(){
document.getElementById("test").style.backgroundColor="red";
btn.focus();
};
btn.click();
css
...
.btn:active, .btn.active{
background-color:green;
outline: none;
}
...

When clicking manually a focus state ist triggered first. That's why the appearance changes according to your class .btn:focus.
document.getElementById("btn0").focus();
document.getElementById("btn0").click();
will lead to the desired behavior.
Furthermore you're missing a colon in your CSS-Example within the :active state:
.btn:active, .btn.active { ... }

You can try the HTML DOM focus() method.
document.getElementById("btn0").focus();
You can read more about this in here.

Method 1:
You can use querySelector function to select the button, then add "active" to its class list.
You also need to change the css selection of active button
var myfunc = function(){
document.getElementById("test").style.backgroundColor="red";
// add the following changes
const btn = document.querySelector(".btn")
btn.classList.add('active');
};
document.getElementById("btn0").click();
/* ....
/* change the btn active to the following */
.btn.active{
background-color:green;
outline: none;
}
/* .....
Method 2: Use addEventListener (preferred)
You can do the whole process in JavaScript without a need to use "onclick" in HTML
const test = document.querySelector("#test")
const btn = document.querySelector(".btn")
btn.addEventListener('click', ()=>{
test.style.backgroundColor="red";
btn.classList.add('active');
});
document.getElementById("btn0").click();
.btn{
border: none;
color: white;
width: 100%;
padding: 5px 5px 5px 5px;
height: 50px;
cursor: pointer;
font-size: 12px;
background-color: #343a40;
}
/* change the btn active to the following */
.btn.active{
background-color:green;
outline: none;
}
.btn:focus{
background-color:green;
outline: none;
}
#test{
background-color: green;
width: 600px;
height: 400px;
}
<button class="btn" id="btn0"> Cool button</button>
<div id="test">
Hello
</div>

Style a a href as a button

I'm creating a large set of HTML components that works in every browser (where did the idea started anyway :-) )
Now, I want to have a button, and according to this post on StackOverflow, I should not use a button because that one has a 3D push effect on click. In order to remove that one, the advice was to use a a href and style that to the button I like.
So here's the HTML:
<a href="#" class="button">
<span>Yes</span>
</a>
And off course, here's the HTML:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a:active.button {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Nothing really commplicated
Now, this does all work in Google Chrome and Firefox as this JsFiddle demonstrates.
The button has 3 different states:
A normal 'default' button.
A style when you hover on it.
A style when you click on it.
Now, Internet Explorer does not apply a new style when you click on the button, it's the same style as the one on hovering. Unless you click the border (If you manage to click the border, than the correct style does apply).
Now, why do I have this behaviour and can it be solved as it is crucial to the development of my Control Suite.
I know it's possible to solve with jQuery by adding a removing a class when you click on it, but this seems a very ugly solution and if there's a 'CSS-Friendly' solution, I would like to use that one.

This may be because the CSS selector is backwards:
Change:
a:active.button {
to
a.button:active {
Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
<span>Yes</span>
</a>
Edit
The issue appears to be that when you click on the link, you are actually clicking the span and, in IE, the click event is not bubbling. As far as IE is concerned, the anchor is not being :activeated.
You need to take the span out of the anchor:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
Yes
</a>
Edit
If you need the span, then the only solution left is a javascript one.
This block of code adds a mousedown/mouseup event listener to all .button elements which toggles the active class on/off.
// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
// jQuery
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
And we change the :active line of the css to:
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Which listens to both the :active pseudo-class, as well as the .active class.
//pure JS solution
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
//jQuery solution
/*
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
*/
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
<span>Yes</span>
</a>

This seems to be a simple problem of priority... a.button:hover is more accurate than a:active.button so it has precedence. The reason why the browsers don't all behave exactly the same is simply because they handle ties differently.
Making sure that the different pseudo classes are always set at the same level of the selector rule will help counter this problem.
So, this means a:active.button should be switched to a.button:active or the others be switched...

You can remove push effect on button by adding a
button {
padding:0;
}

Change Div Outline onmouse over

I am having trouble working with the css and javascript for this... I have several <div> with class="item". What I want to do is change the outline of thie that triggered the action on hover.
I have this CSS:
.item {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid transparent;
}
and this javascript which i found from google
$('.item').hover( function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
Please help me with this...

.item:HOVER {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid blue;
}
try this...

As mentioned above, that should work fine. Additionally, you could do this without any jQuery or Javascript, with simple css:
.item:hover
{
outline: 3px solid blue;
}
http://jsfiddle.net/W4eYQ/

I don't see why you are using jquery when this can be achieved using just CSS:
Using :hover css selector :-
.item:hover{
outline-color: blue;
}
If you want the solution using jQuery only then you might be missing the following things to do: (as mentioned by johny in above comments)
wrap the code in $(function(){/*code here*/})
use .on() to attach a event. (if the element is added dynamically)
$(function(){
$('.item').on('hover', function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
});

I would suggest you use jquery's selectable $(".item-list'").selectable(); instead of re-inventing the wheel.

Like this
script
$(function(){
$('.item').hover(
function(){
$(this).addClass('hovered');
},
function(){
$(this).removeClass('hovered');
}
);
});

Try this css this will work fine
.item:hover {
outline: 3px solid blue;
}

how to change button icon on click?

I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
Here is my button CSS code:
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)

On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle

Here is how you can do this in jquery
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.

Quick solution
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.

How to remove the "Dotted Border" on clicking?

As you can see
I want to somehow remove the dotted lines after the button has been clicked.Any ideas how ?
Thanks
GUYS : This is the current status of my CSS ansd HTML but still no USE:
.myButton input {
position:absolute;
display:block;
top: 5%;
left:87%;
height: 44px;
border:none;
cursor:pointer;
width: 43px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
.myButton input:hover {
background-position: 0 -44px;
color: #049;
outline: 0;
}
.myButton input:active {
background-position: 0 -88px;
color:#fff;
outline: 0;
}
input:active, input:focus {
outline: 0;
}
<div class="myButton">
<input type="submit" value="">
</div>
Nothing seems to be happening !!

You have to style the <a> like:
a {outline: none}

use the below code
a:active
{
outline: none;
}
try for other browsers also
a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }

Possible with pure HTML as well:
...
And with JavaScript you can do that on all links:
window.onload = function WindowLoad(evt) {
//hide focus:
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
arrLinks[i].hideFocus = "true";
}

Despite my comment on your question,
You should keep them for
accessibility.
You can find your CSS-trick here for this
(Anyway, you should keep them.)

#myElement { outline: 0; }
Try this on your element, i dont now if is an image, div, button, link. But it works

If you want to keep the outline on active and on focus, but hide it on clicking a link, you can add in css:
A.No-Outline {outline-style:none;}
and use script:
$('A').hover(function() {
$(this).addClass('No-Outline');
},function() {
$(this).removeClass('No-Outline');
});
you must be hover befor clicking, so it does the job.