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');
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');
}
});
So basically this is Day 3 (other days, I pretty much did nothing to complete the game) of making a game from HTML5. So I'm making a moves system right now, and I guess I'm doing well? (mainly because I'm not sure if I provided the user with too many moves...) But the thing about it is that, I'm kind of having ANOTHER styling issue.
As you can see in the image: I've CLEARLY set dimensions up for the headerDisplay class/id, but NO, it goes out of the div's dimensions and even goes on the grid. I'm also aiming for the time and moves text to be stuck right on top of the grid, similarly to how the word bank is stuck to the bottom of the grid.
I was also aiming for a button that says refresh right under the word bank, however no matter what I tried, the button would just be right the score text, which looks like this:
When I am aiming for this:
Code:
<div class="content" id="content">
<div class="headerDisplay" id="headerDisplay">
</div>
<div class="gameArea" id="gameArea">
</div>
<div class="wordBank" id="wordBank">
</div>
<div class="bottomMenu" id="bottomMenu">
</div>
</div>
::before,
::after {
box-sizing: border-box;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.content {
display: grid;
grid-template-rows: repeat(3, max-content);
margin-block: 1em;
margin-inline: auto;
width: 512px;
}
.bottomMenu {
font-size: 24px;
text-align: right;
}
.wordBank {
border: 2.5px solid #000;
border-radius: 5px;
display: flex;
font-size: 1.6em;
min-height: 3em;
justify-content: space-between;
padding: 0.25em;
}
.wordBank span:nth-child(even) {
align-self: end;
}
.gameArea {
font-size: 0;
justify-self: center;
max-width: 100%;
}
.cell {
border: 1px solid black;
width: 50px;
font-size: 1rem;
height: 50px;
display: inline-block;
}
.headerDisplay {
width: 100%;
height: 76.8px;
text-align: right;
font-size: 1.6em;
}
let score = 0;
const headerDisplay = document.getElementById("headerDisplay")
const bottomMenu = document.getElementById("bottomMenu");
const wordBank = document.getElementById("wordBank")
const gameArea = document.getElementById("gameArea")
const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");
const words = [ // snippet
"ability",
"able",
"about",
"above",
"abroad",
"absence",
"absent",
"absolute",
"accept",
"accident",
"accord",
"account",
"accuse",
"accustom",
"ache",
"across",
"act"
]
let selectedWords = [];
bottomMenu.innerHTML = "<p>Score: " + score;
bottomMenu.innerHTML += "<button>Refresh"
while (selectedWords.length < 5) {
const selectedWord = words[Math.floor(Math.random() * words.length)];
if (selectedWord.length <= 9) {
wordBank.innerHTML += "<span>" + selectedWord + "</span>"
selectedWords.push(selectedWord);
}
}
let longestWord = selectedWords.reduce((a, b) => a.length < b.length ? b : a, "")
let charCount = longestWord.length
var moves = charCount * 5
headerDisplay.innerHTML += "<p>Time: "
headerDisplay.innerHTML += "<p>Moves: " + moves
function makeRows(rowNum) {
for (let r = 0; r < rowNum; r++) {
let row = document.createElement("div");
gameArea.appendChild(row).className = "gridRow";
}
}
function makeColumns(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement("div");
rows[j].appendChild(newCell).className = "cell";
}
}
}
function defaultGrid() {
makeRows(charCount);
makeColumns(charCount);
}
defaultGrid();
To fix header you need to set its height to fit content, so it will be over your grid even if you change it later:
.headerDisplay {
width: 100%;
height: content-fit; /* previous: 76.8px */
text-align: right;
font-size: 1.6em;
}
And to fix bottom menu you need to add flexbox:
.bottomMenu {
font-size: 24px;
text-align: right;
display: flex; /* new */
flex-direction: row-reverse; /* new */
justify-content: space-between; /* new */
align-items: center; /* new */
}
For the button, you could try this:
button {
position: relative;
right: 400px;
bottom: 50px;
transform: scale(2,2)
}
How to make carousel (slider) stop when the mouse pointer has hovered over on the image in GSAP?
I made a huge try in many ways on the internet but nothing suit for my code.
// wrapping the code with onload to execute JS immediately
window.onload = function() {
//variables for slide animation time
var slideDelay = 1.2; //the slides flow in every 1.5 seconds
var slideDuration = 0.2;
var slides = document.querySelectorAll(".slide");
var prevButton = document.querySelector("#prevButton");
var nextButton = document.querySelector("#nextButton");
var numSlides = slides.length;
//infinite slide rotation
for (var i = 0; i < numSlides; i++) {
TweenLite.set(slides[i], {
xPercent: i * 100
});
}
// auto animation (the timer can be added to auto animate after a certain idle-time)
var wrap = wrapPartial(-100, (numSlides - 1) * 100);
var timer = TweenLite.delayedCall(3, autoPlay);
var animation = TweenMax.to(slides, 1, {
xPercent: "+=" + (numSlides * 100),
ease: Linear.easeNone,
paused: true,
repeat: -1,
modifiers: {
xPercent: wrap
}
});
var proxy = document.createElement("div");
TweenLite.set(proxy, { x: "+=0" });
var transform = proxy._gsTransform;
var slideAnimation = TweenLite.to({}, 0.1, {});
var slideWidth = 0;
var wrapWidth = 0;
resize();
window.addEventListener("resize", resize);
// navigation with buttons
prevButton.addEventListener("click", function() {
animateSlides(1);
});
nextButton.addEventListener("click", function() {
animateSlides(-1);
});
function animateSlides(direction) {
timer.restart(true);
slideAnimation.kill();
var x = snapX(transform.x + direction * slideWidth);
slideAnimation = TweenLite.to(proxy, slideDuration, {
x: x,
onUpdate: updateProgress
});
}
// auto-play function for auto animation
function autoPlay() {
animateSlides(-1);
}
function updateProgress() {
animation.progress(transform.x / wrapWidth);
}
function snapX(x) {
return Math.round(x / slideWidth) * slideWidth;
}
//calculating the necessary width for slide animation
function resize() {
var norm = (transform.x / wrapWidth) || 0;
slideWidth = slides[0].offsetWidth;
wrapWidth = slideWidth * numSlides;
TweenLite.set(proxy, {
x: norm * wrapWidth
});
animateSlides(0);
slideAnimation.progress(1);
}
//returns the difference between the passed function's max and min value
function wrapPartial(min, max) {
var diff = max - min;
return function(value) {
var v = value - min;
return ((diff + v % diff) % diff) + min;
}
}
}
* {
box-sizing: border-box;
}
/* the main wrapper box */
main {
display: flex;
position: relative;
flex-direction: column;
width: 300px;
height: 250px;
overflow: hidden;
border: 3px solid #000000;
}
/* the header and navigations */
.controls {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
min-height: 60px;
border-bottom: 2px solid #000000;
}
.controls button {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
outline: none;
background-repeat: no-repeat;
background-size: 70%;
cursor: pointer;
background-color: #000;
background-position: center center;
}
.slides-container {
border-top: 2px solid ;
position: relative;
overflow: hidden;
display: flex;
flex: 1;
}
.slide {
position: absolute;
font-size: 90px;
font-weight: 700;
color: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.slides-inner {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Varshath Gupta Solution</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ModifiersPlugin.min.js"></script>
<script type="text/javascript" src="./script.js">
</script>
</head>
<body>
<!-- Main wrapper div for the header and slider components. -->
<div class="wrapper">
<main>
<!-- the header that includes the navigation buttons and the logo -->
<div class="controls">
<button id="prevButton" style="background-image: url(https://drive.google.com/uc?export=view&id=1o6S3UjO-DQFLXAGShYeN4bQXoI0yuxP0);"></button>
<div class="logo"><img width="80" src="https://logos.textgiraffe.com/logos/logo-name/Cartoon-designstyle-cartoon-m.png"/></div>
<button id="nextButton" style="background-image: url( https://drive.google.com/uc?export=view&id=1aptD-5krbPTtFRjZk_b2O8Ikx2x0F2TC);"></button>
</div>
<!-- the slider -->
<div class="slides-container">
<div class="slides-inner">
</div>
</div>
</div>
<div class="slide" style="background-image: url( https://drive.google.com/uc?export=view&id=1ngTIZMgHFHTSQO9vinuB666ruA3l-Vgq)"></div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
i'm building a website portfolio with an interactive display at the top with some click events and hover. However i changed the 'body' class so i could fit it in with my website and then the javascript stopped working and i can't for the life of me figure it out?!
(sorry if i didnt show enough snippets..) I'm using scss but i used a transpiler to convert it into css when i switched it over to VSC..
the normal javscript like time and date work fine - it just seems to be the elements connected on the page / in the now 'display' div which i cant connect to anymore..
It works fine when the classes are with body - code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: #CCBBFF;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
.mainDisp {
width: 1000px;
height: 550px;
border: 1px solid black;
// overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.lamp {
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
</head>
<body>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
....
but when i add a new class 'Display' and add the old body's classes the javascript just doesnt work anymore? Same Javascript for both..
code :
function openURL(url) {
window.open(url);
}
var book1 = document.querySelector('.book');
var super1 = document.querySelector('.super1');
var book2 = document.querySelector('.book.two');
var super2 = document.querySelector('.super2');
var book3 = document.querySelector('.book.three');
var super3 = document.querySelector('.super3');
var calculator = document.querySelector('.calculator');
var calc = document.querySelector('.calc');
var phone = document.querySelector('.phone');
var tipCalc = document.querySelector('.tipCalc');
var lightSwitch = document.querySelector('.switch');
var lamp = document.querySelector('.innerLight');
lightSwitch.addEventListener('click', function() {
lamp.classList.toggle('hidden');
})
book1.addEventListener('mouseover', function() {
super1.classList.remove('hidden')
});
book1.addEventListener('mouseout', function() {
super1.classList.add('hidden')
});
book2.addEventListener('mouseover', function() {
super2.classList.remove('hidden')
});
book2.addEventListener('mouseout', function() {
super2.classList.add('hidden')
});
book3.addEventListener('mouseover', function() {
super3.classList.remove('hidden')
});
book3.addEventListener('mouseout', function() {
super3.classList.add('hidden')
});
calculator.addEventListener('mouseover', function() {
calc.classList.remove('hidden')
});
calculator.addEventListener('mouseout', function() {
calc.classList.add('hidden')
});
phone.addEventListener('mouseover', function() {
tipCalc.classList.remove('hidden')
});
phone.addEventListener('mouseout', function() {
tipCalc.classList.add('hidden')
});
// CALENDAR DATE
const dayDisp = document.querySelector('#day');
const monthDisp = document.querySelector('#month');
var months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
var now = new Date();
var date = now.getDate();
var month = months[now.getMonth()];
dayDisp.innerText = date;
monthDisp.innerText = month;
// MAIN CLOCK //
var hourHand = document.querySelector('.hour');
var minHand = document.querySelector('.min');
var secHand = document.querySelector('.sec');
function setDate() {
const now = new Date;
const secs = now.getSeconds();
const secondDegrees = ((secs / 60) * 360) + 90;
secHand.style.transform = `rotate(${secondDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minsDegrees}deg)`;
const hours = now.getHours();
const hourDegrees = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #fdf5e6;
}
html {
box-sizing: border-box;
}
-----------
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: -10;
* {
position: absolute;
box-sizing: inherit;
}
*:before, *:after {
position: absolute;
content: '';
box-sizing: inherit;
}
.mainDisp {
position: absolute;
width: 1000px;
height: 550px;
// border: 1px solid black;
z-index: -10;
box-sizing: inherit;
.lamp {
position: absolute;
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
.innerLight {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
background: rgba(253,245,230, 0.4);
left: 1%;
top: 55px;
}
</head>
<body>
<div class="container">
<header>
<div class="intro">
<h1 class="name">NAME</h1>
</div>
<nav>
<li>About</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</nav>
</header>
<div class='display'>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
<div class="super1 hidden"></div>
<div class="super2 hidden"></div>
<div class="super3 hidden"></div>
<!-- <div class="window" onclick="openURL('https://codepen.io/Eejay/full/VQBvOm/')" target="_blank"> -->
<div class='windows'>
<div class="outside">
<div class="moon"></div>
</div>
<div class="inner"></div>
<div class="inner two"></div>
</div>
<div class="ledge"></div>
<div class="mainClock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
Any help appreciated! I know its probably something really simple but i can't put my finger on it....
Your Problem is that you set your z-index of .display to -10. Its not clickable anymore.
Setting it to 0 will fix your issue:
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 0;
}
take a look at this forked codepen.
I am currently trying to create a Character Selection for Airconsole.
I thought I could create this using a Jquery method like a Gallery.
So I need a previous button, a next button and the character display.
It seems that I am making a mistake that I can't figure out, because I am not used to working with Javascript.
var speed = 100;
$(".prev").click(function() {
var now = $(this).parent().next("ul.char_display").children(":visible"),
last = $(this).parent().next("ul.char_display").children(":last"),
prev = now.prev();
prev = prev.index() == -1 ? last : prev;
now.fadeOut(speed, function() {
prev.fadeIn(speed);
});
});
$(".next").click(function() {
var now = $(this).parent().next("ul.char_display").children(':visible'),
first = $(this).parent().next("ul.char_display").children(':first'),
next = now.next();
next = next.index() == -1 ? first : next;
now.fadeOut(speed, function() {
next.fadeIn(speed);
});
});
$(".char_display li").click(function() {
var first = $(this).parent().children(':first'),
next = $(this).next();
next = next.index() == -1 ? first : next;
$(this).fadeOut(speed, function() {
next.fadeIn(speed);
});
});
.prev {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.next {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.char_display li {
display: none;
list-style: none;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char_display li:first-child {
display: block;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char_display {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#char1 {
background: blue;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#char2 {
background: red;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characterScreen_characterBlock">
<div id="characterScreen_leftArrow" class="characterScreen_left" ontouchend="otherChar(true);" ontouchend="otherChar(true);">
<div class="prev"></div>
</div>
<div id="characterScreen_characterDisplay" class="characterScreen_center">
<ul class="char_display">
<li>
<div class="char" id="char1"></div>
</li>
<li>
<div class="char" id="char2"></div>
</li>
</ul>
</div>
<div id="characterScreen_rightArrow" class="characterScreen_right" ontouchend="otherChar(false);" ontouchend="otherChar(false);">
<div class="next"></div>
</div>
</div>
I haven't look through all of your code, but I am pretty sure
$(this).parent().next("ul.char_display").children("...")
doesn't do what you want it to. Especially since it always returns an error for pushing the next-button.
$.next() returns the next DOM-element. characterScreen_rightArrow however doesn't have a next element (in this snippet)
What you were searching for is probably $.siblings(). Personally I would however use the qualifier #characterScreen_characterDisplay ul instead of searching for it relatively.