I have a button which flips when the user click it.
The problem is that I don't want the text to flip with the button.
(I use js to apply a little bit of css when the user click the button)
function clickFunction() {
var change = document.getElementById("btn");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
change.style.border = "4px solid #fff";
change.style.background = "#00E676";
change.style.animation = "anim 1s";
}
}
button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
#keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}
<body>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
<script src="click.js"></script>
</body>
The simplest way might be, to put a div behind the button.
The button itself then only gets the text, and click changes the divs background.
So you would have something like:
<body>
<div class="btn">
<div id="bg-button" class="bg-button"></div>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
</div>
<script src="click.js"></script>
</body>
Css:
.btn{
position: relative;
height:80px;
overflow:hidden;
}
button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
background-color:rgba(0, 0, 0, 0);
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
border: none;
top:0;
color: #fff;
width: 100%;
height:100%;
}
.bg-button {
background: #01579B;
border-radius: 100px;
top:0;
width: 100%;
height: 100%;
}
#keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}
Js:
function clickFunction() {
var change = document.getElementById("btn");
var bg = document.getElementById("bg-button");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
bg.style.background = "#00E676";
bg.style.animation = "anim 1s";
}
}
What I did was add a div before the button just like #cagcoach said and then i added the onClick function on it and removed it from the button. After that I removed the text from the button and added it inside the div. Then made a variable on the js file for that div and made it so that the text inside the div would change on click and not the button's text and finally added the animation (called anim) on the div too.
TLDR; correct snippets
function clickFunction() {
var butn = document.getElementById("btn");
var divi = document.getElementById("div");
if (divi.innerText == "Send")
{
divi.innerText = "Sent!";
divi.style.animation = "anim 1.5s";
butn.style.border = "4px solid #fff";
butn.style.background = "#00E676";
butn.style.animation = "anim 1.5s";
}
}
#keyframes anim {
0%{transform: rotateX(0deg)}
50%{transform: rotateX(180deg)}
100%{transform: rotateX(0deg)}
}
body {background: #0091EA;}
button {
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
width: 160px;
height: 70px;
z-index: 0;
}
div#div {
position: absolute;
left: 30px;
right: 0;
top: 17px;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
z-index: 1;
}
<body>
<div onclick="clickFunction()" id="div">Send</div>
<button id="btn" type="button"></button>
<script src="click.js"></script>
</body>
Related
So I have a very simple code that gives no error when I run it but the problem is, it's not doing what it's supposed to do...
When I click on the div in the middle, it should change colors...
What am I missing? Can't seem to find any typo...
var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
var mySwitch = document.getElementById('color_panel').style.background;
if (mySwitch == "#76FF03") {
document.getElementById('color_panel').style.background = "#039BE5";
} else {
document.getElementById('color_panel').style.background = "#76FF03";
}
});
<body style="background: #37474F; margin: 0;">
<div id="color_panel" style="background: #76FF03; margin:
auto; font-family: Century Gothic; font-size: 40px; color: #37474F;
width: 200px; height: 200px; padding: 20px; margin-top: 50%;
transform: translateY(-50%); text-align: center;">
Click me!<br>or Double Click?</div>
<button style="font-size: 10px;
width: 100px; height: 20px; margin-left: 50%;
transform: translateX(-50%); border: solid 2px;
border-color: #FBC02D; border-radius: 5px;
background: #E3F2FD;" id="button" onclick="transition()">
add transition!</button>
You need to do some basic debugging. Add a console.log statement to examine the value you are putting into your if statement and see what it actually is.
The browser is normalising it, so mySwitch == "#76FF03" is never true.
var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
var mySwitch = document.getElementById('color_panel').style.background;
console.log(mySwitch);
if (mySwitch == "#76FF03") {
document.getElementById('color_panel').style.background = "#039BE5";
} else {
document.getElementById('color_panel').style.background = "#76FF03";
}
});
<body style="background: #37474F; margin: 0;">
<div id="color_panel" style="background: #76FF03; margin:
auto; font-family: Century Gothic; font-size: 40px; color: #37474F;
width: 200px; height: 200px; padding: 20px; margin-top: 50%;
transform: translateY(-50%); text-align: center;">
Click me!<br>or Double Click?</div>
<button style="font-size: 10px;
width: 100px; height: 20px; margin-left: 50%;
transform: translateX(-50%); border: solid 2px;
border-color: #FBC02D; border-radius: 5px;
background: #E3F2FD;" id="button" onclick="transition()">
add transition!</button>
This type of problem is generally better handled by putting all your styles in a separate stylesheet and then adjusting the classes that an element is a member of.
var panel = document.getElementById('color_panel');
panel.addEventListener("click", function() {
panel.classList.toggle("other");
});
body {
background: #37474F;
margin: 0;
}
#color_panel {
background: #76FF03;
margin: auto;
font-family: Century Gothic;
font-size: 40px;
color: #37474F;
width: 200px;
height: 200px;
padding: 20px;
margin-top: 50%;
transform: translateY(-50%);
text-align: center;
}
#color_panel.other {
background: #039BE5;
}
#button {
font-size: 10px;
width: 100px;
height: 20px;
margin-left: 50%;
transform: translateX(-50%);
border: solid 2px;
border-color: #FBC02D;
border-radius: 5px;
background: #E3F2FD;
}
<div id="color_panel">
Click me!<br>or Double Click?
</div>
<button style="" id="button" onclick="transition()">
add transition!
</button>
Your code seems to correct, you are getting rgb(118, 255, 3) in the variable mySwitch so its not going in the if the condition
Your code should be
<script type="text/javascript">
var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
var mySwitch = document.getElementById('color_panel').style.background;alert(mySwitch);
if (mySwitch == "rgb(118, 255, 3)") {
document.getElementById('color_panel').style.background = "#039BE5";
} else {
document.getElementById('color_panel').style.background = "#76FF03";
}
});
</script>
mySwitch will give the color in rgb, which you cannot compare with the stirng. remove the inline style and add instead use class. Then use toggle to toggle the class on every click
var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
panel.classList.toggle('changeColor')
});
.divStyle {
background: #76FF03;
margin: auto;
font-family: Century Gothic;
font-size: 40px;
color: #37474F;
width: 200px;
height: 200px;
padding: 20px;
margin-top: 50%;
transform: translateY(-50%);
text-align: center;
}
.changeColor {
background: #039BE5
}
<body style="background: #37474F; margin: 0;">
<div id="color_panel" class='divStyle'>
Click me!<br>or Double Click?</div>
<button style="font-size: 10px;
width: 100px; height: 20px; margin-left: 50%;
transform: translateX(-50%); border: solid 2px;
border-color: #FBC02D; border-radius: 5px;
background: #E3F2FD;" id="button" onclick="transition()">
add transition!</button>
</body>
The only issue with your code is you defined the color in HEX format in HTML #76FF03 and JavaScript returns the color in RGB format by which your if condition doesn't work and in your else condition you are again applying the same background color so you thought that your code doesn't work.
You just need to match the color with the RGB format in JavaScript. rgb(118, 255, 3) is the same color as #76FF03 but in different format.
You may try this:
var panel = document.getElementById('color_panel');
panel.addEventListener("click", function(e) {
var mySwitch = e.target.style.background;
if (mySwitch == "rgb(118, 255, 3)") {
e.target.style.background = "#039BE5";
} else {
e.target.style.background = "#76FF03";
}
});
<body style="background: #37474F; margin: 0;">
<div id="color_panel" style="background: #76FF03; margin:
auto; font-family: Century Gothic; font-size: 40px; color: #37474F;
width: 200px; height: 200px; padding: 20px; margin-top: 50%;
transform: translateY(-50%); text-align: center;">
Click me!<br>or Double Click?</div>
<button style="font-size: 10px;
width: 100px; height: 20px; margin-left: 50%;
transform: translateX(-50%); border: solid 2px;
border-color: #FBC02D; border-radius: 5px;
background: #E3F2FD;" id="button" onclick="transition()">
add transition!</button>
</body>
To avoid format issue you can define the color with color Name then HTML and JavaScript both return you the same result.
By the way, you just don't need to use document.getElementById('color_panel') again and again. As you are already assigning element in var so just use that variable for addEventListener and in the addEventListener function you may use the event variable e or event whatever name you like to use for that.
That's the optional thing if you like to do.
The correct answer to your question is...
Your code is working when you click in the box. You're code isn't incorrect and you don't have any typos.
The background color is changing when the box is clicked. It's just changing the background color to the same color that it already is:
In your html file, in the first div:
style="background: #76FF03;
in your script, in the else statement:
document.getElementById('color_panel').style.background = "#76FF03";
I got this code off of codepen and I am trying to edit it. I am trying to make it so that when you actually click the X in the corner of the popup, the box actually closes, and that after hitting the add button after putting in text, the box closes. Can anyone help me accomplish this? I am having trouble getting it to work. Any help is appreciated. Thanks!
https://codepen.io/pokyparachute66/pen/QzXYjL
var date = document.getElementsByClassName("day");
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add";
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span
class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
var btn = document.createElement("button");
btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
event.appendChild(btn);
btn.addEventListener("click", createEvent);
date[i].addEventListener("click", clickEvent);
event.getElementsByClassName("close")[0].addEventListener("click",
closeEvent);
}
function createEvent(){
var parent = this.parentElement;
var parentDay = parent.parentElement;
if(parent.getElementsByTagName("input")[0].value === "" ){
alert("type something");
}
else{
var createDiv = document.createElement("div");
createDiv.id = "eventDiv";
parent.appendChild(createDiv);
parentDay.classList.add("active");
var txt = parent.getElementsByTagName("input")[0].value;
createDiv.innerHTML = txt;
parent.getElementsByTagName("input")[0].value = "";
//parent.style.visibility = "visible";
}
}
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
}
function closeEvent(){
document.getElementById("add").classList.remove("active");
}
button:focus, input:focus{outline: none;}
.calendar{
margin: calc(50vh - 100px) auto 0 auto;
width: 260px;
height: 200px;
text-align: center;
transform: scale(2.5);
}
.day{
position: relative;
margin: 2px;
width: 33px;
height: 33px;
font-size: 12px;
line-height: 30px;
border-radius: 100%;
float: left;
cursor: pointer;
transition: all .4s ease 0s;
}
.day:hover{
color: #fff;
background: #3f64fd;
}
.day-week{
margin: 0px;
width: 37px;
height: 20px;
color: #515067;
font-size: 9px;
line-height: 20px;
text-transform: uppercase;
float: left;
}
.blank{
margin: 0px ;
width: 37px;
height: 37px;
float: left;
}
#add{
padding: 15px;
position: absolute;
left: -90px;
bottom: 50px;
width: 200px;
min-height: 50px;
background: linear-gradient(to top left, #3f64fd, #14c0ff);
transition: all .2s ease 0s;
visibility: hidden;
opacity: 0;
box-shadow: 0 0 25px rgba(0,0,0,.6);
}
#add.active,
#add:hover{
bottom: 30px;
visibility: visible;
opacity: 1;
transition: all .4s ease 0s;
z-index: 999;
}
#add .close{
position: absolute;
top: 0px;
right: 5px;
color: white;
}
#add input[type="text"]{
width: 140px;
padding: 3px 5px;
color: #fff;
background: none;
border: none;
border-bottom: 1px solid white;
}
#add button{
height: 50px;
width: 50px;
color: #fff;
line-height: 23px;
text-align: center;
background: #3f64fd;
border: none;
left: 70%;
top:53%;
position: absolute;
border-radius: 100%;
cursor: pointer;
}
#eventDiv{
padding: 5px;
line-height: 12px;
text-align: left;
}
.day.active{
color: black;
border: 2px solid #3f64fd;
}
<div class="calendar">
<div class="day-week">s</div>
<div class="day-week">m</div>
<div class="day-week">t</div>
<div class="day-week">w</div>
<div class="day-week">t</div>
<div class="day-week">f</div>
<div class="day-week">s</div>
<div class="blank"></div>
<div class="blank"></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
</div>
Instead of doing that really complicated thing why you should do something like:
<input type="date">
I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...
It's creating a div element with id="add" around 50 times?!
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add"; // should make this event.className = 'add';
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)
During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.
I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
if (!a.classList.contains('active')) {
var parentOfA = a.parentNode;
parentOfA.removeChild(a);
}
}
That way you're removing the element from the document entirely, rather than just changing the class on it.
I want to create a menu for one page site but I'm not very good at JavaScript and I have this code for open and close the menu but I want it to open like with a easy transition because but it just appear.
How can I add fade-in-out or something like that:
<script>
function w3_open() {
document.getElementById("mySidebar").style.visibility = "visible";
}
function w3_close() {
document.getElementById("mySidebar").style.visibility = "hidden";
}
</script>
w3-button{
position:fixed;
width: 42px;
height: 42px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height:1.1;
text-align:center;
top:6.5px;
left: 8px;
background-color: #f2bd66;
z-index:11;
background-position:center;
cursor: pointer;
color: white;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button{
width: 42px;
height: 42px;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button::before {
content:"☰";
font-size:32px;
color:white;
text-align: center;
}
.w3-button:hover{
opacity: 0.6;
}
.w3-sidebar {
position: absolute;
z-index:12;
width:188px;
left: -188px;
line-height:2;
position:fixed;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:#f2bd66;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
height: 100vh;
border-right:4px solid #af874b;
}
.w3-bar-item {
width: 188px;
margin:0 auto;
line-height:2;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:transparent;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
float: left;
}
#close-menu{
background-color: #5b5f5e;
color: white;
}
#close-menu:hover{
opacity: 0.7;
}
.nav a:hover {
background-color: #292446;opacity: 0.9;
color: white;
}
<div class="w3-sidebar " style="visibility:hidden" id="mySidebar" >
<button onclick="w3_close()" class="w3-bar-item w3-large" id="close-menu"> Close ×</button>
<nav class="nav">
Inicio
Sobre mí
Galería
Booktubers GT
Recursos E-stela
Redes Sociales
</nav>
</div>
<div class="w3-teal">
<button class="w3-button" onclick="w3_open()"></button>
</div>
If you don't know how to do that in js, you can make it in pure css :
Toggle class on HTML element without jQuery
If you still want to use js to achive that, you can toggle a class on your menu container when the button is clicked, and make transition with css based on the toggled class. If you use jquery you can do that with simple jquery fade or slide function :
<script>
$('#my-menu-button').click(function(){
$('#my-menu').slideToggle();
})
</script>
I wrote a demo for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test {
width: 100px;
height: 100px;
background: #000;
display: block;
transition: 1s;
opacity: 0
}
.active {
opacity: 1
}
</style>
</head>
<body>
<div class="test"></div>
<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
<script>
var test = document.querySelector('.test')
function show () {
test.className = 'test active'
}
function hide () {
test.className = 'test'
}
</script>
</body>
</html>
$(".warning").show("slow");
body {
background: #2d3339
}
.warning {
border: 5px solid #e1dfbe;
width: 200px;
margin: 100px auto 20px;
border-radius: 5px;
padding: 20px 10px;
text-align: center;
font-size: 32px;
display: none;
}
.warning span {
color: #f4f3ce;
font-family: sans-serif;
font-weight: bold;
}
.image {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
z-index: -1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="warning">
<span>Lorem ips</span>
</p>
how to write $(".className").show("slow") in vanilla js? My main concern is to show this element slowly.
like this in jquery
Do you want some kind of fade effect? You can try doing something with CSS transitions to change the opacity. Take a look at this JSFiddle. You can make it slower/faster by changing the amount of time the transition takes.
HTML:
<p id="my-para">Hello, my name is John</p>
<button id="btn">Show Element</button>
CSS:
p {
opacity: 0;
}
.fade-in {
opacity: 1;
transition: opacity .9s ease;
}
JS:
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
document.getElementById('my-para').classList.add('fade-in');
});
I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.