How to activate elements at different points of scroll down page - javascript

I am trying to 'activate' or 'click' on different elements as the user scrolls down the page. I.e. as the user scrolls down the page, element 1 should deactivate and element 2 should activate. Then 2 should deactivate and 3 should activate. It is important that these elements get 'clicked' and not just have a CSS change.
It works on the first one (it clicks .no2 and the tab activates) but then as you scroll down, .no3 and .n04 don't click, so I assume once the first if statement is true, it no longer checks the next if statement.
Please see my code here:
<script>
$(function() {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('.no2').triggerHandler('click');
}
if (scroll >= 250) {
$('.no3').triggerHandler('click');
}
if (scroll >= 300) {
$('.no4').triggerHandler('click');
}
});
});
</script>

You can use libraries to help you achieve it easily try AOS
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
Else you can use Intesection Observer
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer

Related

Load More Content - Remove Load More Button or Change Load More to Load Less

Have 8 rows showing with a button to load 8 more.
Trying to adjust button so when it reaches the end of showing all expandable divs (8 at a time), "Load More" button would change to "Load Less" and collapse upwards 8 at a time until it reaches its original load of just 8 boxes.
codepen with HTML/CSS/Javascript is here.
If possible, is there a way to adjust the JS so that:
The button adjusts from "load more" to "load less" instead of showing "No Content" which it does now?
The current JS can be found on the Codepen but also here:
$(document).ready(function(){
$(".content").slice(0, 8).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 8).slideDown();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
Thanks!
I would do something like this. Use a class to determine if showing or hiding and change the classes depending on how many boxes are being shown
$(document).ready(function(){
$(".content").slice(0, 8).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
if (!$(this).hasClass('less')){
// More Mode
$(".content:hidden").slice(0, 8).slideDown('400', function(){
// this runs after animation is finished..
if($(".content:hidden").length == 0) {
// All being shown, switch to Less Mode
$("#loadMore").text("Load Less").addClass("less");
};
});
}else{
// Less Mode
l = $(".content:visible").length;
$(".content:visible").slice(l-8, l).slideUp('400', function(){
// this runs after animation is finished..
if($(".content:visible").length == 8) {
// Only the original are shown, switch to More Mode
$("#loadMore").text("Load More").removeClass("less");
};
});
};
});
});
Note: 400 is the default slide up/down speed

jQuery scrollTop won't let me scroll after executed

I have a landing image, that has two functions - one is a click function that once the landing image is clicked it scrolls down to reveal the next section. The second function is a scroll function, where the user scrolls/ swipes down and the scroll is hijacked to the next section. Once one of these functions is activated the landing image is hidden and cannot be seen again until a new tab is opened.
I have the click and scroll function working, the issue is once the scroll effect is finished I cannot resume scrolling the rest of the page.
I realize that the scroll function may still be running which is keeping the scroll at the top, but do not know what to add to my code?
Additionally, I am using the Divi theme, so difficult to add HTML markup
(function ($) {
$(document).ready(function () {
let header = $('.cf_bal-header');
let page = $('html, body');
// Check for first timers
if (!sessionStorage.returnVisitor) {
// No flag, this is the first visit.
// Set a flag so that next time we know they have been here before.
sessionStorage.returnVisitor = 'true';
// Handle Hero image click.
$('.cf_news_link').click(function () {
$(page).animate({
scrollTop: $(".news").offset().top
}, 1000);
return false;
});
// Handle scrolling (this is our scroll jacker)
$(window).on('scroll', function () {
if ($(page).animate({
scrollTop: $(".news").offset().top
}, 1000));
return false;
});
} else {
// Not our first time, hide header.
header.hide();
}
});
})(jQuery);

jQuery scroll to next element via up/down buttons - how to add handling for manual scrolling that would otherwise confuse this?

I am trying to implement two static buttons for navigating up or down between about 10 containing div tags on a single fairly deep page of content.
I want the buttons to smoothly scroll to the next part of the page (next containing div) whenever they are clicked on.
The problem with this solution is that if you manually scroll up and down the page using the browser scroll bar or the mouse wheel then the logic of the code is not aware of this and when you next click next/prev a scroll takes place that is not actually relevant to the viewable area you see, totally ruining the user experience.
You can test this in this demo: http://jsfiddle.net/aVJBY/ . If you click NEXT once it works. Now scroll down to near the bottom of the content and click PREV. In theory the page should go one step back from the bottom of the page. Instead it returns to the top of the page.
Maybe I just need to scrap this code and use some external library which is fine, but I can't find anything appropriate. Anyone have an idea on how to make my code resolve this issue?
The code I am using so far is here:
$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if (t === 'next' && $('.current').next('div.section').length > 0) {
var $next = $('.current').next('.section');
var top = $next.offset().top;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top
}, function () {
$next.addClass('current');
});
} else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
var $prev = $('.current').prev('.section');
var top = $prev.offset().top;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top
}, function () {
$prev.addClass('current');
});
}
});
I resolved this with the wonderful jQuery inview plugin - https://github.com/protonet/jquery.inview An overview of what I did follows...
I first setup some variables, the pageItems array contains all the divs I need to monitor...
var posNext=0;
var posPrev=0;
var pageItems = ["pageone", "pagetwo", "pagethree", "pagefour", "pagefive"];
I then setup the following in document ready. Thanks to the inview plugin and the jQuery bind event, on a page scroll (of any kind, either by my buttons, manually or via mouse wheel) the plugin is run. I first search the array of page items for a match with what is returned by the $(this).attr("id") value. I then adjust the posNext/posPrev variables with values based on the current div in view.
$(document).ready(function (){
$(".divclass").bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
matchPos = pageItems.indexOf($(this).attr("id"));
// Determine prev/next positions now we have an index. The position values used in click events later
if ( (matchPos+1)==pageItems.length ){
posNext=matchPos;
posPrev=matchPos-1;
}else if (matchPos==0){
posNext=matchPos+1;
posPrev=0;
}else{
posNext=matchPos+1;
posPrev=matchPos-1;
}
} else {
// dont update index
}
});
});
Finally also within document.ready I have binds to catch clicks on the buttons I have on screen all the time. These use a jQuery animate call to scroll to the div id value specified via the array index values in posNext/posPrev.
$(".down-button").click(function(e){
event.preventDefault();
$('html, body').stop().animate({
scrollTop: $("#"+pageItems[posNext]).offset().top
}, 500);
});
$(".up-button").click(function(e){
event.preventDefault();
$('html, body').stop().animate({
scrollTop: $("#"+pageItems[posPrev]).offset().top
}, 500);
});

display div when "element" reaches top of page

I am new to jQuery, I built this page and what I would like to happen is when a block e.g. 2011 1 October reaches the top of the page it displays the content for that specific div via the id or date-attr.
When you click on a date it will display the content for that date but I would like it to appear once that date block reaches the top of the page.
I have looked around the net but no luck thus far.
Use scroll event to make checks for divs you are interested in - assing class for them for instance.
http://api.jquery.com/scroll/
In that event callback you can check each elements position
http://api.jquery.com/each/
To determine position element on page use
http://api.jquery.com/offset/ - top component
But don't take this value - you need to substract Window scroll position which is returned by
$(window).scrollTop()
And make some border values when element should be opened and when closed.
As per your description that I understood, you will have to add one line of code to your "main.js" file.
// javascript + jquery scripts
// script for fading in content boxes -->
$(".square").on("click", function() {
var id= $(this).attr("contentId");
//$("#details");
$('#details').fadeOut('slow', function() {
$(this).html($("#" + id).html()).fadeIn('fast');
});
});
// active link -->
$(".square").click(function() {
$(".square").removeClass("active");
$(this).addClass("active");
$("html, body").scrollTop($(this).position().top); // THIS IS THE LINE TO BE ADDED TO SCROLL TO THE CURRENT DATE ITEM
});
// fade in main content div / intro
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 10) {
$('.topBlock').fadeOut();
} else {
$('.topBlock').fadeIn();
}
});
// hide intro text onClick on list
$( "li" ).click(function() {
$( ".topBlock" ).hide().animate();
});
var viewportHeight = $(window).height();
//$j(".parallax_section_holder").css("height",$j(window).height()-116);
//alert(viewportHeight);
I hope I have solved your issue, and if not, then please provide me the exact code link in jsfiddle.
Regards.

Button link to different ID with scroll

I'm trying to make a single down arrow that jumps to the next ID on the page as you scroll down. I don't really know JavaScript so I'm trying to keep it as simple as possible. I thought, as there are only a few sections, that I could just hide and display different divs with arrows that have different targets. I used two different codes to arrive at this, but doesn't seem to be working. Any ideas?
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() >= 800) {
var elem = document.getElementById("arrow");
elem.setAttribute("style","display:none;");
} else {
elem.setAttribute("style","display:inline;");
}
});
</script>
I'm not sure I understand exactly what you want to do, but your code can be simplified a bit by taking advantage of the shortcuts that jQuery provides.
//When the document is ready...
$(function(){
//Select the arrow just once
var arrow = $("#arrow");
//Attach a scroll event to the window
$(window).scroll(function(){
//See what the scroll position is
var scrollPos = document.body.scrollTop;
//When the document has scrolled to a certain point or more, hide the arrow.
//Otherwise, show it.
if(scrollPos >= 800){
arrow.hide();
} else {
arrow.show();
}
});
});
Here's a brief demo of it in action: http://jsfiddle.net/Bt35Q/

Categories