Javascript scroll to element - javascript

I am trying to make a little slide menu. Each slide is 100vh and I want to scroll to each slide with my menu.
I did the query and the listeners and now I try to make each click go to the right #slide.
The number of slides will be dynamic.
I am not a javascript superhero so I hope I started all good !
Thanks in advance for your help and advices.
let sections= document.querySelectorAll('.slide')
let nbrMenuLinks = sections.length;
for(i = 0; i < nbrMenuLinks; i++) {
const li = document.createElement('li');
li.className = 'scroll-item';
li.id = 'btn'+(i+1);
li.appendChild(document.createTextNode((i+1)));
document.querySelector('#slide-menu').appendChild(li);
li.addEventListener('click', ()=> {
window.scroll(0,findPos(document.getElementById(`slide3`)));
});
}
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
<ul id="slide-menu"></ul>
<div id="slide1" class="slide">
<h2>Slide 1</h2>
</div>
<div id="slide2" class="slide">
<h2>Slide 2</h2>
</div>
<div id="slide3" class="slide">
<h2>Slide 3</h2>
</div>
<div id="slide4" class="slide">
<h2>Slide 4</h2>
</div>

Thanks, now it works, I just need to access to the ID of the slide dynamically...

Related

preview all swiper slides as grid when i click

i want to make a slider with a filter, fullscreen, and grid view
i made the first two with this code and it's working well but when i start to make grid button the stuff got missy
<section class="work-gallery">
<h2>
<span>our</span><br />
work gallery
</h2>
<div class="filters">
<span class="filter" data-filter="filter1">El Capitan</span>
<span class="filter" data-filter="filter2">Half Dome</span>
<span class="filter" data-filter="filter3">Taft Point</span>
</div>
<div class="galler swiper">
<div class="swiper-wrapper galler-wrapper">
<div class="swiper-slide galler-slide" data-filter="filter1">
<img src="/asset/img/event.jpg" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter2">
<img src="/asset/img/header.jpeg" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter3">
<img src="/asset/img/services.png" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter1">Slide 4</div>
<div class="swiper-slide galler-slide" data-filter="filter2">Slide 5</div>
</div>
<div class="fulscreen">
i'm full
</div>
</div>
</section>
and that's my jq code
jQuery(document).ready(function(){
var swipergaller = new Swiper('.galler', {
slidesPerView: 1,
slidesPerGroup: 1,
});
// Filter spans
var filters = document.querySelectorAll('.filter');
for (var i = 0; i < filters.length; i++) {
filters[i].addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
swipergaller.params.filter = filterValue;
swipergaller.update();
showSlidesFromSelectedFilter(filterValue);
removeActiveClass();
this.classList.add('active');
});
}
function removeActiveClass() {
for (var i = 0; i < filters.length; i++) {
filters[i].classList.remove('active');
}
}
function showSlidesFromSelectedFilter(filterValue) {
var slides = document.querySelectorAll('.galler-slide');
for (var i = 0; i < slides.length; i++) {
if (slides[i].getAttribute('data-filter') === filterValue) {
slides[i].style.display = "block";
} else {
slides[i].style.display = "none";
}
}
}
});
$(document).ready(function(){
$('.fulscreen').click(function(){
$('.galler-wrapper').toggleClass('imbig');
$('.filters').toggleClass('filtergobig');
})
});
now i need to add a new button that when i click on it shows all selected slides from filter as gird and as i said i'm using swiper js

How to set a smooth scrolling to my JS navigation bar?

I have coded a nav bar using JS, I need to add a smooth scroll active when a user clicks on one of the section written in pure JS (and not CSS's smooth scrolling)
I was thinking something with scrollIntoView or scrollTo but each time I code it it either makes the navbar disappear or not work at all.
Here's my navbar code. Any help is appreciaited.
function navBar() {
const section = document.getElementsByTagName('section');
for (let i = 0; i < section.length; i++) {
let navBarUL = document.getElementById("navBarULID");
let link = `<a href='#' onclick="console.log(${i})" id='link_no${i+1}'> Section ${i+1} </a>`;
let newLI = document.createElement("li")
newLI.innerHTML = link
navBarUL.appendChild(newLI)
let j = i
}
for (let i = 0; i < section.length; i++) {
document.getElementById( 'link_no' + (i + 1)).addEventListener('click', function(e) {
e.preventDefault();
let allActiveLinks = document.getElementsByClassName('active-link');
for (let i = 0; i < allActiveLinks.length; i++) {
const element = allActiveLinks[i];
element.classList.remove('active-link');
}
Here's an HTML sample
<ul id="navBarULID"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1 id="p1">Landing Page </h1>
</header>
<section id="section1" class="your-active-class">
<div class="landing__container">
<h2 id="section1ID">Section 1</h2>
<p>test.</p>
</div>
</section>
<section id="section2" >
<div class="landing__container">
<h2 id="section2ID">Section 2</h2>
<p>test.</p>
</div>
</section>
<section id="section3" >
<div class="landing__container">
<h2 id="section3ID">Section 3</h2>
<p>test.</p>
</div>
</section>
use this CSS code
html { scroll-behavior: smooth; }

How can I reset my html image gallery to start with first image after leaving it?

I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on.
What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.
Code used for the galleries:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
I know a way to force show the first element, but it turns out it does that for all projects.
What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image.
I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.
If I'm following you correctly, the following should do it.
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
The best place to call it would probably be in the onclicks.
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"

Can we use event.target to transform (translateX) for every iteration

I want to add $(event.target) to translate my card for every iteration. Is that possible? What should I do?
I tried this way: $(event.target.i).css('transform', 'translate(300px)');
$(document).ready(function() {
var n = $('#move .card').length;
function addDot(i) {
var newDot = (`<span class="dot" data-index="${i}" id ="${i}" </span>`);
$('.myDiv').append(newDot);
$('#' + i).click(function(event) {
$(event.target.i).css('transform', 'translate(300px)');
});
}
for (let i = 0; i < n; i++) {
addDot(i);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card ">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png" alt="Avatar" style="width:100px">
<div class="containers">
<h2>Great Experience !</h2>
<button>Relax Plan</button>
<div class="contain">
<p>I found the servive very prompt. I would also suggest my friends to take this plan. I am going to suggest this to my friends as well</p><br>
<h3>Virat Kohli</h3>
</div>
</div>
</div>

How to target a specific slider using javascript when there is more than one

I have 3 sliders on my page I'm a building but i am just curious to know the best way to go about targeting only the active one so the javascript below would work for all of them. Everything seems to work fine if i disable the other 2 sliders. First time I have done something like this.
I'm guessing my javascript selectors may need to change some what to get it to work.
Appreciate any advice on the best way forward.
var sliderSlide = document.querySelectorAll('.slider__slide');
var nextSlide = document.querySelector('.slider__button--next');
var previousSlide = document.querySelector('.slider__button--previous');
var currentSlide = 0;
var currentSlideImg = 0;
//Reset slides
function resetSlides() {
for (var s = 0; s < sliderSlide.length; s++) {
sliderSlide[s].classList.remove('active');
}
for (var i = 0; i < sliderSlideImg.length; i++) {
sliderSlideImg[i].classList.remove('active');
}
}
//Start slides
function startSlide() {
resetSlides();
sliderSlide[0].classList.add('active');
sliderSlideImg[0].classList.add('active');
}
//Previous slide
function slidePrevious() {
resetSlides();
sliderSlide[currentSlide - 1].classList.add('active');
currentSlide--;
sliderSlideImg[currentSlideImg - 1].classList.add('active');
currentSlideImg--;
}
previousSlide.addEventListener('click', function() {
if (currentSlide === 0 && currentSlideImg === 0) {
currentSlide = sliderSlide.length;
currentSlideImg = sliderSlideImg.length;
}
slidePrevious();
});
//Next slide
function slideNext() {
resetSlides();
sliderSlide[currentSlide + 1].classList.add('active');
currentSlide++;
sliderSlideImg[currentSlideImg + 1].classList.add('active');
currentSlideImg++;
}
nextSlide.addEventListener('click', function() {
if (currentSlide === sliderSlide.length - 1 && currentSlideImg === sliderSlideImg.length - 1) {
currentSlide = -1;
currentSlideImg = -1;
}
slideNext();
});
<div class="slider slider--1 active">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--2">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--3">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
You can create loop over .slider and then use querySelector on each item, that way you will have variables for each slider
Array.from(document.querySelectorAll('.slider')).forEach(function(slider) {
var sliderSlide = slider.querySelectorAll('.slider__slide');
var nextSlide = slider.querySelector('.slider__buttons--next');
var previousSlide = slider.querySelector('.slider__buttons--previous');
...
});
or if you prefer for loop:
var sliders = document.querySelectorAll('.slider');
for (var i = 0; i < sliders.length; ++i) {
var slider = sliders[i];
...
}
document.querySelector('.slider--3 .slider__slide')
but I would recommend to put id's on your sliders and then select
document.querySelector('#slider--3')

Categories