Adding a Scroll to Next Element With the Same Class in jQuery - javascript

I am trying to add functionality of an arrow when clicked would scroll the user to the next section with a specified class. Each section would have the same class and an arrow with a class to target in jQuery. So I will have a few sections set up like this:
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
//And so on...
So there will be around 5 sections set up with this setup with the same classes for the section and the button. What I am trying to do then is when the button of a section is clicked it will then scroll to the very next section below it and that cycle will continue until you reach the last section and the end of the page.
I at first had it set up like so:
$(".downArrow--hero").click(function() {
$('html, body').animate({
scrollTop: $(".cardItems").offset().top
}, 1000);
});
And it would target each section based on a unique class, but I now need to set it up with each section having the same class. What would be my best approach to this?

Related

How can i continuesly using appenTo() when i click a button?

im trying to reverse div with Jquery which when i click a button the divs will reverse and switch place
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>Samsudin</h4>
</div>
<div class="cock 1a">
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>Joko</h4>
</div>
<div class="cock 1b">
</div>
</div>
</div>
<button class="btn btn-light score_plus" id="score_kiri"><h1>SCORE</h1></button>
whenever this button clicked the div p1b will move to div player1-a and so do div p1a will move to div player1-b.
Here's my jquery code that the divs only move once and dont move again when i click again.
$('#score_kiri').click(function() {
$('#player_kiri').val(i++);
$('.p1a').appendTo('.player1-b');
$('.1a').appendTo('.player1-b');
$('.p1b').appendTo('.player1-a');
$('.1b').appendTo('.player1-a');
$('.p1a').append('.player1-b');
$('.1a').append('.player1-b');
$('.p1b').append('.player1-a');
$('.1b').append('.player1-a');
});
Your issue is that you have hard-coded the elements to move, rather than use relative positions. Effectively saying "make it exactly like this" rather than "move the first one to the end" (which I believe is what you're trying to do).
You can select the first one various ways, here's one:
$(".player1 > div").first()
Using .appendTo(".player1") with this will move the element to the end - so by always moving the first to the end you get your "continuously appendTo". If you have 3, then first will move to the end each time.
This is slightly different from "switching places" but has the same effect when only 2.
Updated snippet:
$("#btn").click(() =>
$(".player1 > div").first().appendTo(".player1")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>p1a Samsudin</h4>
</div>
<div class="cock 1a">1a
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>p1b Joko</h4>
</div>
<div class="cock 1b">
1b
</div>
</div>
</div>
<button id=btn>
click me
</button>

Changing style of multiple objects using javascript

I am creating a website using WordPress, so the content is created dynamically.
The elements ID is also dynamically generated
Each container can have these elements (a container can have multiple - but not the same):
t_1
f_1
f_2
f_3
I also add the container count at the end of the elements ID, so each element will have a unique ID
Let's say the PHP will generate a HTML like this:
<div id="container_1">
<div id=f_1_1>
//content
</div>
<div id=f_2_1>
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2>
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3>
//content
</div>
</div>
I would like to animate the position of these elements as the user scrolls, I added javascript to do it:
var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
scroll = window.pageYOffset;
requestAnimationFrame(scroll)
}, false)
function scroll() {
document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}
So here is the problem, I don't know which elements should I get by ID.
I thought about making a loop where I check each container for the elements inside, however I think it would use too much resources and would be laggy as the function runs each time the user scrolls.
An other solution I tried is to add the javascript dynamically to each container so I know exactly which elements I need to animate. It worked only for the first container as when I added the next container there were multiple function using the same name and only the last function has been executed
<div id="container_1">
<div id=f_1_1>
//content
</div>
<script type="text/javascript">
function scroll() {
document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
}
</script>
</div>
You can use - WOW.js for animation when element is comes inside viewport.
<div id="container_1">
<div id=f_1_1 class="wow myCustomAnimation">
//content
</div>
<div id=f_2_1 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3 class="wow myCustomAnimation">
//content
</div>
</div>
Where you have to write myCustomAnimation as per your requirment.

Scroll to next class element

How can I get scroll to the next class element called section and vice versa?
Below are the code i have tried so far:-
<div class="section">
content
</div>
<div class="hero">
content
</div>
<div class="midPage">
content
</div>
<div class="section">
content
</div>
<!-- Scroll Buttons -->
<div class="prev">
<button class="prevButton">Prev</button>
</div>
<div class="next">
<button class="nextButton">Next</button>
</div>
Check this fiddle
I did it fast, only next button working, not the best approach.
Check the data- attributes and how is working, i repeat, this is not the best approach.
$(".nextButton").on('click', function(e) {
var dataGoTo = $(this).attr("data-section");
var next = $(dataGoTo).attr("data-next");
$('html, body').animate({
scrollTop: $(dataGoTo).offset().top
}, 500);
$(this).attr("data-section", next);
});

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Overriding preceding function in javascript

Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?
EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1

Categories