fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then((data) => {
console.log(data);
displayDetails(data);
})
.catch((error) => console.error("FETCH ERROR:", error));
//*function displayDetails(data) {
const informations = data[0]; //create a variable and store the array you need to access
const informationsDiv = document.getElementById("informations"); //create a vaiable with a div to display the data
const informationsTitle = informations.title.rendered; //create a variable and access the specific data, title in this case
const heading = document.createElement("h1"); //create a heading variable h1
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
const informationsImage = document.createElement("img"); //create a variable for the image
informationsImage.src = informations.episode_featured_image; //specify the image source inside the array
informationsDiv.appendChild(informationsImage);
const informationsDate = informations.date; //create a variable and access the date
const heading1 = document.createElement("p"); //create a variable to use in the DOM
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1); //append the data
//}
function displayDetails(data) {
let informationsDiv = document.getElementById("informations");
for(var i = 0; i < data.length; i++) {
let informations = data[i];
let informationsTitle = informations.title.rendered;
let heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
let informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
informationsDiv.appendChild(informationsImage);
let informationsDate = informations.date;
let heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1);
}
}
.swiper {
margin: auto;
padding: auto;
width:100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size-adjust: 15px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: #c2bdd1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
html,body {
height:100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: auto;
padding: 0;
}
#informations{
max-width: 700px;
text-align: center;
padding: 30px 30px 12px 30px;
color: rgb(252, 252, 252);
background-color: #7766d7;
border: 4px solid #9387f2;
border-radius: 5px;
}
<!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>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
<!--Script-->
<script src="script/script.js"></script>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div id="informations"></div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
allowTouchMove: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
keyboard: {
enabled: true,
}
});
</script>
</body>
</html>
I am building a carousel where on every page I want to display information (title, image, date) taken from this API: https://wptavern.com/wp-json/wp/v2/posts
So far I managed to write this script:
fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
}).then((data) => {
console.log(data);
displayDetails(data);
}).catch((error) => console.error("FETCH ERROR:", error));
function displayDetails(data) {
const informations = data[0];
const informationsDiv = document.getElementById("informations");
const informationsTitle = informations.title.rendered;
const heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
const informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
informationsDiv.appendChild(informationsImage);
const informationsDate = informations.date;
const heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1);
}
The problem is, this works only on the first slide. If I try to call the same function for slide n2 and change all the variables and the start of the array, from data[0] to data[1], then slide n1 doesn't showcase info anymore, but slide n2 does!
I also added a picture of HTM because I don't know how to format code properly and stack overflow is not allowing me to post the question.
The end result should display all the recent articles provided by the API.
Thank you for your time.
I've updated your code, this should work:
fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then((data) => {
console.log(data);
displayDetails(data);
})
.catch((error) => console.error("FETCH ERROR:", error));
function displayDetails(data) {
let informationsDiv = document.getElementById("slider");
for(var i = 0; i < data.length; i++) {
var slide = document.createElement("div");
slide.className = "swiper-slide";
var slideContent = document.createElement("div");
slideContent.className = "informations";
let informations = data[i];
let informationsTitle = informations.title.rendered;
let heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
slideContent.appendChild(heading);
let informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
slideContent.appendChild(informationsImage);
let informationsDate = informations.date;
let heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
slideContent.appendChild(heading1);
slide.appendChild(slideContent);
informationsDiv.appendChild(slide);
}
}
.swiper {
margin: auto;
padding: auto;
width:100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size-adjust: 15px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: #c2bdd1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
html,body {
height:100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: auto;
padding: 0;
}
.informations{
max-width: 700px;
text-align: center;
padding: 30px 30px 12px 30px;
color: rgb(252, 252, 252);
background-color: #7766d7;
border: 4px solid #9387f2;
border-radius: 5px;
}
<!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>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
<!--Script-->
<script src="script/script.js"></script>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper" id="slider">
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
allowTouchMove: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
keyboard: {
enabled: true,
}
});
</script>
</body>
</html>
It basically creates a new swiper-slide for each result of the API, and appends it to your slider.
Related
I created a 16 x 16 grid where I can etch a sketch on that grid. It's working well. However, the problem now is that, I can't seem to make the buttons to work. I want that if I click on the buttons, it's going to change the colors so I can sketch using other colors, instead, it can not read the eventListener.
--------- Below is my code :
let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');
const blue = document.getElementsByClassName('blue');
const eraser = document.getElementsByClassName('eraser');
const black = document.getElementsByClassName('black');
let reset = document.getElementById('reset');
function createGrid(number) {
makeRow(number);
makeColumn(number);
changeColours();
}
function makeRow(numberOfRow) {
for (let i = 0; i <numberOfRow; i++) {
let row = document.createElement('div');
container.appendChild(row);
row.classList.add('gridRow');
}
}
function makeColumn(numberOfColumn, selection) {
for ( let i = 0; i < rows.length; i++) {
for ( let j = 0; j < numberOfColumn; j++) {
let column = document.createElement('div');
if (selection == 'blue') {
column.addEventListener('mouseenter', function() {
column.classList.add('blue');
})
} else if (selection == 'eraser') {
column.addEventListener('mouseenter', function() {
column.classList.add('eraser');
})
} else if (selection == 'black') {
column.addEventListener('mouseenter', function() {
column.classList.add('black');
})
} else {
column.addEventListener('mouseenter', function() {
column.classList.add('colored');
})
}
// column.addEventListener('mouseleave', () => {
// column.classList.remove('colored');
// })
rows[j].appendChild(column);
column.classList.add('gridColumn');
}
}
}
blue.addEventListener('click', function() {
makeColumn(number, 'blue');
})
eraser.addEventListener('click', function() {
makeColumn(number, 'white');
})
black.addEventListener('click', function() {
makeColumn(number, 'black');
})
createGrid(16);
#importurl('https://fonts.googleapis.com/css2family=Asap:wght#400;600;700&display=swap');
body {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
background-color: beige;
font-family: Asap, sans-serif;
margin: 0;
padding: 0;
justify-content: center;
align-content: center;
align-items: center;
}
.header {
display: flex;
flex: 1;
justify-content: center;
}
#setGridSize {
display: inline-flex;
justify-content: center;
flex: 1;
gap: 12px;
}
#guide {
text-align: center;
margin: 1px;
font-family: Asap, sans-serif;
color: red;
font-size: 13px;;
}
.container {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
border: 1px solid black;
width: 550px;
height: 550px;
}
.gridColumn {
display: inline-flex;
border: 1px solid beige;
margin: -1px 0;
width: 30px;
height: 30px;
}
.colored{
background: red;
}
.buttons {
display: flex;
flex: 1;
gap: 20px;
margin: 10px;
}
.blue {
background: blue;
}
.eraser {
background: white;
}
.black {
background: black;
}
<!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>DOM Manipulation and Events</title>
<script src="javascript.js" defer></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
<p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
<button id="submit" > Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>
<div class="container"></div>
<div class="buttons">
<button class="blue"> Blue </button>
<button class="eraser" > Eraser </button>
<button class="black"> Black </button>
<button class="rainbow" > Rainbow </button>
<button class="reset" > Reset</button>
</div>
</body>
</html>
When you use
document.getElementsByClassName('blue')
the result is an Array-like object (HTMLCollection).
So just use
blue[0].addEventListener('click', function() {
makeColumn(number, 'blue');
})
I'm making a Tic Tac Toe game where the user can choose if they play X or O. How do I change the onclick function to display X if they chose X, or O if they chose O?
My code right now doesn't work since it only displays X even if I selected O from the two buttons.
Note: The other boxes don't have a function yet. To see the problem I'm talking about, click the first box on the upper left.
#import url('https://fonts.googleapis.com/css2?family=Koulen&family=VT323&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Signika+Negative:wght#400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
text-align: center;
background-color: #1C2C54;
color: #D175B7;
font-family: 'Signika Negative', sans-serif;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
margin: auto;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
}
h1 {
font-family: 'VT323', monospace;
font-size: 3rem;
}
.text-container {
display: flex;
flex-direction: column;
width: 300px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #4BC3B5;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.button-container {
display: flex;
flex-direction: row;
gap: 10px;
}
button {
padding: 3px 20px;
background-color: #4BC3B5;
color: white;
border: 3px solid #34a396;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c8d82;
border: 3px solid #124640;
}
button:focus {
background-color: #2c8d82;
border: 3px solid #124640;
}
.score-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
justify-content: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Tic Tac Toe</title>
</head>
<body>
<main>
<div class="text-container">
<h1>Tic Tac Toe</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid1" onclick="clickBox1()"></div>
<div class="grid-item" id="grid2" onclick="clickBox2()" ></div>
<div class="grid-item" id="grid3" onclick="clickBox3()"></div>
<div class="grid-item" id="grid4" onclick="clickBox4()"></div>
<div class="grid-item" id="grid5" onclick="clickBox5()"></div>
<div class="grid-item" id="grid6" onclick="clickBox6()"></div>
<div class="grid-item" id="grid7" onclick="clickBox7()"></div>
<div class="grid-item" id="grid8" onclick="clickBox8()"></div>
<div class="grid-item" id="grid9" onclick="clickBox9()"></div>
</div>
<div class="button-container">
<button id="x-el" onclick="selectX()">X</button>
<button id="o-el" onclick="selectO()">O</button>
</div>
<div class="score-container">
<p id="playerscore">Player Score:</p>
<p id="compscore">Computer Score:</p>
</div>
</main>
<script>
// Grab the elements
let xBtn = document.getElementById('x-el')
let oBtn = document.getElementById('o-el')
let playerScoreDisplay = document.getElementById('playerscore')
let compScoreDisplay = document.getElementById('compscore')
let x = 'X'
let o = 'O'
// Grabbing individual boxes
let box1 = document.getElementById('grid1');
let box2 = document.getElementById('grid2');
let box3 = document.getElementById('grid3');
let box4 = document.getElementById('grid4');
let box5 = document.getElementById('grid5');
let box6 = document.getElementById('grid6');
let box7 = document.getElementById('grid7');
let box8 = document.getElementById('grid8');
let box9 = document.getElementById('grid9');
/*
let boxes = document.querySelectorAll("div.grid-item")
*/
// Selecting x or o
function selectX() {
alert('You selected X!');
}
function selectO() {
alert('You selected O!');
}
// Function for each box
function clickBox1() {
if (selectX) {
box1.innerHTML = x;
} else if (selectO) {
box1.innerHTML = o;
}
}
</script>
</body>
</html>
You would probably want to create a variable to save the user's choice and set it depending on whether or not they clicked on "x-el" or "o-el" like so below.
Also, loop through the boxes instead of creating a function for every single box.
// user's choice
let myChoice
// Selecting x or o
function selectX() {
alert('You selected X!');
myChoice='X'
}
function selectO() {
alert('You selected O!');
myChoice='O'
}
// Function for each box
function clickBox1() {
if (myChoice==='X') {
box1.innerHTML = x;
} else if (myChoice==='O') {
box1.innerHTML = o;
}
}
beginner here.
Since days I try to build an etch-a-sketch board with 32 boxes, 16 columns and 16 rows. The only thing I end up with is 32 boxes in a row or in a column. I don't know where the error is, in the script, css or the html so I included all three in the post.
Any help is appreciated!
Here is the code:
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i++ ) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
grid.appendChild(squareCol);
}for(let j = 0; j <= 16; j++){
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id',j)
grid.appendChild(squareRow);
}
}
makeBoard();
})
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
justify-content: center;
align-items: center;
}
.squareRow, .squareCol {
display: flex;
justify-content: center;
align-items: center;
height: 10px;
width: 10px;
border: solid black 1px;
}
<!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>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>
Primarily you need to wrap the grid columns. See the additional CSS I've applied to the container and items inside.
As epascarello points out, all flex children should be columns. The container is the row. Either that or you have to restructure your script to actually create multiple flex rows, with individual containers.
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i++) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id', i)
grid.appendChild(squareCol);
}
for (let j = 0; j <= 16; j++) {
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id', j)
grid.appendChild(squareRow);
}
}
makeBoard();
})
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.squareRow,
.squareCol {
display: flex;
flex: 1 1 6.25%;
justify-content: center;
align-items: center;
height: 10px;
border: solid black 1px;
}
<!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>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>
I put a div (.parent) container inside your wrapped container. the parent class containes the grid template.
const grid = document.getElementById('c');
for (let i = 0; i < 32; i++) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
squareCol.innerHTML = (i + 1)
grid.appendChild(squareCol);
}
body {
margin: 0;
padding: 0;
}
.parent {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.squareCol {
}
.squareRow, .squareCol {
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
border: solid black 1px;
}
<body>
<div class="container">
<div id="c" class="parent"></div>
</div>
<div id="message"></div>
</body>
I'm learning javascript and used this youtube video as an example:
https://www.youtube.com/watch?v=RLc8NB2JyxE&
He does not include source code but I have made sure that my code is exactly how it is in the video.
The tutorial walks through how to use html, css, and javascript to make a navbar that changes as you scroll down the screen. Any example of this error I could find had a solution of "put the script at the end of the html body" but mine is already there and I'm not sure why the script is not loading.
this is the error:
app.js:28 Uncaught TypeError: Cannot read property 'style' of null
at app.js:28
at Array.forEach (<anonymous>)
at IntersectionObserver.navCheck (app.js:16)
(anonymous) # app.js:28
navCheck # app.js:16
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>PhotoGem | slogan here</title>
</head>
<body>
<header>
<nav>
<h1>PhotoGem</h1>
<ul>
<li><a data-page="home" href="#">Home</a></li>
<li><a data-page="project" href="#">Project</a></li>
<li><a data-page="contact" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section data-index="0" class="home">
<h2>Home</h2>
</section>
<section data-index="1" class="project">
<h2>Projects</h2>
</section>
<section data-index="2" class="contact">
<h2>Contact</h2>
</section>
</main>
<script src="./app.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
header {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0px;
background: white;
}
nav {
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: black;
text-decoration: none;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 5rem;
color: white;
}
.home {
background: linear-gradient(to right top, #f46b45, #eea849);
}
.project {
background: linear-gradient(to right top, #005c97, #363795);
}
.contact {
background: linear-gradient(to right top, #e53935, #e35d5b);
}
.bubble {
position: absolute;
z-index: -2;
background: linear-gradient(to right top orange, yellow);
}
app.js
const sections = document.querySelectorAll("section");
const bubble = document.querySelector(".bubble");
const gradients = [
"linear-gradients(to right top, #f46b45, #eea849)",
"linear-gradients(to right top, #005c97, #363795)",
"linear-gradients(to right top, #e53935, #e35d5b)"
];
const options = {
threshold: 0.7
};
let observer = new IntersectionObserver(navCheck, options);
function navCheck(entries) {
entries.forEach(entry => {
const className = entry.target.className;
const activeAnchor = document.querySelector(`[data-page=${className}]`);
const gradientIndex = entry.target.getAttribute("data-index");
const coords = activeAnchor.getBoundingClientRect();
const directions = {
height: coords.height,
width: coords.width,
top: coords.top,
left: coords.left
};
if (entry.isIntersecting) {
bubble.style.setProperty("left", `${directions.left}px`);
bubble.style.setProperty("top", `${directions.top}px`);
bubble.style.setProperty("width", `${directions.width}px`);
bubble.style.setProperty("height", `${directions.height}px`);
}
});
}
sections.forEach(section => {
observer.observe(section);
});
I want to change sections on scroll, to kill the overflow of a single page website and change the sections that have 100% height on scroll. I tried using the:
https://github.com/hellsan631/angular-fullpage.js
but cannot make it work. When I follow all the instructions I get the following errors:
Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
I also tried using https://github.com/alvarotrigo/fullPage.js, no errors but nothing happens.
Anyone has a different solution, or a way to fix this one? Thanks.
Here is a Swiper content sliding plugin, similar to fullpage.js:
http://idangero.us/swiper/demos/20-mousewheel-control.html
You can scroll it with mousewheel, mouse (desktop touch emulation), keypad (on desktop) and finger (on touch devices). Plus there is a non-JQuery version available.
Additionally, you can even configure it to change page background colors, like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
body {
transition: background-color .5s ease-in-out;
}
body.red {
background-color: #f40;
}
body.orange {
background-color: #f90;
}
body.yellow {
background-color: #fe0;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-bg="red">Slide 1</div>
<div class="swiper-slide" data-bg="orange">Slide 2</div>
<div class="swiper-slide" data-bg="yellow">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
var body = document.body;
body.className = 'red';
var slider = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true,
onSlideChangeStart: function (swiper) {
var currentSlide = swiper.slides[ swiper.activeIndex ];
body.className = currentSlide.getAttribute( 'data-bg' );
console.log( currentSlide.getAttribute( 'data-bg' ) );
},
});
</script>
</body>
</html>
DEMO