Develop Reference

How to switch pictures by pressing the button?

I am learning how to create websites. I want to build a simple theme switcher with HTML/CSS/JavaScript. I've done the theme switching part, but I want to change the picture in the button when I press it.
Here is my moon picture: (https://www.svgrepo.com/svg/6390/moon) and here is my sun picture: (https://www.svgrepo.com/svg/304624/sun-light-theme).
Here is my code:
const btn = document.querySelector('.btn_theme');
btn.addEventListener('click', function() {
document.body.classList.toggle('dark_theme');
});
body {
background-color: white;
color: black;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 16pt;
font-weight: normal;
}
body.dark_theme {
background-color: #2F3136;
color: white;
font-size: 16pt;
font-weight: normal;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.container {
width: 100px;
height: 55px;
background-color: #2F3136;
color: white;
text-align: center;
border-radius: 10px;
position: absolute;
display: flex;
align-items: center;
}
.btn_theme {
text-align: center;
width: 90px;
height: 45px;
background-color: white;
margin: 0;
padding: 0;
border: 0;
left: 5px;
border-radius: 8px;
position: relative;
transition: all .15s linear;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
align-items: center;
}
button:hover {
background-color: #2f3647;
transition: all 0.15s linear;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
}
<p>text</p>
<div class="container">
<button class="btn_theme" id="btn_theme"><img src="../imgs/солнце.svg" /></button>
</div>

There are a couple ways to accomplish this.
One way is to just get rid of the img tag and change the button's background image.
const btn = document.querySelector('.btn_theme');
btn.addEventListener('click', function() {
document.body.classList.toggle('dark_theme');
});
.btn_theme {
background: url('https://www.svgrepo.com/show/304624/sun-light-theme.svg');
text-align: center;
width: 40px;
height: 40px;
background-color: white;
margin: 0;
padding: 0;
border: 0;
left: 5px;
border-radius: 8px;
position: relative;
transition: all .15s linear;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
align-items: center;
}
button:hover {
background-color: #2f3647;
transition: all 0.15s linear;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
}
.dark_theme {
background: #ffaaff
}
.dark_theme .btn_theme {
background: url('https://www.svgrepo.com/show/6390/moon.svg');
}
<button class="btn_theme" id="btn_theme"></button>
Another solution is to use a data-attribute to store the current state and change the img tag's src value.
const btn = document.querySelector('.btn_theme');
const icon = btn.querySelector('img');
btn.addEventListener('click', function() {
document.body.classList.toggle('dark_theme');
if (icon.dataset.theme == "light") {
icon.dataset.theme = "dark";
icon.src = "https://www.svgrepo.com/show/6390/moon.svg";
} else {
icon.dataset.theme = "light";
icon.src = "https://www.svgrepo.com/show/304624/sun-light-theme.svg";
}
});
.btn_theme {
text-align: center;
width: 40px;
height: 40px;
background-color: white;
margin: 0;
padding: 0;
border: 0;
left: 5px;
border-radius: 8px;
position: relative;
transition: all .15s linear;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
align-items: center;
}
button:hover {
background-color: #2f3647;
transition: all 0.15s linear;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
}
.dark_theme {
background: #ffaaff
}
<button class="btn_theme" id="btn_theme"><img class="icon" data-theme="light" src="https://www.svgrepo.com/show/304624/sun-light-theme.svg"></button>

You need to update the src attribute of your image using setAttribute().
You could use modular arithmetic to switch between pictures. This would work for however many pictures you want to have. It is however not required for a two images as you could just use a boolean. Nevertheless here how you could do it using modulo operation.
// All the pictures we want to switch between
const pics = [
"https://dummyimage.com/50x50/000/fff",
"https://dummyimage.com/50x50/dddddd/000",
// "https://dummyimage.com/50x50/d420d4/000" // comment this out for a third pic
]
let curPicIdx = 0;
window.addEventListener("DOMContentLoaded", e => {
// when the page has loaded set the first picture
const button = document.getElementById("mybutton");
const img = document.getElementById("myimage");
img.setAttribute("src", pics[curPicIdx])
// whenever we click on the button change the picture to the next one
button.addEventListener("click", e => {
// calculate the index of the next picture using modular arithmetic
curPicIdx = (curPicIdx + 1) % pics.length;
console.log(`Setting pic ${curPicIdx}`);
// set the next picture using the calculated index
img.setAttribute("src", pics[curPicIdx]);
})
})
<button id="mybutton"><img id="myimage"/>
If you want to have three pictures, just add another URL within the array and it will switch between all three pictures.
In general there are a lot of ways to embed images into buttons. You might wanna have a look at this thread.

How can i animate a height transition after changing the height with javascript?

How can I animate a height change after changing the height with javascript?

Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>

Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}

How do transitions work when fading in and out using css classes and javascript

I am trying to find out how transitions work. I am trying to make a thumbs up appear using a fade in fade out transition for a recycling simulator program, however, I do not know how understand how transitions work.
Here is a snippet of my html
<div class="thumbs-up-bg">
<i class="fas fa-thumbs-up" id="thumbs-up"></i>
</div>
<div class="thumbs-down-bg">
<i class="fas fa-thumbs-down" id="thumbs-down"></i>
</div>
Here is the CSS
.thumbs-up-bg {
position: absolute;
visibility: hidden;
background-color: green;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-up-bg.visible {
opacity: 1;
}
#thumbs-up {
font-size: 50px;
color: white;
}
.thumbs-down-bg {
position: absolute;
visibility: hidden;
background-color: red;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-down {
font-size: 50px;
color: white;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
opacity: 0;
transition: visibility 5s, opacity 2s linear;
}
Are transitions supposed to be set on the selector that is going to be changed? Is there a simpler way to complete this task?
Here is the Javascript
if (drop === trashDropZone){
if(!isRecyclable(draggable)){
alert("Success, it is garbage");
thumbsUp.classList.toggle("visible");
setTimeout(() =>{
thumbsUp.classList.toggle("visible");
thumbsUp.classList.toggle("hidden");
}, 1000);
makeInvisible(draggable);
} else{
//show thumbs down
alert("Thumbs down");
thumbsDown.classList.toggle("visible");
setTimeout(() =>{
thumbsDown.classList.toggle("visible");
thumbsDown.classList.toggle("hidden");
}, 1000);

jQuery add/remove class or toggle class

Im just curious to know the best practice for either toggling a class or just adding and removing it during a mouseenter/mouseleave state using jquery. Both seem to work fine im just not to sure which is best to go with.
Thank you
$('#image1').mouseenter(function() {
$('#image1').toggleClass('transform');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
$('#image1').mouseleave(function() {
$('#image1').toggleClass('transform show-images-text');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Well a lot of this style question get shot down here on SO, because it seems it comes down to preference. But HERE is a way to do it all without javascript, only CSS, which some might consider more efficient.
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
#image1:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#image1:hover .images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.images-color-overlay:hover {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Your code is technically fine, however you can shorten it to just use the hover() method, as the function you provide will be called for both mouseenter and mouseleave events.
You can also use the this reference in the function to save DOM accesses, and also cache the jQuery object created from $(this) in a variable for re-use. Try this:
$('#image1').hover(function() {
var $image = $(this).toggleClass('transform');
$image.find('.images-color-overlay').toggleClass('transparent');
$image.find('.images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

The toggleClass is the bast practice in your case.
Internally it's also doing same thing if the class exist then remove it and if not then add it. See it yourself , goto this github link and search for toggleClass.
// Check each className given, space separated list
if (self.hasClass(className)) {
self.removeClass(className);
} else {
self.addClass(className);
}

css opacity ease in out affecting other elements too

My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}

I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/

+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>