My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.
Here is the code for the button:
<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>
And here is the function that inserts an image to the map:
$('#tram7')[0].onclick = function() {
if (overlayTram7.getMap() == map) {
$('#tram7').addClass('deselected');
overlayTram7.setMap(null);
} else {
$('#tram7').removeClass('deselected');
overlayTram7.setMap(map);
}
};
The style change worked with a hover, but I don't know how to change the style of a clicked button.
.Button {
font-family: Calibri, sans-serif;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: white
}
.Button:hover {
color: white;
background:green
}
Thanks in advance.
Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:
You'll want the psuedo-selector, :active
.Button:active {
color: white;
background:green
}
Here is an example
Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()
Updated example using toggleClass()
The :active pseudo-selector should be what you're looking for
.Button:active {
color: white;
background:red;
}
Use toggleClass in your click callback to add/remove a class which will style your button:
$('#tram7').toggleClass('clicked');
And the class:
.Button.clicked {
color: white;
background:blue
}
http://jsfiddle.net/5m9h6/1/
Related
I am trying to make my buttons change colour when clicked. The easy button turns green, medium turns yellow, hard turns red and insane turns black. When I click any button on the first try it works however when I click on another button it is supposed to reset all the buttons back to white and change the button I clicked to the specified colour. Right now my code is resetting it back to default and not showing the clicked button colour.
document.querySelectorAll(".difficulty-button").forEach((gameMode) => {
gameMode.addEventListener("click", function() {
let linkColour = window.getComputedStyle(gameMode);
document.querySelectorAll(".difficulty-button").forEach((item) => {
item.style.backgroundColor = "green";
item.style.color = "black";
});
gameMode.style.backgroundColor = linkColour.backgroundColor;
});
});
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0;
list-style: none;
}
button {
box-shadow: none;
outline: none;
width: 10em;
height: 3.5em;
transition: 0.25s linear;
cursor: pointer;
background-color: white;
}
li:nth-child(1) button:hover {
background-color: rgb(51, 165, 50);
color: white;
}
li:nth-child(2) button:hover {
background-color: rgb(255, 255, 0);
}
li:nth-child(3) button:hover {
background-color: rgb(204, 50, 50);
color: white;
}
li:nth-child(4) button:hover {
background-color: black;
color: white;
}
<ul>
<li><button class="difficulty-button">Easy</button></li>
<li><button class="difficulty-button">Medium</button></li>
<li><button class="difficulty-button">Hard</button></li>
<li><button class="difficulty-button">Insane</button></li>
</ul>
The reason this only works the first time is to do with the way you get the colour to apply to the button, and how you apply the new colour.
Why it doesn't work:
You are using getComputedStyle to get the colour of the button when it is clicked. The first time it's clicked the hover class is applied, so to use is the one you clicked.
However then the javascript changes all the buttons to green directly using inline styles. These will override any other CSS being applied. Now every time you click, all the buttons are set to green so that colour is getting applied again.
Getting it to work: How to Swap CSS Classes on Click
You could hardcode the colours into the JS function and have an if to check which button it is. But a more flexible way to do this is to use your classes again.
1. Set up your CSS Classes. We already have rules set up for the colours you want, so if we give then a class name we can use them in the js, e.g.
.colorbutton-1, /* give the existing 1st button CSS a class called "colorbutton-1" */
li:nth-child(1) button:hover{
background-color: rgb(51, 165, 50);
color: white;
}
Do this for each button, and also set one up for the default unselected state, e.g.
.colorbutton-0{
background-color:green;
color: black;
}
Note the classes all start with the same name colorbutton - this is important! This is what we will use in the js later.
2. Write a function to swap the classes on the buttons depending on what was clicked. We'll pass in the button and which button number this is (i.e. 1,2,3,4).
In the function we remove all classes starting with colorbutton, and then add the new class - this is made up of the colorbutton- and the number of the button. If we want to apply the unselected style, we use 0.
function swapClass(btnElement, btnNum){
// remove all existing classes starting with "colorbutton"
btnElement.classList.forEach(className => {
if (className.startsWith('colorbutton'))
btnElement.classList.remove(className);
});
// now add the new class
btnElement.classList.add('colorbutton-'+ btnNum);
}
3. Add your click listeners to listen for clicks and change the classes depending on which button was clicked.
// add a "counter" in forEach that passes the index of the element being processed, e.g. 0,1,2 etc
document.querySelectorAll(".difficulty-button").forEach((gameMode, btnNum) => {
// add the click listener for the current button
gameMode.addEventListener("click", function () {
// on a click, remove all 'colorbutton' classes and set them to the default
document.querySelectorAll(".difficulty-button").forEach((item) => {
swapClass(item, 0);
});
// add the class for this button, passing in the class number to generate the classname
swapClass(this, (btnNum+1));
});
});
Working Example Putting this all together:
document.querySelectorAll(".difficulty-button").forEach((gameMode, btnNum) => {
gameMode.addEventListener("click", function () {
document.querySelectorAll(".difficulty-button").forEach((item) => {
changeClass(item, 0);
});
changeClass(this, (btnNum+1));
});
});
function changeClass(btnElement, classRef){
// remove all existing classes starting with "colorbutton"
btnElement.classList.forEach(className => {
if (className.startsWith('colorbutton'))
btnElement.classList.remove(className);
});
// now add the new class
btnElement.classList.add('colorbutton-'+classRef);
}
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0;
list-style: none;
}
button {
box-shadow: none;
outline: none;
width: 10em;
height: 3.5em;
transition: 0.25s linear;
cursor: pointer;
background-color: white;
}
.colorbutton-0{
background-color:green;
color: black;
}
.colorbutton-1,
li:nth-child(1) button:hover{
background-color: rgb(51, 165, 50);
color: white;
}
.colorbutton-2,
li:nth-child(2) button:hover{
background-color: rgb(255, 255, 0);
}
.colorbutton-3,
li:nth-child(3) button:hover{
background-color: rgb(204,50,50);
color: white;
}
.colorbutton-4,
li:nth-child(4) button:hover{
background-color: black;
color: white;
}
<ul>
<li><button class="difficulty-button">Easy</button></li>
<li><button class="difficulty-button">Medium</button></li>
<li><button class="difficulty-button">Hard</button></li>
<li><button class="difficulty-button">Insane</button></li>
</ul>
Just like the pseudo class you are using for button:hover, CSS also provides pseudo classes for active and visited.
You should be able to do something like the following, which would change the color of the button once it is selected and revert it when new button is selected.
li:nth-child(4) button:active {
background-color: black;
color: white;
}
Using the following code I can change the name of the button when user hovers over it. Is there a way to change the button's name with its id when user hovers over it (using JavaScript)?
.button:hover span {
display: none
}
.button:hover:before {
content: "New name";
}
.button:hover {
background-color: #aaaaaa;
}
<button class="button" id="some_id">
<span>old name</span>
</button>
You can use attr(id). See the documentation for further information.
.button:hover span {
display: none
}
.button:hover:before {
content: attr(id);
}
.button:hover {
background-color: #aaaaaa;
}
<button class="button" id="some_id">
<span>old name</span>
</button>
Here's one that changes things back...
onmouseover="this.innerHTML=this.id;"
onmouseout="this.id=this.innerHTML; this.innerHTML='old name';"
Just add these events to the button.
Quite easy actually...
onmouseover="this.innerHTML=this.id;"
Just add this event to the button.
I have a button inside the anchor tag(defined it using class).
<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>
Now I want to disable it.So I have used the following code to disable the anchor tag.
moreButton.disabled = true;
The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled i.e. not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.
The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:
a {
pointer-events: none;
}
I am a disabled anchor tag
As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:
.contactButtonSmall {
position:absolute;
left:225px;
top:165px;
font-weight:normal;
font-size:11pt;
}
Then you can use the :disabled selector to change the appearance of the button when it is disabled:
.contactButtonSmall:disabled {
/* Styling for disabled button */
}
I have used button along with the style attributes
background-color: Transparent;
border: none;
instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.
example code is given below:
<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>
In CSS file:
.contactButtonSmall {
position:relative;
display: block; /* 'convert' <a> to <div> */
width: 60px;
max-height: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../contactImages/blankSmallButton.gif);
text-decoration: none;
text-align: center;
cursor:pointer;
background-color: Transparent;
border: none;
}
You can use a mixture of CSS and JS to accomplish this:
HTML:
<a href="/" id="myLink">
click me!
</a>
CSS:
#myLink {
background: red
}
a#myLink.disabledLink {
background: grey;
cursor: not-allowed;
}
JS:
document.getElementById("myLink").onclick = function(e)
{
e.preventDefault();
this.className += " disabledLink";
}
jsfiddle here
this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.
I have 6 divs (.selector) set to do (onclick):
Show all tables
Show Nº1, Hide rest
Show Nº2, Hide rest
...
Show Nº5, Hide rest
They also toggle a class "activated" that changes the background color.
What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".
Something like the "once function" but that resets as soon as another div is activated. Any way to do this?
Here is my CSS
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
Here is my JavaScript
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});
If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).addClass('activated');
});
Or you can check if the clicked .selector has .activated class like:
$('.selector').on('click', function(event) {
if($(this).is('.activated')) return;
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});
There's two things to do:
Wrap the JavaScript inside a function
Unbind the click event everytime you click on something
Here's how:
function clickEvent(elements){
elements.bind('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
$('.selector').unbind('click');
clickEvent($('.selector').not(this));
});
}
clickEvent($('.selector'));
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
color: #FFF; //for display purposes
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>
You should be able to do
if($(this).hasClass('activated'))
return;
To skip it if this was allready activated.
So I have an icon that is essentially an open close button.
So when you open it, it turns red and rotates 45degrees. Now here's the issue. Since its open, I can't close it. Since if I change the div class the icon won't show while its in an active state. Here's the jQuery I'm using
$(".fa-plus").click(function() {
$(".form").removeAttr("style");
$('.fa-plus').css('-webkit-transform', 'rotate(45deg)');
$('.fa-plus').css('-webkit-transition', '0.25s');
$('.fa-plus').css('color', '#FF0000');
$(".fa-plus").attr("id", "test");
});
This basically opens it, and ads an #id called test. And what happens is when I click on the icon which is named #test. It won't display an alert with this code, it only displays the alert when I press the +, not X
$("#test").click(function() {
alert('test');
});
Here's a demo. I only want the alert when you click on the red X
You can do it simply like: http://jsfiddle.net/M5N9V/2/
$(".fa-plus").click(function () {
var io = this.io ^= 1;
$(this).css({
transform: "rotate("+ (io?45:0) +"deg)",
color: io?"#f00":"#69f",
transition:"0.25s"
});
if(io){
// OPEN DROPDOWN LOGIC HERE
}else{
// CLOSE DROPDOWN LOGIC HERE
}
});
Or even like: http://jsfiddle.net/M5N9V/3/
$(".fa-plus").click(function () {
$(this).toggleClass("fa-red");
});
by modifying your CSS like:
.fa-plus {
cursor: pointer;
font-size: 24px;
color: #69f;
transition: 0.25s;
}
.fa-red{
color: #f00;
transform : rotate(45deg);
}
Here's a fiddle for you...
Best way to do this is utilising a CSS class, and add/remove it on each press using jQuery's toggleClass method. Then you can check if the class is applied and act accordingly afterwards:
JavaScript/jQuery:
$(".fa-plus").click(function() {
$(this).toggleClass('fa-close');
if(!$(this).hasClass('fa-close'))
alert('closing!');
});
CSS:
.fa-plus {
cursor: pointer;
font-size: 24px;
color: #6699FF;
-webkit-transition:0.25s;
-moz-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.fa-close{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
color:#FF0000;
}