I'm trying to make a single static website, which when an div child of comes into viewport (precisely, when div element comes into the upper 50% of the viewport) changes the corresponding div's class in side-nav to "active". It should work scrolling down and up.
So far I've tried several solution from other threads on SO, none successful. I assume I've been approaching this wrong.
$(window).on('scroll', function() {
$("#vars-args").each(function() {
if (elementInViewport2($(this))) {
$(this).find("#div1a").addClass("active");
}
});
});
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="side-nav">
1
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<!--content-->
</div>
<div id="div2">
<!--content-->
</div>
<div id="div3">
<!--content-->
</div>
<div id="div4">
<!--content-->
</div>
<div id="div5">
<!--content-->
</div>
<div id="div6">
<!--content-->
</div>
</div>
Also note that content of each div inside can be larger than the size of viewport.
I have been having problems getting the javascript to work. Also please note that the current JS is copied from some other thread.
This can be achieved using the IntersectionObserver as told by #cloned in the comments: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
To achieve this, you need a callback function passed as a parameter which is executed once isIntersecting is true, an option object (below it sets the threshold at 50% of the element) and an IntersectionObserver.
The callback toggles the active class to the a element according to the entry's id.
At the end we loop through the divs and make our observer observe them.
const callback = (entries, observer) => {
entries.forEach(entry => {
const navItem = document.querySelector('#' + entry.target.id + 'a');
if (entry.isIntersecting) {
console.log(navItem.getAttribute('id'));
navItem.classList.add('active');
} else {
navItem.classList.remove('active');
}
});
};
const options = {
threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);
const container = document.getElementById('content');
const targetElements = container.querySelectorAll('div');
targetElements.forEach(element => {
observer.observe(element);
});
Here is a JSBin to demonstrate it https://jsbin.com/riyuhediso/47/edit?html,js,console,output
Note that although it demonstrates its feasibility it's not been profiled for performance issues which can be significant so I don't vouch for it.
If you are using Bootstrap you can use the ScrollSpy lib https://getbootstrap.com/docs/4.1/components/scrollspy/ and there is also ScrollMagic which is great http://scrollmagic.io/
You need to filter out which element is inside the viewport with the help of .getBoundingClientRect()
Checkout this
and check if any content has it's top and bottom within the half of the viewport ( window.innerHeight )
I took help of filter function to find out the index of contents that is within the built in function and set the .active class of the corresponding anchor.
Have a look at the snippet:
var direction = 0; // a variable to keep track of scrolled position;
$(window).on('scroll', function() {
// check if window is scrolling up or down;
if ($(window).scrollTop() > direction) { // if true, window scrolling scrolling down;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
// .eq() selector helps to find elements with index number, and here we pass a filter to find the content that is within the viewport;
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y <= (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
} else { // if false, window scrolling scrolling up;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y < (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
}
});
* {
margin: 0;
padding: 0;
}
#side-nav {
/* feel free to remove or change, only for testing */
position: fixed;
width: 100%;
top: 0;
padding: 15px;
}
#side-nav a {
/* feel free to remove, only for testing */
text-decoration: none;
color: grey;
margin-right: 5px;
font-size: 24px;
font-weight: bold;
}
#side-nav a.active {
color: #000;
/* sets color for the default active class */
}
#content div {
min-height: 600px;
background-color: #cecece;
border-bottom: 1px solid #fff;
box-sizing: border-box;
padding: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side-nav">
<a href="" id="div1a" class='active'>1</a>
<!-- set a default class assuming the first one will be in viewport while window loads -->
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<p>One</p>
</div>
<div id="div2">
<p>Two</p>
</div>
<div id="div3">
<p>Three</p>
</div>
<div id="div4">
<p>Four</p>
</div>
<div id="div5">
<p>Five</p>
</div>
<div id="div6">
<p>Six</p>
</div>
</div>
Related
I'm trying to build a dot navigation kind of thing, i.e., when you click on each "div" it takes you to the specific section, which is currently implemented.
But, also while scrolling I need to change the current state of this div's to active. How do I do that?
An image on how the dot navigation looks.
I was looking how to get scroll positions of each section and assign them to each variables and run some function.
<div class="dot-navigation">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
Listen for scroll events, find the currently displayed region, and highlight the navigation elements as necessary.
window.addEventListener('DOMContentLoaded', updateNav);
window.addEventListener('scroll', updateNav);
function updateNav() {
const currentRegion = [...document.querySelectorAll(".region:not([id=''])")]
.find(e=>e.getBoundingClientRect().top>=0)
if(currentRegion) {
window.location.hash = `#${currentRegion.id}`;
[...document.querySelectorAll(`a:not([href='#${currentRegion.id}'])`)]
.forEach(a=>a.classList.remove('red'))
document.querySelector(`a[href='#${currentRegion.id}']`)?.classList.add('red')
}
}
a { text-decoration:none; color: black}
.red { color: red; }
.region { margin-left: 100px; min-height: 500px; }
.dot-navigation { position:fixed }
<div class="dot-navigation">
<div>o</div>
<div>o</div>
<div>o</div>
<div>o</div>
<div>o</div>
<div>o</div>
</div>
<div class="region" id="home">home...</div>
<div class="region" id="about">about...</div>
<div class="region" id="services">services...</div>
<div class="region" id="clients">clients...</div>
<div class="region" id="reviews">reviews...</div>
<div class="region" id="contactus">contactus...</div>
Thanks, Angelina for your comment.
I found this to be useful https://www.youtube.com/watch?v=fAAk9CATILc
let section = document.querySelectorAll("section");
let dotNav = document.querySelectorAll(".dot-navigation div a");
window.onscroll = () => {
section.forEach((sec) => {
let top = window.scrollY;
let offset = sec.offsetTop - 200;
let height = sec.offsetHeight;
let id = sec.getAttribute("id");
if (top >= offset && top < offset + height) {
dotNav.forEach((dot) => {
dot.classList.remove("navDot-active");
document.querySelector(".dot-navigation div a[href*=" + id + "]").classList.add("navDot-active");
});
}
});
};
I have a website which have one page scroll feature using this - https://alvarotrigo.com/angular-fullpage/
Now in this website, In one page I want to create a division inside which the fullpage scroll feature is disabled and I can scroll that division as normal - like this https://stackblitz.com/edit/angular-kqvraz?file=src%2Fapp%2Fapp.component.html
What I have done till now -
app.component.html
<app-navbar></app-navbar>
<div fullpage id="fullpage2" [options]="config" (ref)="getRef($event)">
<div class="section" id="banner">
//first section
</div>
<div class="section" id="demos">
//second section
</div>
<div class="section" id="prod-solution">
// third section
</div>
<div class="section" id="scroll-solution">
<div style="height: 200px; border: 1px solid; overflow: auto;">
// div where I want to disable full page scroll and enable normal scroll
<div>
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
config: any;
fullpage_api: any;
constructor() {
// for more details on config options please visit fullPage.js docs
this.config = {
// fullpage options
licenseKey: 'YOUR LICENSE KEY HERE',
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#menu',
// fullpage callbacks
afterResize: () => {
console.log("After resize");
},
afterLoad: (origin, destination, direction) => {
console.log(origin.index);
}
};
}
getRef(fullPageRef) {
this.fullpage_api = fullPageRef;
}
}
You should catch the wheel event on the DIV that shouldn't trigger the fullpage scroll and only scroll this element.
Code
Modify the section of your code to match the following one:
<div style="height: 200px; border: 1px solid; overflow: auto;">
<!-- add a scroll event listener -->
<div (wheel)="blockScroll($event)">
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
Add the event listener in your app.component.ts:
blockScroll(e) {
let delta = e.deltaY || -e.detail;
e.currentTarget.scrollTop += delta * 30;
e.stopPropagation();
e.preventDefault();
}
Demo
I added a scrolling container in "Section 2" that will only scroll its own content without triggering the fullpage scroll.
Demo on StackBlitz
If you want other scroll events like touch to be handled as well you need to add the relevant event to the <div> as well.
For scrolling on pages higher than 100vh, We want scrolling to be done normally and when we get to the bottom of the page, do a full scroll.
For this purpose, you can use the fullpage.js package, which requires a license. But by typescript, it can be easily implemented.
sample in stackblitz
in file.html use (mousewheel):
<div class="container" id="main-container"
(mousewheel)="changeMouseWheel($event)">
<div class="panel" id="el1"></div>
<div class="panel" id="el2"></div>
<div class="panel" id="el3"></div>
<div class="panel" id="el4"></div>
<div class="panel" id="el5"></div>
<div class="panel" id="el6">
<h1>whit long height</h1>
</div>
</div>
in fil.css:
.panel{
width: 100%;
height: 100vh;
}
#el1 {background-color: antiquewhite}
#el2 {background-color: aliceblue}
#el3 {background-color: beige}
#el4 {background-color: aqua}
#el5 {background-color: #00ffae
}
#el6 {height: 200vh; background-color: #6200ff
}
in file.ts:
changeMouseWheel(e) {
const sectionCount = document.querySelectorAll('.panel').length;
const windowHeight = window.innerHeight;
if (e.deltaY < 0 && this.sectionNumber > 1) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber -= 1;
const element = document.getElementById(`el${this.sectionNumber}`);
this.scroll(element.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
if (e.deltaY > 0 && this.sectionNumber < sectionCount) {
const currentElement = document.getElementById(`el${this.sectionNumber}`);
if (((currentElement.offsetTop + currentElement.offsetHeight) - windowHeight) <= document.documentElement.scrollTop) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber += 1;
console.log(`#el${this.sectionNumber}`);
const nextElement = document.getElementById(`el${this.sectionNumber}`);
this.scroll(nextElement.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
}
}
scroll(topData: number, leftData: number) {
window.scrollTo({
top: topData,
left: leftData,
behavior: 'smooth'
});
}
I want to hide all elements but the first one so I use $(".item:not(:eq(0))").fadeOut();
I have elements with the same class "item":
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth Item</div>
Then when I scroll to the next element which could be "second , third,fourth item" , I want to show it
I tried using :
function isScrolledIntoView(elem)
{
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function() {
jQuery(".news:not(:eq(0))").each(function(index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).fadeIn(10000);
}
});
});
But it doesn't work with my method because the height of the body changes on showing the next item "Second Item" , So All the items are shown when I scroll to the "Second Item" or any other item.
How to hide the items but the first one and then fadIn() each on scrolling to it ?
This is using offset() in jquery. This demo will trigger function if
your element is completely in your viewport.
Tip:You need to take care of inner as well as outer height of element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
height:200vh;
}
#test {
top: 100vh;
padding: 10px;
width: 300px;
position: relative;
border: 1px solid black;
height:100;
}
</style>
</head>
<body>
<p>scroll to test</p>
<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var x = $("#test").offset();
var height1 = $("#test").outerHeight();
var y = document.documentElement.scrollTop;
var z = (x.top + height1) - y;
if(z < $(window).height()){
alert("fumction");
}
});
});
</script>
</body>
</html>
It will be more easy to use the combination of waypoint.js and animate.css.
Add animated class to every element to be animated. You can use any of the animate.css effects.
Change the offset { offset: '80%' } to control when the animation can start.
<div class="animated waypoint-slideup">
</div>
$('.waypoint-slideup').waypoint(function () {
$(this).addClass('slideInUp');
}, { offset: '80%' });
Use this in the css file
.waypoint-slideup{
opacity:0;}
.waypoint-slideup.slideInUp{
opacity:1;}
I'm looking for a generic (native) Javascript function that could tell if an element is visible, that can take into account elements in a "carousel" (aka "slider"); These are usually containers with "slides", each an element positioned to the left (or right) of the previous one - but only one of them is actually visible.
An example can be seen in this web page:
http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/
EDIT: An example for a carousel with 3 slides:
<div class="carousel">
<div class="slide" style="left:0"><img src="..." /></div>
<div class="slide" style="left:640px"><img src="..." /></div>
<div class="slide" style="left:1280px"><img src="..." /></div>
</div>
<style>
.carousel {
width: 640px;
height: 460px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
}
</style>
The function should return false for the images not directly visible in the carousel.
I've tried numerous techniques suggested in answers in SO to questions regarding visibility detection, amongst them - checking offsetParent, offsetLeft, offsetRight, and using getComputedStyle and checking display, and more, but all of them return true for the invisible images in the carousel.
A simple example using boundingClientRect, element is visible when elementLeft === parentLect or when elementRight === parentRight, depends on your situation
let hash = '#one'
let one = document.getElementById('one')
let two = document.getElementById('two')
let three = document.getElementById('three')
function getResult (el) {
let elementRect = el.getBoundingClientRect()
let parentRect = el.parentElement.getBoundingClientRect()
return `
${el.id} - visible: ${elementRect.left === parentRect.left || elementRect.right === parentRect.right}`
}
function hashChange() {
document.querySelector(`${location.hash || hash} .content`).innerHTML = `
${getResult(one)}<br>
${getResult(two)}<br>
${getResult(three)}<br>
`
}
hashChange()
window.addEventListener('hashchange', hashChange)
.carousel {
display:flex;
height:200px;
width:200px;
overflow-x:hidden;
}
.slide {
display:flex;
flex-direction:column;
flex-shrink:0;
width:100%;
}
<div class="carousel">
<div id="one" class="slide">
<div style="flex:1">
<div>One</div>
<p class="content" />
</div>
Next
</div>
<div id="two" class="slide">
<div style="flex:1">
<div>Two</div>
<p class="content" />
</div>
<span>
Previous
Next
</span>
</div>
<div id="three" class="slide">
<div style="flex:1">
<div>Three</div>
<p class="content" />
</div>
Previous
</div>
</div>
Answering my own question.
// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
if (elem.nodeName == "BODY") return false;
// find out if any parent of the element has 'overflow:hidden':
var p = elem, isOverflow = false;
while ((p=p.parentNode) && p.nodeName!=="BODY") {
if (window.getComputedStyle(p)['overflow']=="hidden") {
isOverflow = true;
break;
}
}
if (isOverflow) {
var er = elem.getBoundingClientRect(),
pr = p.getBoundingClientRect();
return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);
}
return false;
}
It works by first trying to find a container with overflow:hidden, then if the element is inside a container with overflow:hidden and "outside of the bounds" of the container, the function returns true.
In the while loop we need to stop when the element is body, otherwise it will go on until Document and will throw an error saying that the argument for window.getComputedStyle "does not implement the Element interface".
I'll also re-edit the title of the question to be more specific to the problem.
<body>
<div id = "SiteContainer">
<div id = "NavigationButtons"></div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition();">x</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition();">y</div>
<div id = "VideoWrapper">
<div id = "SlideShowItem">
<img src="Images/A.png" alt="A"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/B.png" alt="B"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/C.png" alt="C" ></img>
</div>
</div>
</div>
</div>
<script>
var wrapper = document.querySelector("#VideoWrapper");
function setPosition(e)
{
if(e.target.name = "forward")
{
if!(wrapper.style.left = "-200%")
{
wrapper.style.left = wrapper.style.left - 100%;
}
}
else
{
if(e.target.name = "back")
{
if!(wrapper.style.left = "0%")
{
wrapper.style.left = wrapper.style.left + 100%;
}
}
}
}
</script>
</body>
Hi, I am very new to javascript. What I am trying to do, is change the x-position of a div when another div (NavigationForward or NavigationBackward) is clicked. However it does not appear to do anything at all. Basically if the div with name forward is clicked, I want to translate the VideoWrapper -100% from it's current position and +100% when "back". The css div itself VideoWrapper has a width of 300%. Inside this div as you can see is a SlideShowItem which is what will change. Perhaps I am adding and subtracting 100% the wrong way?
EDIT:
Thanks everyone for helping me out with this...I had just one more query, I am trying to hide the arrows based on whether the wrapper is at the first slide or the last slide. If its on the first slide, then I'd hide the left arrow div and if it's on the last, I'd hide the right arrow, otherwise display both of em. Ive tried several ways to achieve this, but none of em work, so Ive resorted to using copies of variables from the function that works. Even then it does not work. It appears that my if and else if statements always evaluate to false, so perhaps I am not retrieving the position properly?
function HideArrows()
{
var wrapper2 = document.getElementById("VideoWrapper");
var offset_x2 = wrapper2.style.left;
if(parseInt(offset_x2,10) == max_x)
{
document.getElementById("NavigationForward").display = 'none';
}
else if(parseInt(offset_x2,10) == min_x)
{
document.getElementById("NavigationBackward").display = 'none';
}
else
{
document.getElementById("NavigationForward").display = 'inline-block';
document.getElementById("NavigationBackward").display = 'inline-block';
}
}
//html is the same except that I added a mouseover = "HideArrows();"
<div id = "ShowReelContainer" onmouseover="HideArrows();">
To achieve this type o slider functionality your div VideoWrapper must have overflow:hidden style, and your SlideShowItemdivs must have a position:relative style.
Then to move the slides forward or backward you can use the style left which allows you to move the divs SlideShowItem relative to it's parent VideoWrapper.
I've tested this here on JSFiddle.
It seems to work as you described in your question, although you may need to do some adjustments, like defining the width of your slides, how many they are and so on.
For the sake of simplicity, I defined them as "constants" on the top of the code, but I think you can work from that point on.
CSS
#VideoWrapper{
position:relative; height:100px; white-space:nowrap;width:500px;
margin-left:0px; border:1px solid #000; overflow:hidden; }
.SlideShowItem{
width:500px; height:100px;display:inline-block;position:relative; }
#NavigationForward, #NavigationBackward{
cursor:pointer;float:left; background-color:silver;margin-right:5px;
margin-bottom:10px; text-align:center; padding:10px; }
HTML
<div id = "SiteContainer">
<div id = "NavigationButtons">
</div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition('back');">prev</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition('forward');">next</div>
<div style="clear:both;"></div>
<div id = "VideoWrapper">
<div class= "SlideShowItem" style="background-color:blue;">
Slide 1
</div>
<div class = "SlideShowItem" style="background-color:yellow;">
Slide 2
</div>
<div class = "SlideShowItem" style="background-color:pink;">
Slide 3
</div>
</div>
</div>
</div>
JavaScript
var unit = 'px'; var margin = 4; var itemSize = 500 + margin; var itemCount = 3; var min_x = 0; var max_x = -(itemCount-1) * itemSize;
function setPosition(e) {
var wrapper = document.getElementById("VideoWrapper");
var slides = wrapper.getElementsByTagName('div');
var offset_x = slides[0].style.left.replace(unit, '');
var curr_x = parseInt(offset_x.length == 0 ? 0 : offset_x);
if(e == "forward")
{
if(curr_x <= max_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + -itemSize) + unit;
}
else if(e == "back")
{
if(curr_x >= min_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + itemSize) + unit;
} }
After you analyze and test the code, I don't really know what's your purpose with this, I mean, you maybe just playing around or trying to develop something for a personal project, but if you are looking for something more professional avoid to create things like sliders on your own, as there are tons of plugins like this available and well tested out there on the web.
Consider using jQuery with NivoSlider, it works like a charm and is cross browser.
I would recommend using jQuery, this will reduce your coding by quite a bit. Can read more here: http://api.jquery.com/animate/
I've created a simple fiddle for you to take a look at. This example uses the .animate() method to reposition two div elements based on the CSS 'left' property.
CSS:
#container {
position: absolute;
left: 1em;
top: 1em;
right: 1em;
bottom: 1em;
overflow: hidden;
}
#one, #two {
position: absolute;
color: white;
}
#one {
background: pink;
width: 100%;
top:0;
bottom:0;
}
#two {
background: blue;
width: 100%;
left: 100%;
top:0;
bottom:0;
}
HTML:
<div id="container">
<div id="one">Div One</div>
<div id="two">Div Two</div>
</div>
JavaScript/jQuery:
var one, two, container;
function animateSlides(){
one.animate({
left : '-100%'
}, 1000, function(){
one.animate({
left : 0
}, 1000);
});
two.animate({
left : 0
}, 1000, function(){
two.animate({
left:'100%'
}, 1000);
});
};
$(function(){
one = $('#one');
two = $('#two');
container = $('#container');
setInterval(animateSlides, 2000);
});
JSFiddle Example: http://jsfiddle.net/adamfullen/vSSK8/3/