I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";
wrapImages();
let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
imageBelow.src = images[index];
imageAbove.style.opacity = "0";
});
jw_btn_current.addEventListener('mouseleave', function() {
imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
imageAbove.style.opacity = "1";
});
});
function wrapImages() {
let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";
}
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.pics {
position: relative;
width: 100%;
height: 100vh;
}
.pics > img {
position: absolute;
transition: all .4s ease;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
</div>
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
EDIT
If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.
Related
My Files:
https://jsfiddle.net/claudiopb/f8y4mnc6/2/
I have 2 background images. When the scroll invades the Y coordinate at the top of div 4, I would like to change the body's fullscreen image to the other background image.
As you can see in these examples below:
I started to make a JavaScript to intercept if the scroll coordinate was equal to the top of the div, to do the CSS class change, but it is not working.
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js" defer></script>
<title>Background changing</title>
</head>
<body class="bg-1">
<div class="style-1 item-1">
<h1>Item-1</h1>
</div>
<div class="style-1 item-2">
<h1>Item-2</h1>
</div>
<div class="style-1 item-3">
<h1>Item-3</h1>
</div>
<div class="style-1 item-4">
<h1>Item-4</h1>
<p>Here I want the background image changing!!!</p>
</div>
<div class="style-1 item-5">
<h1>Item-5</h1>
</div>
</body>
</html>
CSS
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position:relative;
}
.bg-1 {
background:url('https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__480.jpg') no-repeat fixed center bottom;
background-size: cover;
}
.bg-2 {
background: url('https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb') no-repeat fixed center top;
background-size: cover;
}
.style-1 {
height:800px;
width:600px;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 30px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.style-1 h1 {
padding-bottom:40px;
}
.item-1 {
background-color:green
}
.item-2 {
background-color:blue
}
.item-3 {
background-color:grey
}
.item-4 {
background-color:orange
}
.item-5 {
background-color:red
}
JS
const el = document.querySelector(".item-4")
const result = getOffset(el)
let scroll = null;
function getOffset(el) {
const rect = el.getBoundingClientRect();
return rect.top
}
window.addEventListener("scroll", (event) => {
scroll = this.scrollY;
console.log(scroll)
if (scroll == result) {
console.log('true')
/**
* if this returns true, write the lines of code to switch the body's class.
*
*/
}
});
Im trying to get the #block to end the game and give the score once it hits the character. At the moment it just continues to go without ending the game. Its like it doesn't see the character so it just continues to run. Before I added the images they were just boxes and the game worked fine. After adding the images the game Dosent respond as before.
Also the score just goes up without the character having to successfully jump. How do I fix that?
var character = document.getElementById("character");
var block = document.getElementById("block");
var counter=0;
function jump(){
if(character.classList == "animate"){return}
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},300);
}
var checkDead = setInterval(function() {
let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
block.style.animation = "none";
alert("Game Over. score: "+Math.floor(counter/100));
counter=0;
block.style.animation = "block 1s infinite linear";
}else{
counter++;
document.getElementById("scoreSpan").innerHTML = Math.floor(counter/100);
}
}, 10);
*{
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.game{
width: 1000px;
height: 500px;
border: 1px solid black;
margin: auto;
margin-top: 5px;
position: relative;
}
.background-img-size {
width: 1000px;
height: 500px;
content: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
position: absolute;
}
#character{
display: inline-block;
position: relative;
margin-top: 39%;
}
.animate{
animation: jump 0.3s linear;
}
#keyframes jump{
0%{bottom: 300px;}
30%{bottom: 200px;}
70%{bottom: 150px;}
100%{bottom: px;}
}
#block{
display: inline-block;
position: relative;
margin-top: 39%;
left: 500px;
animation: block 3s infinite linear;
}
#keyframes block{
0%{left: 900px}
100%{left: -170px}
}
p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Jump Game</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="game" >
<img class="background-img-size">
<div id="character"> <img src="https://www.serebii.net/swordshield/pokemon/101.png" width="80" height="80"></div>
<div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/027.png" width="80" height="80"></div>
<!-- <div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/094.png"></div> -->
</div>
<p>Score: <span id="scoreSpan"></span></p>
<script src="index.js"></script>
</body>
</html>
I am trying to make the content of a div change when the page is scrolled to a certain point using jQuery. Currently, I am trying to accomplish this by adding a class when the page is scrolled past 800 and removing it and adding a different class when the page is above 800. Here is my current code on jsfiddle: https://jsfiddle.net/shgfrdm8/
Here is the jQuery code:
$(window).scroll(function() {
let windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('image-content').addClass('scrolledDown');
$('image-content').removeClass('scrolledUp');
} else {
$('image-content').addClass('scrolledUp');
$('image-content').removeClass('scrolledDown')
}
})
The CSS ids/classes:
.main {
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
.main-image {
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.filler {
height: 400vh;
}
.main-text {
left: -14px;
width: 99.3vw;
height: 4000px;
text-align: center;
background-color: red;
position: relative;
}
#image-content::before {
white-space: pre;
position: absolute;
bottom: 20px;
left: 20px;
font-family: Impact;
font-size: 55px;
font-weight: 550;
color: white;
z-index: 4;
opacity: 1;
position: fixed;
}
#image-content.scrolledDown::before {
opacity: 1;
content: 'ABC';
}
#image-content.scrolledUp::before {
opacity: 1;
content: "DEF";
}
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="image-container">
<div class="zoom main">
<img src="images/sourcecode.jpg" class="main-image">
</div>
<div id="content-anchor"></div>
<div id="image-content"></div>
</div>
<div class="filler">
</div>
<div class="main-text">
</div>
I am wondering how I can make this work because I far as I can tell the classes either not being added or the classes are not working.
Suggesting the following changes:
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('.image-content').addClass('scrolledDown');
$('.image-content').removeClass('scrolledUp');
} else {
$('.image-content').addClass('scrolledUp');
$('.image-content').removeClass('scrolledDown')
}
});
This ensures you have the correct Class selector.
I am adding images of cards for a blackjack game and for whatever reason when I try to insert images through JS, they don't appear on the website. The hit button is supposed to add a new random card. The goal is to generate a random suite and a number and add the source accordingly.
let randomSuite;
let randomNum
let count = 1;
var cards = new Array();
const suites = new Array();
suites[0] = "H";
suites[1] = "S";
suites[2] = "C";
suites[3] = "D";
window.onload = function main(){
for(let i = 0 ; i < 56 ; i++){
randomNum = (Math.random() * 12) + 1;
cards.push(Math.floor(randomNum));
console.log(cards[i]);
count++;
}
}
function hitFunc(){
randomSuite = Math.floor(Math.random() * 3);
var img = document.createElement("img");
img.setAttribute("src","PNG-cards-1.3\1C.png");
document.body.appendChild(img);
//alert(randomSuite); used to check whether or not my code is running random numbers
img.id = count;
count++;
}
*{
margin: 0;
padding : 0;
font-family: sans-serif;
}
#divId {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.main{
width: 100%;
height: 100vh;
background-color:black;
}
.img1{
position: relative;
z-index: -1;
margin: 10px auto 20px;
display: block;
width: 75%;
height: 75%;
}
.img2{
position: relative;
z-index: 1;
margin: 10px auto 20px;
display: block;
bottom: 150px;
width: 7%;
height: 7%;
}
.hitButton {
z-index: 1;
position: relative;
text-align: center;
left: 175px;
bottom: 250px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
color: aliceblue;
object-position: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<style>
h1{text-align: center;}
</style>
<body class="main">
<div id="divId">
<h1 class="center">black jack</h1>
<img src="C:\Users\Adamf\OneDrive\Pictures\Camera Roll\background.jpg"
alt="" class="img1">
<button class="hitButton" id="hitbtn" onclick="hitFunc()">HIT</button>
<img src="PNG-cards-1.3\1C.png"
alt="" class="img2">
</div>
</body>
</html>
When I insert the same photo in html it works fine however when I try to manually add (the same path) it in JavaScript the same image does not want to appear. It will show up as if the image is not found.
edit: I just added the full program to stop confusion. Also, I am very new to JS so forgive my lack of knowledge.
I don't think anything wrong with your JS. Just check the image URL. Search on google about img attributes to see if anythings different.
I have used bootstrap to correlate the size of my background image to the window, but when I try to put images on top of it they get appended below. Also have attached my javascript, full functional, supposed to move images on touch of key
console.log('javascript linked');
$(function(){
function player1() {
var margin1 = $('#bar1').offset().left;
if (margin1 < "600") {
var move1 = (margin1 + 50);
$('#bar1').css('marginLeft', move1);
} else {
alert("Player 1 is the Winner!!!!");
}
}
function player2() {
var margin3 = $('#bar3').offset().left;
if (margin3 < "600") {
var move3 = (margin3 + 50);
$('#bar3').css('marginLeft', move3);
} else {
alert("Player 2 Is The Winner!!!!");
}
}
function checkPlayer1(event) {
var x = event.keyCode;
if (x===13){
player1();
}
}
function checkPlayer2(event) {
var y = event.keyCode;
if (y===32){
player2();
}
}
function move(){
var div = $("#bar2");
div.animate({left: '638px'}, 1000);
};
$('body').keypress(checkPlayer2);
$('body').keypress(checkPlayer1);
$("window").ready(move)
})
h1 {
position: absolute;
top: 5%;
margin: 0 auto;
font-size: 5vw;
left: 10%;
}
#bar1{
background: url('http://orig11.deviantart.net/c8fb/f/2011/237/3/1/profile_picture_by_red_angry_bird-d47u569.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
#bar2{
background: url('http://vignette3.wikia.nocookie.net/angrybirds/images/b/bf/Kingcry.gif/revision/latest?cb=20130310195100');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
position: relative;
}
#bar3{
background: url('http://www.clipartkid.com/images/47/angry-bird-yellow-icon-angry-birds-iconset-femfoyou-uJ3C4l-clipart.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<img src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
<h1>First Player to Catch the Pig Wins!</h1>
<div class="flex-container">
<div class="flex-item" id="bar1"></div> <br>
<div class="flex-item" id="bar2"></div> <br>
<div class="flex-item" id="bar3"></div>
</div>
</body>
</html>
add a class to the image like this:
<img class = "img-background" src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
and then add a css 'position absolute, top 0, left 0 ':
.img-background{
position: absolute;
top: 0;
left: 0
}