I have a website with a slideshow on the first page and when I open it on a pc it works as it should but when I open it on mobile the slideshow causes the size of the body to change. This is the code I have. I've already tried quite a few things but so far nothing has really worked.
let slideIndex = 0;
showSlides();
setInterval(showSlides, 11900)
function showSlides() {
let i;
let sfeerbeelden = document.getElementsByClassName("sfeerbeeld");
for (i = 0; i < sfeerbeelden.length; i++) {
sfeerbeeld = sfeerbeelden[i];
sfeerbeeld.style.display = "none";
}
slideIndex++;
if (slideIndex > sfeerbeelden.length) {
slideIndex = 1
}
sfeerbeeld = sfeerbeelden[slideIndex - 1];
sfeerbeeld.style.animation = "fadeIn 5s";
sfeerbeeld.style.display = "inherit";
setTimeout(() => {
sfeerbeeld.style.animation = "fadeOut 5s"
}, 7000);
}
body {
background-image: url("Banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sfeerbeeldencontainer {
display: flex;
justify-content: center;
height: 70vh;
width: 100%;
}
.sfeerbeelden {
display: flex;
flex-grow: 1;
height: 100%;
justify-content: center;
width: auto;
}
.sfeerbeeld {
display: none;
justify-content: center;
height: 100%;
}
.sfeerbeeld_img {
max-height: 100%;
}
<div class="index">
<div class="sfeerbeeldencontainer">
<div class="sfeerbeelden">
<div class="sfeerbeeld">
<img src="Sfeerbeeld_1.jpg" class="sfeerbeeld_img">
</div>
<div class="sfeerbeeld">
<img src="Sfeerbeeld_2.jpg" class="sfeerbeeld_img">
</div>
<div class="sfeerbeeld">
<img src="sfeerbeeld_3.jpg" class="sfeerbeeld_img">
</div>
</div>
</div>
</div>
Related
I created a simple carousel using HTML, CSS, and Javascript.
Clicking the left button shows the previous slide and the right one shows the next slide.
But my concern is that slide change is not working correctly
when clicking the next button: After the final slide, it won't go to the first slide again.
when clicking the previous button: After the first slide, it won't go again to last the slide again.
So please review my code and let me know my error.
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray=[first,scond,third,fouth];
let index= 0;
let activeSlide= slidesArray[index].classList.add('active');
left.addEventListener('click',()=>{
if (++index > 0) {
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click',()=>{
if (index > 0) {
slidesArray[index].classList.add('deactive');
slidesArray[--index].classList.add('active');
}
});
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
A chained ternary expression can be used to determine the new index number in a single line:
to = to >= size ? 0 : to < 0 ? size - 1 : to;
Details are commented in example
// Reference the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
/*
Collect all div.slide into an array
Define the array's size
Define a number value outside of the function
*/
let slides = [...document.querySelectorAll('.slide')];
let size = slides.length;
let index = 0;
// Bind click event to button.prev
prev.onclick = event => move(index - 1);
// Bind click event to button.next
next.onclick = event => move(index + 1);
/*
Pass newest index number
Ternary expression:
If the given number is greater than or equal to size of the array...
...return 0...
...If the given number is less than 0...
...return last index of array...
...otherwise return the given number
Toggle the current .slide.active and new .slide
Assign index as the given number
*/
function move(to) {
to = to >= size ? 0 : to < 0 ? size - 1 : to;
slides[index].classList.toggle("active");
slides[to].classList.toggle("active");
index = to;
}
html {
font: 300 3vmin/1 Consolas;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: max-content;
min-height: 100vh;
}
.slides {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 420px;
height: 400px;
overflow: hidden;
}
.slide {
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 350px;
border-radius: 20px;
font-size: 50px;
font-weight: 600;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
transform: translate(-50%, -50%);
}
.active {
visibility: visible;
}
.slide:first-of-type {
background-color: #F7EC09;
}
.slide:nth-of-type(2) {
background-color: #3EC70B;
}
.slide:nth-of-type(3) {
background-color: #3B44F6;
}
.slide:nth-of-type(4) {
background-color: #A149FA;
}
.ctrl {
display: flex;
justify-content: space-between;
position: absolute;
top: 45%;
left: 45%;
width: 150%;
transform: translate(-50%, -50%);
}
.next,
.prev {
border: none;
font-size: 100px;
font-weight: 700;
background: none;
cursor: pointer;
}
<main>
<section class="slides">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</section>
<menu class="ctrl">
<button class="prev"><</button>
<button class="next">></button>
</menu>
</main>
You need to reset the index of the slide when you click next and reach to maximum slide you need to reset index to 0 to return to first slide, also when you click prev and you in the first slide, you need to reset index to 3 to return the last slide.
let right = document.querySelector(".nxt");
let left = document.querySelector(".pre");
let slids = document.querySelector(".slids");
let first = document.querySelector(".first");
let scond = document.querySelector(".scond");
let third = document.querySelector(".third");
let fouth = document.querySelector(".fouth");
const elementsArr = [first, scond, third, fouth];
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add("active");
left.addEventListener("click", () => {
if (index === 3) {
index = -1;
}
index++;
resetActiveElements()
});
right.addEventListener("click", () => {
if (index === 0) index = 4;
index--;
resetActiveElements()
});
const resetActiveElements = () => {
elementsArr.forEach((element, i) => {
if (index === i) {
element.classList.add("active");
} else {
element.classList.remove("active");
}
});
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
/* <div class="btn">
<button class="pre"><</button>
<button class="nxt">></button>
</div> */
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add('active');
left.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 0) {
index = 3;
slidesArray[index].classList.add('active');
} else {
index--;
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 3) {
index = 0;
slidesArray[index].classList.add('active');
} else {
index++;
slidesArray[index].classList.add('active');
}
});
I'm working on my website and I'd like to create a slideshow. Hence, I have created the modal to expand the image after click - it works fine. However, I want to adjust the modal shape to the image size(thus the vertical photos look ugly in standard shape), but after many hours I gave up because I didn't find any satisfactory result.
HTML:
<div id="myModal" class="modal-wraper">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal">
<div class="mySlides">
<div class="slide_1"></div>
</div>
<div class="mySlides">
<div class="slide_2"></div>
</div>
<div class="mySlides">
<div class="slide_3"></div>
</div>
</div>
CSS:
.modal-wraper {
position: fixed;
display: none;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000;
z-index: 1;
}
.modal {
position: absolute;
display: flex;
flex-direction: column;
height: 85vh;
width: 85vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid 5px red;
}
.mySlides {
display: flex;
background-color: blue;
flex-basis: 100%;
}
.slide_1 {
width: 100%;
height: 100%;
background-image: url('../images/JF_3.jpg');
background-size:contain;
background-repeat: no-repeat;
object-fit: cover;
}
.slide_2 {
width: 100%;
height: 100%;
background-image: url('../images/JF_5.jpg');
background-size:cover;
}
JS
function openModal(n) {
document.getElementById("myModal").style.display = "block";
showSlides(n);
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 0;
function changeSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var modal = document.getElementsByClassName('modal');
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n < 0) {
slideIndex = slides.length-1;
} else if (n >= slides.length) {
slideIndex = 0
} else {
slideIndex = n;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex].style.display = "block";
dots[slideIndex].className += " active";
captionText.innerHTML = dots[slideIndex].alt;
}
This question already has answers here:
Flex elements ignore percent padding in Firefox
(4 answers)
Closed 4 years ago.
In my example code, please click on the Generate Content button in order to understand the issue.
Once you click on the button, you can see all of the flex items(.each-result) generate. They are almost completely wrapped by the div/flexbox (.result-container), indicated by the blue dotted border. If I remove the margins from flex-items, it fits perfectly into the div. However, when I add the margins, the parent div (ie. the flexbox) doesn't expand to it's full width; it remains the same width as when there was no margin.
Is there anyway to change this so that the div expands when adding margin?
const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
for (let i = 0; i < 10; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("each-result");
newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
rootDiv.appendChild(newDiv);
}
rootDiv.firstElementChild.classList.add('nav-margin');
navMargin = document.querySelector('.nav-margin');
});
//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
// leftArrow.addEventListener('click', () => {
// });
// rightArrow.addEventListener('click', () => {
// if ()
// });
// }
//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
const newImg = document.createElement("img");
newImg.setAttribute("src", url);
return newImg;
}
html, body {
height: 100%;
}
button {
position: relative;
z-index: 1
width: auto;
height: 50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
top: 15%;
z-index: 0
}
.each-result {
height: 150px;
width: 150px;
border: 3px dotted red;
margin: 0 1%;
}
img {
height: 100%;
width: auto;
}
.nav-arrows {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
position: absolute;
background: clear;
pointer-events: none;
}
#left-arrow, #right-arrow {
pointer-events: auto;
}
#root-container {
display: flex;
align-items: center;
border: 1px solid black;
height: 200px;
position: relative;
flex-flow: row no-wrap;
/* overflow: hidden; */
width: 100%;
}
.result-container {
display: flex;
border: 2px blue dotted;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
<div class="nav-arrows">
<button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
</button>
<button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
</button>
</div>
<div id="root-container">
<div id="root" class="result-container">
</div>
</div>
</div>
<button id="button-generate">Generate Content</button>
If the margin can be a fixed value (instead of a percent), we can calc() the width of the element to account for the margin. For example, if we wanted a margin of 20px we'd do the following on the .each-result elements:
.each-result {
width: calc(10% + 20px);
margin: 0 20px;
}
Here's the working demo:
const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
for (let i = 0; i < 10; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("each-result");
newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
rootDiv.appendChild(newDiv);
}
rootDiv.firstElementChild.classList.add('nav-margin');
navMargin = document.querySelector('.nav-margin');
});
//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
// leftArrow.addEventListener('click', () => {
// });
// rightArrow.addEventListener('click', () => {
// if ()
// });
// }
//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
const newImg = document.createElement("img");
newImg.setAttribute("src", url);
return newImg;
}
html, body {
height: 100%;
}
button {
position: relative;
z-index: 1
width: auto;
height: 50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
top: 15%;
z-index: 0
}
.each-result {
height: 150px;
width: calc(10% + 20px);
margin: 0 20px;
border: 3px dotted red;
}
img {
height: 100%;
width: auto;
}
.nav-arrows {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
position: absolute;
background: clear;
pointer-events: none;
}
#left-arrow, #right-arrow {
pointer-events: auto;
}
#root-container {
display: flex;
align-items: center;
border: 1px solid black;
height: 200px;
position: relative;
flex-flow: row no-wrap;
/* overflow: hidden; */
width: 100%;
}
.result-container {
display: flex;
border: 2px blue dotted;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
<div class="nav-arrows">
<button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
</button>
<button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
</button>
</div>
<div id="root-container">
<div id="root" class="result-container">
</div>
</div>
</div>
<button id="button-generate">Generate Content</button>
If I have more than one image in a div wrapper. I want to add overlay on image when user hover over the image. I am trying to do using code shown below.
for(var i=0; i<document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){
let elementExists = document.getElementById('wrapper');
let Center = document.createElement('div');
let Text = document.createElement('div');
if (!elementExists) {
let Wrapper = document.createElement('div');
let parentElement = event.currentTarget.parentElement;
Wrapper.classList.add('Wrapper');
Wrapper.id = 'wrapper';
Center.classList.add('Center');
Text.innerHTML = "Sample text";
parentElement.appendChild(Wrapper);
Wrapper.appendChild(Center);
Center.appendChild(Text);
Wrapper.addEventListener('mouseout', function(event){
if (document.getElementById('wrapper')) {
document.getElementById('wrapper').remove();
}
});
}
});
}
.col-md-6 {
width: 375px;
height: 211px;
margin: 20px;
position: relative;
}
.Wrapper {
display: table;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
height: 100% !important;
width: 100%;
text-align: center;
z-index: 1000;
font-family: arial;
color: #fff;
top: 0;
}
.Center {
display: table-cell;
vertical-align: middle;
}
<div class="col-md-6">
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
</div>
Every time I hover on first image, code just works fine. But when I hover on 2nd image it adds overlay on 1st image only.(It should add overlay on second image) I tried to debug the code and let parentElement = event.currentTarget.parentElement; is showing the a href only.
NOTE: I came to know its because I am giving position: absolute to Wrapper. I only want to make changes in JavaScript file and at max to css.
Please let me know if you found error in the code.
It's simply a css problem. Just add this to what you currently have:
a {
position: relative;
display: inline-block;
}
.Wrapper {
display: inline-block;
left: 0;
}
.Center {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100%;
}
Also I removed the final Text div and added its text to the Center div, as it triggered the mouseout event and made it flicker.
for(var i=0; i<document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){
let elementExists = document.getElementById('wrapper');
let Center = document.createElement('div');
if (!elementExists) {
let Wrapper = document.createElement('div');
let parentElement = event.currentTarget.parentElement;
Wrapper.classList.add('Wrapper');
Wrapper.id = 'wrapper';
Center.classList.add('Center');
Center.innerHTML = "Sample text";
parentElement.appendChild(Wrapper);
Wrapper.appendChild(Center);
Wrapper.addEventListener('mouseout', function(event){
if (document.getElementById('wrapper')) {
document.getElementById('wrapper').remove();
}
});
}
});
}
.col-md-6 {
width: 375px;
height: 211px;
margin: 20px;
position: relative;
}
a {
position: relative;
display: inline-block;
}
.Wrapper {
display: inline-block;
left: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
height: 100% !important;
width: 100%;
text-align: center;
z-index: 1000;
font-family: arial;
color: #fff;
top: 0;
}
.Center {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100%;
}
<div class="col-md-6">
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
</div>
I've been struggling for a few days on this problem and haven't found an adequate solution. Hoping someone can help. What I'm trying to achieve is to allow the user to click "change location", input a location and have that input dictate the background image set for "weather". The problem is that the code works the first time the button is clicked, but not the second. Why could this be?
Here's the CodePen.
I have the following Javascript code:
// Dynamic buttons
var inputs = document.getElementsByTagName('input');
for (var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
input.onmouseover = function() {
this.setAttribute('data-orig-image', this.getAttribute('src'));
this.src = this.getAttribute('data-alt-image');
};
input.onmouseout = function() {
this.src = this.getAttribute('data-orig-image');
};
};
//Get location
var getLocation = $.ajax({
type: 'GET',
url: "http://ipinfo.io/json",
});
//Once location is received, wrap get weather with returned data/function
getLocation.done(function(data) {
//Set user's current location
var location = data.city;
//Set user location on page
$(".location").html(location);
//Get weather for user's current location
var getWeather = $.ajax({
type: 'GET',
url: "http://api.openweathermap.org/data/2.5/weather?q='" + location + "&APPID=4b3ff62e3ed31d05cb44a014d891b7e6",
});
//Once received do stuff with data!
getWeather.done(function(data) {
var temp = data.main.temp;
var kelvinDegrees = temp;
var imperialDegrees = ((kelvinDegrees * (9 / 5)) - 459.67);
var truncatedImperial = Math.floor(imperialDegrees * 100) / 100;
var metricDegrees = kelvinDegrees - 273.15;
var truncatedMetric = Math.floor(metricDegrees * 100) / 100;
$(".degrees").html(truncatedImperial);
var shown = 1;
$(".changeUnits").click(function() {
if (shown == 1) {
$("#fahrenheit").css("display", "none");
$("#celsius").css("display", "inline-block");
$(".degrees").html(truncatedMetric);
shown = 2;
} else {
$("#celsius").css("display", "none");
$("#fahrenheit").css("display", "inline-block");
$(".degrees").html(truncatedImperial);
shown = 1;
}
});
if (kelvinDegrees > 291.48) {
$('.weather').addClass('weather-hot');
} else if (kelvinDegrees < 291.48 && kelvinDegrees > 269.26) {
$('.weather').addClass('weather-temperate');
} else {
$('.weather').addClass('weather-cold');
}
});
});
// Get user defined location on click/prompt here
$(".changeLocation").on("click", function() {
//Define new location via prompt
var newLocation = prompt("Enter your destination, please:");
//Set new location on the page
$(".location").html(newLocation);
//Get new weather data based on new location
var getWeather = $.ajax({
type: 'GET',
url: "http://api.openweathermap.org/data/2.5/weather?q='" + newLocation + "&APPID=4b3ff62e3ed31d05cb44a014d891b7e6",
});
// Once received - repeat previous process to set new background image, etc
getWeather.done(function(data) {
temp = data.main.temp;
var kelvinDegrees = temp;
var imperialDegrees = ((kelvinDegrees * (9 / 5)) - 459.67);
var truncatedImperial = Math.floor(imperialDegrees * 100) / 100;
var metricDegrees = kelvinDegrees - 273.15;
var truncatedMetric = Math.floor(metricDegrees * 100) / 100;
$(".degrees").html(truncatedImperial);
var shown = 1;
$(".changeUnits").click(function() {
if (shown == 1) {
$("#fahrenheit").css("display", "none");
$("#celsius").css("display", "inline-block");
$(".degrees").html(truncatedMetric);
shown = 2;
} else {
$("#celsius").css("display", "none");
$("#fahrenheit").css("display", "inline-block");
$(".degrees").html(truncatedImperial);
shown = 1;
}
});
if (kelvinDegrees > 291.48) {
$('.weather').addClass('weather-hot');
} else if (kelvinDegrees < 291.48 && kelvinDegrees > 269.26) {
$('.weather').addClass('weather-temperate');
} else {
$('.weather').addClass('weather-cold');
}
});
});
Here's the HTML:
<html>
<body>
<div class="weather">
<div class="ship">
<div class="container">
<div class="eighty"></div>
<div class="twenty">
<div class="thirty-2">
<div class="status">
Loc: <span class="location"></span><br><br> Temp: <span class="degrees"></span>° <span id='fahrenheit'>F</span>
<span id='celsius' style='display:none;'>C</span><br><br> Cond:
</div>
<div class="thirty-2-2"></div>
<div class="controls">
<input type="image" id="buttons" class="changeLocation" src="http://i1079.photobucket.com/albums/w513/spudees/img_0531_31979702762_o_zps3nxo0l9w.png" data-alt-image="http://i1079.photobucket.com/albums/w513/spudees/img_0532_32128262395_o_zpsgqmta3cy.png"
/><br><br>
<input type="image" id="buttons" class="changeUnits" src="http://i1079.photobucket.com/albums/w513/spudees/img_0534_31979680392_o_zps5t3o2w7w.png" data-alt-image="http://i1079.photobucket.com/albums/w513/spudees/img_0533_32128259015_o_zpsijybngnw.png"
/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and CSS:
html,
body {
min-height: 100%;
background-image: url("https://i.ytimg.com/vi/JquobII5VjA/maxresdefault.jpg");
margin: 0;
padding: 0;
}
.weather-cold {
min-height: 100vh;
max-width: 100vw;
margin: auto;
padding: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://blenderartists.org/forum/attachment.php?attachmentid=416901&d=1451562942");
}
.weather-temperate {
min-height: 100vh;
max-width: 100vw;
margin: auto;
padding: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top;
background-image: url("http://vignette3.wikia.nocookie.net/starwars/images/9/9c/Endor_matte.jpg/revision/latest?cb=20070811234822");
}
.weather-hot {
min-height: 100vh;
max-width: 100vw;
margin: auto;
padding: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://content.pulse.ea.com/content/starwars-ea-com/en_US/starwars/battlefront/news-articles/the-star-wars-battlefront-planets--creating-tatooine/_jcr_content/featuredImage/renditions/rendition1.img.jpg");
}
.ship {
height: 100vh;
position: relative;
background: url("http://i.imgur.com/LIWZWHP.png")no-repeat;
background-size: 100% 100%;
background-position: center;
}
.changeLocation {
margin-top: 15px;
}
.container {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.eighty {
min-height: 82vh;
background-color: blue;
margin: 0;
padding: 0;
visibility: hidden;
}
.twenty {
min-height: 18vh;
min-width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.thirty-2 {
min-width: 30vw;
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.thirty-2-2 {
width: 6%;
display: inline-block;
margin: 0;
padding: 0;
}
.status {
height: 60%;
width: 30%;
display: inline-block;
background-color: #0f1817;
z-index: 200;
color: #5cc35c;
font-family: helvetica;
font-size: 2.3vmin;
text-align: left;
}
.controls {
height: 80%;
width: 30%;
display: inline-block;
margin: 0;
padding: 0;
background-color: #0f1817;
z-index: 200;
color: #5cc35c;
font-family: helvetica;
font-size: 2.5vmin;
}
#buttons {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
If I understand what you're after, playing around with your sample it's because you only ever add class, never remove it, so on your second click, you still have the first weather-xyz.
You need to remove the existing class you added or otherwise clear the first class you added, eg.
$('.weather').removeClass('weather-hot');