I am using the full calendar. I want to change the default, hover or active state for buttons on the header.
All I want it to make :
default: black background, white text color
hover : red background color, white text color
active: green background color, white text color
The CSS code:
.fc-state-default {
color: white;
background-color: black;
}
.fc-state-active {
background-color: green;
}
.fc-state-hover {
background-color: red;
color: white;
border-color: black;
border-width: medium;
}
For some reasons that I can't understand I can't change the style of those buttons.
Here is a js fiddle. JSFIDDLE
Please, can somebody help me!
EDIT if I have something like this:
<div class="fc-right">
<div class="fc-button-group">
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-left fc-state-active">month</button>
<button type="button" class="fc-agendaWeek-button fc-button fc-state-default">week</button>
<button type="button" class="fc-agendaDay-button fc-button fc-state-default">day</button>
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-right fc-state-disabled" disabled="disabled">today</button>
</div>
</div>
It is quite simple, just add these css classes:
.fc-button .fc-button-inner:hover {
background-color: red;
color: #fff;
}
.fc-button.fc-state-active .fc-button-inner {
background-color: green;
color: #fff;
}
.fc-button .fc-button-inner {
background-color: #000;
color: #fff;
}
Here is the fiddle: fiddle link
Related
I want to make a 'Spoiler Alert' button.
First of all, I don't know anything.
I'm really sorry.
I'm doing this because I suddenly want to do it.
Anyway, this is my best result.
<button id="change9">Spoiler Alert</button>
<script>
document.getElementById("change9").onclick = function(){
document.body.style.color = '#ffffff';
}
</script>
<p> </p>
Not Spoiler
<p> </p>
<span style="background-color:#000000;">Spoiler</span><br />
But what I really wanted was to have both results. (Not Spoiler/Spoiler)
In other words,
... span style="background-color:#000000;" ...
I want to delete this part by clicking a button.
Is it possible?
I've been looking for it,
But there is only a way to change the entire background color,
and I can't find a way to change the text background color.
here's a fleshed out version of code that handles multiple spoiler alert buttons for each spoiler
document.querySelectorAll(".showspoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
document.querySelector(`.${this.dataset.target}`).classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
}
.spoiler.show {
color: #ffffffff;
}
<button class="showspoiler" data-target="spoiler1">Spoiler Alert</button>
<br/> Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
<button class="showspoiler" data-target="spoiler2">Spoiler Alert</button>
<br/> Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
Though - the way I'd do it is different, I wouldn't have buttons, I'd just click on the spoiler itself
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
color: #ffffff00;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
color: #ffffffff;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
When you click the button, you have to tell the javascript which element to change. We could tell it to change a span tag but you might have more than one. So I put a class on it called "spoiler". And you can then do something like this:
document.querySelector('.spoiler').style.color="#ffffff";
However, it's better (and easier) to work with css and classes. So instead, I set up a class called 'clicked' and now we just add that to the span like this:
document.querySelector('.spoiler').classList.add('clicked');
document.getElementById("change9").onclick = function(e) {
document.querySelector('.spoiler').classList.add('clicked');
}
.spoiler {
background: #000;
color: #000;
display: inline-block;
padding: 5px;
}
.spoiler.clicked {
background: #fff;
color: #f00;
border: 1px solid #f00;
}
<button id="change9">Spoiler Alert</button>
<p> </p>
Not Spoiler
<p> </p>
<span class='spoiler'>Spoiler</span><br />
You are close! Give an ID to the SPAN:
<span id="myspoiler" style="background-color:#000000;">Spoiler</span>
Then change body to your new ID
document.getElementById("myspoiler").style.color = '#ffffff';
Well, here is my snippet:
<button id="change">Spoiler Alert</button>
<br><br>
<span>Not Spoiler</span>
<br><br>
<span class='spoiler' id='spoiled'>Spoiler</span>
.spoiler {
display: none;
}
.show {
display: inline-block;
border: 1px solid red;
text-align: center;
padding: 2px 4px;
color: red;
}
let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);
function spoilerAlert() {
spoilSpan.classList.toggle("show");
}
Thanks to you guys, I got what I wanted.
Thank you.
document.querySelectorAll(".spoiler").forEach(function(btn) {
btn.addEventListener('click', function(e) {
this.classList.toggle('show');
});
});
.spoiler {
display: inline-block;
background-color: #000000;
cursor: pointer;
}
.spoiler.show {
background: none;
}
Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />
My webpage is constructed as:
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
I want to be able to change the color of the button inside the particular <a> </a> that's being hovered over. How should I write the javascript to do it? Thanks so much for the help!
First at all, you only need a button to fire an JS onclick event. In every other case you use a div to style a "button". Also a button is not an empty tag and therefor needs a closing tag <button>Text</button>
Just like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
<div>I'm a Link-Button</div>
to change the color during hover, you dont need JS. You can simply use the :hover pseudo selector like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
a:hover div {
background-color: red;
}
<div>I'm a Link-Button</div>
As you insist on using your invalid HTML and seem not to understand the use of :hover the same for your code:
.hoverMe:hover .changeColor {
background-color: red;
}
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 1</button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 2</button>
</div>
</div>
</div>
</a>
This is a pretty basic question checking docs usually can help you. Check this out
The use of :hover pseudo selector will help you achieve what you want. In our example we see the a:hover action which enables the hover color change.
a:hover {
background-color: yellow;
}
a {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
w3schools.com
wikipedia.org
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
Hello I am working in the following small page, I have two buttons, one to hide a textarea and the other to show it, in fact they work well however I would like to color the buttom called: Hide in green, in order to do it I tried:
<div class="wrapper">
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color= "green"; ><span>Hide</span></button>
</div>
but It doesn't affect the behavior of my button, I would like to appreciate any suggestion to fix the problem, I created the following jsfiddle file to show the problem:
https://jsfiddle.net/12bkgd4q/9/
You are setting background-color= "green"; outside style attribute, you need to put it inside style attribute
<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>
JSFIDDLE
background-color is a style property, and the colour green is the property-value of that style property; as they're style properties they should be in the style attribute along with the other style(s):
<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>
What you may have been trying to use, but mis-remembering, is the old (now obsolete) bgcolor attribute, which would also set the background-color of an element.
flip around background color and the JavaScript call, like this:
style="vertical-align:middle; background-color:green;" onclick="hide();"
OBSERVATIONS:
Declaring inline-style css works, but the best approach is to use external css to separate style from content as well as using unobstrusive javascript to bind events.
SOLUTION:
Change misspelling in "buttom2" to "button2".
Remove inline-styles. (Remove style attribute from buttons tag). Add the desired css properties in your external CSS file.
Remove onclick event from your button tag and add identifiers to your buttons so that you can later bind event listeners with jQuery in a separate JS file.
CODE SNIPPET:
var sTextO = $("#texto");
$("#triggerBtn1").on("click", function() {
sTextO.show();
});
$("#triggerBtn2").on("click", function() {
sTextO.hide();
});
body {
background-color: blue;
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
#out1 {
width: calc(100% - 150px);
text-align: center;
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre;
background-color: black;
padding: 25px;
border: 25px solid navy;
margin: 25px;
box-shadow: 0 8px 16px red;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 4px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 25px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
vertical-align: middle
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: 'ยป';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 28px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
<button id="triggerBtn1" class="button button1"><span>Show</span>
</button>
</div>
<div class="wrapper">
<button id="triggerBtn2" class="button button2"><span>Hide</span>
</button>
</div>
MORE INFO:
JS: Why is using onClick() in HTML a bad practice?
CSS: What's so bad about in-line CSS?
Add this into css
.button2 {
background: green;
}
And there is a typo here -
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>
Change the classname from "buttom2" to "button2"
The color should be set in the style attribute of the button tag.
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">
https://jsfiddle.net/Lhe768Ld/
Issue was with " " , basically style tag ended just after vertical-align, so it does not recognize the background-color. Include them inside " ".
Hope this would solve your issue:
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>
I have this HTML structure:
<button onclick="console.log('blih');">
<div style="padding:20px; border: 1px solid black" onclick="console.log('blah');">Test</div>
Test 2
</button>
This always only fires the button onclick when clicked, even inside the "Test" zone. How can I get it to fire the div's onclick ?
I have the problem on Firefox, this works fine on Chrome and Safari.
JSFiddle: https://jsfiddle.net/ovr0w9w4/
That won't work consistently, because it's not valid to have a <div> in a <button>.
You can fake a button though.
.btn {
border: 1px solid black;
border-radius: 2px;
display:inline-block;
padding: 0.2em;
background-color: #dddddd;
}
.btn:active {
background-color: #aaaaaa;
}
.btn > div {
padding:20px;
border: 1px solid black;
}
<div class="btn" onclick="console.log('blih');">
<div onclick="console.log('blah');">Test</div>
Test 2
</div>
Instead of invalid html you could simply use Bootstrap and add btn class to your first <div>.
<div id="div1" class="btn btn-default">
<div id="div2">
</div>
</div>
See example: https://jsfiddle.net/ddan/co5sm0d6/
When you hover over my button it gets grayed out. Also as you click it. I am using zeroclipboard v1.3.5
code: Javascript
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "zeroclipboard/ZeroClipboard.swf"
});
});
</script>
HTML
<p class="baddress">18b1bypQA52LdYBnth8sqt2zDvZVZStpZe <button class="btca" id="copy_button" data-clipboard-text="18b1bypQA52LdYBnth8sqt2zDvZVZStpZe" title="Click to copy me.">Copy</button></p>
CSS
.btca, .zeroclipboard-is-hover{
background-color: #61ff21;
border: 3px solid black;
border-color: #00ffff;
text-decoration: none;
color:gray;
font-weight: bold;
}
.btca:active, .zeroclipboard-is-active{
border-color: #61ff21;
background-color: #00ffff;
}