Section Scrolling with js - javascript

It is necessary to implement scrolling through the sections of the site. For example, when scrolling down, you need to scroll to the next section. And if we scroll up, then to the previous section.
<body>
<header></header>
<div class="top"></div>
<div class="mid"></div>
<div class="bottom"></div>
<footer></footer>
</body>
UPD: i resolved it by finding this https://codepen.io/mystroken/pen/bKoebp

no it is not neccessary to have scrolling only using section you could use divs as well to achieve the same. Here's an example for your understanding
html{
scroll-behavior: smooth;
}
.links{
position: fixed;
background: white;
}
div:not(.links){
width: 100vw;
height: 100vh;
}
#one{
background: black;
}
#two{
background: blue
}
#three{
background: pink;
}
#four{
background: green;
}
<div class="links">
one
two
three
four
</div>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>

Here is a example how you can scroll by JavaScript.
If you do not want smooth scroll, you 0 instead of 300 on button on-click.
button{cursor: pointer}
div{
width: 100%;
height: 100vh;
}
#header{
background: black;
}
#content{
background: blue
}
#middle{
background: pink;
}
#footer{
background: green;
}
<div style="height:100px;position:fixed">
<button onclick="scrollToSmoothly('header', 300)">header</button>
<button onclick="scrollToSmoothly('content', 300)">content</button>
<button onclick="scrollToSmoothly('middle', 300)">middle</button>
<button onclick="scrollToSmoothly('footer', 300)">footer</button>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
function scrollToSmoothly(id, time) {
var pos = document.querySelector('#'+id).offsetTop;
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}

Correct implementation of section scrolling(step scrolling)
<div class="cachu__container">
<!-- All sections are wrapped inside .cachu__sections -->
<div class="cachu__sections">
<section class="cachu__section">Some section</section>
<section class="cachu__section">Some section</section>
<section class="cachu__section">Some section</section>
</div>
<!-- End of section -->
<!-- Navigation will be dynamically added here (via JavaScript) -->
</div>
JS
// Now let's turn on our slider!
// 1. Set some options.
// 2. Instantiate the Slider with the DOM Element instance of the wrapper.
// 3. Run the slider !!
document.addEventListener('DOMContentLoaded', function() {
const options = {};
let slider = new Cachu(document.querySelector('.cachu__container'), options);
slider.run();
});
https://codepen.io/mystroken/pen/bKoebp

Related

Why isn't my span changing color on scroll

HTML that is needed to know
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan">Developer</span></div>
</div>
</div>
</section>
Here is the needed CSS
.sticky {
padding: 30px 0;
background-color: crimson;
}
.stickyHeadSpan {
color: #fff;
}
Here is the javascript code that is needed
window.addEventListener('scroll' , function(){
if(window.scrollY > 20){
const navbar = document.querySelector('.navbar')
const headSpan = document.querySelector('span')
navbar.classList.add('sticky')
headSpan.classList.add('stickyHeadSpan')
}
})
window.addEventListener('scroll' , () => {
if(window.scrollY === 0) {
const navbar = document.querySelector('.navbar')
navbar.classList.remove('sticky')
}
})
I tried getting the span by the id and still did not work , whenever I scroll down the span is not changing color to white , did I make a mistake somewhere ? I also tried using just span so no id or class and it still did not work , it is really strange . Is there any rule that makes this not work ? I am a beginner at Javascript so I hope you can help me fix this.
window.addEventListener('scroll', function() {
if (window.scrollY > 20) {
const navbar = document.querySelector('.home');
const headSpan = document.querySelector('span');
navbar.classList.add('sticky');
headSpan.classList.add('stickyHeadSpan');
}
})
window.addEventListener('scroll', () => {
if (window.scrollY === 0) {
const navbar = document.querySelector('.home')
navbar.classList.remove('sticky')
}
})
.wrapper{
height: 200vh;
}
.sticky {
padding: 30px 0;
background-color: crimson;
position: sticky;
top: 0;
left: 0;
}
.stickyHeadSpan {
color: #fff;
}
<div class="wrapper">
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan">Developer</span></div>
</div>
</div>
</section>
</div>

How to make auto slideshow of Divs stop when target link to one of the slide is clicked

I have a slideshow of divs that automatically cycles through but how do i make it so that when i click on a target link, it leads me there and stops the cycling of the slideshow. Moreover, after a few cycles, the slides start to clog up and aggregate on top of one another, can someone please help tp rectify this error thanks.
This is my current code:
parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<script>
function Divs() {
var divs = $("#parent div"),
now = divs.filter(":visible"),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
</script>
<div class="box" id="food">
<h2>hi</h2>
</div>
<div class="box" id="infrastructure">
<h2>bye</h2>
</div>
<div class="box" id="culture">
<h2>hi</h2>
</div>
<div class="box" id="nature">
<h2>bye</h2>
</div>
</div>
If you set your interval to a variable you can point an event-listener to the parent div and on click you can reset the timer.
here is a solutuion:
const interval= setInterval(divs, 1400)
const parentContainer = document.querySelector('#parent')
parentContainer.addEventListener('click', event => {
clearInterval(interval)
console.log(event.target.parentNode)
})
divs(interval)
function divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
#parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<div class='box' id='food'>
<h2>food</h2>
</div>
<div class='box' id='infrastructure'>
<h2>infrastructure</h2>
</div>
<div class='box' id='culture'>
<h2>culture</h2>
</div>
<div class='box' id='nature'>
<h2>nature</h2>
</div>
</div>

Auto scroll images on page load, stop on hover

JS newbie here. I have an issue that is probably has a fairly simple answer, but I haven't been able to figure it out yet. I wasn't sure exactly what to call this thing.
I have text in a div and when you hover over it, it displays a picture in another div. This is working fine, but I would like to have it scroll through the images automatically when the page loads. Once the user hovers over one of the text divs, I'd like the auto scroll to stop.
I have a Codepen of how I have it set up here: https://codepen.io/johnballman/pen/dwEwRz
HTML:
<div class="app-screen">
<img src="http://placehold.it/350x150">
</div>
<div id="features">
<article data-src="http://placehold.it/350x150">Link 1</article>
<article data-src="http://placehold.it/350x250">Link 2</article>
<article data-src="http://placehold.it/350x350">Link 3</article>
</div>
CSS:
.app-screen {
float: left;
margin-right: 100px;
display: block;
width: 350px;
height: 200px;
background-color: grey;
padding-top: 100px;
}
img.active{
z-index: 2 !important;
opacity: 1 !important;
transition:opacity 1s linear;
}
JS:
$("#features article").hover( function() {
var value=$(this).attr('data-src');
$(".app-screen img").attr("src", value);
});
$(this).switchClass("", "active", 1000);
Any help would be great. Thanks.
Use setInterval to loop a c current counter.
Use ++c % tot (where tot is the number of links) to: increment-loop the counter.
Use only Classes. That way you can have multiple .Features elements in a single page!
Create show, stop and play functions. show is to show a c image; stop is to stop the interval, and play to start your magic.
/**
* Features
* Auto-change articles featured images
*/
$('.Features').each((i, el) => {
const $this = $(el);
const $image = $this.find('.Features-image');
const $link = $this.find('.Features-link');
const tot = $link.length;
let c = 0; // Counter to keep track of Current image
let itv = null; // Interval loop
const show = () => {
$image.css({backgroundImage: `url("${$link.eq(c).data().src}")`});
$link.removeClass('is-active').eq(c).addClass('is-active');
}
const stop = () => clearInterval(itv);
const play = () => itv = setInterval(() => {
c = ++c % tot; // Preincrement + loop (% = reminder operator)
show(); // Show c image
}, 3000);
// Link mouseenter
$link.on({
mouseenter() {
c = $link.index(this);
stop(); // Stop ongoing auto-play
show(); // Show c image
},
mouseleave() {
play(); // Play on mouseleave
}
});
// Init
show(); // Show c image
play(); // Start play!
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
/**
* Features
* jQuery-handled articles with featured images
*/
.Features {
display: flex;
min-height: 200px;
}
.Features-image {
background: #aaa 50% / cover no-repeat none;
transition: background 0.5s;
flex: 0 1 40%;
}
.Features-links {
display: flex;
flex: 1;
flex-flow: column;
}
.Features-link {
flex: 1;
padding: 10px;
transition: background 0.3s;
border-bottom: 1px solid #ddd;
}
.Features-link:hover,
.Features-link.is-active{
background: #eee;
}
<div class="Features">
<div class="Features-image"></div>
<div class="Features-links">
<article class="Features-link" data-src="//placehold.it/350x350/0bf">Link 1</article>
<article class="Features-link" data-src="//placehold.it/350x350/f0b">Link 2</article>
<article class="Features-link" data-src="//placehold.it/350x350/0fb">Link 3</article>
</div>
</div>
<div class="Features">
<div class="Features-image"></div>
<div class="Features-links">
<article class="Features-link" data-src="//placehold.it/350x350/28a">Lorem</article>
<article class="Features-link" data-src="//placehold.it/350x350/a28">Ipsum</article>
<article class="Features-link" data-src="//placehold.it/350x350/8a2">Dolor</article>
</div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Scroll lock last section

I'm trying to make a website where the penultimate section takes a fixed position and the last one goes over. However, the goal is for the last section to never be halfway through. To do this, after the penultima section is in a fixed position, I detect if the scroll comes from above. If it comes, at a certain point the page scrolls to the bottom. I'm having problems here because when the page does do the animation of scrolling the last section gets stuck. Can you help me?
function fixe_section(scrollTopPx){
if(scrollTopPx>$('.section2').offset().top){
$('.section2 div').css({'position':'fixed', 'bottom':'0', 'z-index':'-1'});
}
else{
$('.section2 div').css({'position':'static', 'z-index':'0'});
}
}
$(window).scroll(function(event){
scrollTopPx = $(window).scrollTop();
fixe_section(scrollTopPx);
});
section_move();
function section_move(){
var start_mov = $('.section2').offset().top+$('.section2').height()/2;
var move_to = $('.section3').offset().top+$('.section3').height();
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st>lastScrollTop){
if(st>start_mov){
$("html, body").animate({
scrollTop: move_to
}, 600);
return false;
}
}
lastScrollTop = st;
});
}
section {
width: 100%;
height: 600px;
position: relative;
}
section div{
width: 100%;
height: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>

Same code acts differently on website and jsfiddle

I have some code that is meant to allow a user to scroll sideways by clicking, which works perfectly on jsfiddle, but does something completely different on my actual website. On my website, you can scroll right once but no further, and when you scroll back, it apparently scrolls right past the left-hand border.
Here's a live link to the problem on my website: rouvou.com/error
And here's the fiddle.
I literally copied and pasted the code. I'm using jQuery 1.10.0 on my website and the closest jQuery version jsfiddle has is 1.10.1, but I can't imagine that could cause this different behavior. The html I posted is the only code on that entire page. On both locations, I'm using Chrome Version 42.0.2311.152 (64-bit) on Ubuntu.
Why might the code have different results on jsfiddle and my website?
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ($item.length / visible) - 1; //End index
$('div#arrowR').click(function() {
if(index < endIndex) {
index++;
$item.animate({
'left': '-=300px'
});
}
});
$('div#arrowL').click(function() {
if(index > 0) {
index--;
$item.animate({
'left': '+=300px'
});
}
});
});
#container {
width: 340px;
height: 50px;
}
#list-container {
overflow: hidden;
width: 300px;
float: left;
}
.list {
background: grey;
min-width: 1400px;
float: left;
}
#arrowR {
background: yellow;
width: 20px;
height: 50px;
float: right;
cursor: pointer;
}
#arrowL {
background: yellow;
width: 20px;
height: 50px;
float: left;
cursor: pointer;
}
.item {
background: green;
width: 140px;
height: 40px;
margin: 5px;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
It seems just as you said, 1.10.0 has some bug on that. I created an altered version of your jsfiddle, the only difference is that the jQuery is using version 1.10.0, you can see that it works like your site now.
See jQuery 1.10.1 Change log :
Effects
#13937: finish() only finishes last item of a set being .animate()d.
#13939: 1.10.0 breaks relative animation
and the issue ticket#13939 :
Description
Relative animation (using += or -=) is broken in 1.10.0. For example,
$('h1').animate({marginLeft: '+=100px'}); does not work.
So, you might have to switch to version 1.10.x where x is the latest version, as their change should mostly be issue fixes, not functionality changes.
The problem was that there is indeed a bug in 1.10.0, but for anyone in the future who has this problem but doesn't want to upgrade, I figured out a way to make this function work on 1.10.0.
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) - 1; //End index
animatepixels = 0
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
animatepixels = 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
animatepixels= 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
});
</script>

Categories

Resources