On my webpage, I have multiple divs containing posts. Each post is numbered based on its id like:
<div id=post-id>
I attempted to create a reading bar that expands when hovering over a post's div element
similar to this example
However, my challenge now is figuring out how to select a div by scrolling the window to it rather than hovering.
Take a look at this.
Feel free to explore the JsFiddle link
$(document).ready(function() {
function updateBar(e) {
var number = $(e).data('id');
total = $("#content .post").length, $("#navigation .p").text("Post:" + number);
$(".processreading").width(Math.ceil(number / total * 100) + "%");
}
$('#navigation .p').hide();
$('div.post').hover(function() {
$(this).css("background", "#DDD");
updateBar(this);
}, function() {
$(this).css("background", "#FFF");
});
var page1OffsetTop = $('#post-1').offset().top - 40;
var page2OffsetTop = $('#post-2').offset().top - 40;
var page3OffsetTop = $('#post-3').offset().top - 40;
var page4OffsetTop = $('#post-4').offset().top - 40;
var page5OffsetTop = $('#post-5').offset().top - 40;
var page6OffsetTop = $('#post-6').offset().top - 40;
$(window).scroll(function() {
var yValue = $(this).scrollTop();
if (yValue >= page6OffsetTop) {
$('#post-1').css("background", "#FFF");
$('#post-2').css("background", "#FFF");
$('#post-3').css("background", "#FFF");
$('#post-4').css("background", "#FFF");
$('#post-5').css("background", "#FFF");
$('#post-6').css("background", "#DDD");
updateBar($('#post-6'));
} else if (yValue >= page5OffsetTop) {
$('#post-1').css("background", "#FFF");
$('#post-2').css("background", "#FFF");
$('#post-3').css("background", "#FFF");
$('#post-4').css("background", "#FFF");
$('#post-5').css("background", "#DDD");
$('#post-6').css("background", "#FFF");
updateBar($('#post-5'));
} else if (yValue >= page4OffsetTop) {
$('#post-1').css("background", "#FFF");
$('#post-2').css("background", "#FFF");
$('#post-3').css("background", "#FFF");
$('#post-4').css("background", "#DDD");
$('#post-5').css("background", "#FFF");
$('#post-6').css("background", "#FFF");
updateBar($('#post-4'));
} else if (yValue >= page3OffsetTop) {
$('#post-1').css("background", "#FFF");
$('#post-2').css("background", "#FFF");
$('#post-3').css("background", "#DDD");
$('#post-4').css("background", "#FFF");
$('#post-5').css("background", "#FFF");
$('#post-6').css("background", "#FFF");
updateBar($('#post-3'));
} else if (yValue >= page2OffsetTop) {
$('#post-1').css("background", "#FFF");
$('#post-2').css("background", "#DDD");
$('#post-3').css("background", "#FFF");
$('#post-4').css("background", "#FFF");
$('#post-5').css("background", "#FFF");
$('#post-6').css("background", "#FFF");
updateBar($('#post-2'));
} else if (yValue >= page1OffsetTop) {
$('#post-1').css("background", "#DDD");
$('#post-2').css("background", "#FFF");
$('#post-3').css("background", "#FFF");
$('#post-4').css("background", "#FFF");
$('#post-5').css("background", "#FFF");
$('#post-6').css("background", "#FFF");
updateBar($('#post-1'));
}
if (yValue > 50) {
var num = $('div.post').data('id');
$('.bar-container').show();
$('#main').hide();
$('#navigation .p').show();
} else {
$('.bar-container').hide();
$("#main").show();
$('#navigation .p').hide();
}
});
});
I hope you find this information useful.
Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...
I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...
I have developed an API using spring boot with dependencies such as spring web, JPA, jstl, and MySql. The API includes a Controller, Model, and Repository for performing CRUD operations. In addition to this, I have created a client to consume the API. When ...
I am attempting to display some links using the ReactMarkdown library within a React component, but in order to achieve a specific styling, I need to pass certain props. The Links component is a styled component that I am using to style the paragraph prop ...
Is there a way to modify the color of an image using CSS? I typically use the following code to achieve this effect: filter: hue-rotate(339deg) brightness(1); However, this method has its limitations. For instance, if the image is predominantly black, th ...
I am currently exploring the functionality of ngAnimate. In order to implement ngAnimate, I have included angular-animate.js, animate.css, and angular 1.3 in my project. To activate ngAnimate, I added it to my app configuration and also included some CSS ...
Uncertain of the appropriate query, but I will attempt to elucidate in my current operational code: var container, loader switch(section){ case 'A': container = $('#list .container') loader = $('#surveylist&apo ...
I've created a form, but when I hit the submit button, an error pops up, and I can't figure out what's causing it. <div class="status alert alert-success" style="display: none"></div> <form name="contactform" method="post" ...
I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8. When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes: ...
I am facing a height problem of 100% <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Dreamweaver Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <section clas ...
I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...
I am trying to implement Bootstrap's pagination feature into my project. While I was able to find the HTML code for it on the official Bootstrap page, I am struggling to make the content change dynamically when I move to the next page. Can anyone pro ...
This section shows the current navigation bar item https://i.sstatic.net/6RAGJ.png This is the desired outcome when clicking on the tab https://i.sstatic.net/8nFeB.png Uncertain about the best approach for achieving this. I have attempted to submit a val ...
When applying opacity to a parent div, I noticed that it also affects the child div. My intention is to only apply opacity to the parent div. I have set up separate divs for this purpose. <div id="container" style={{backgroundImage:"url('/images ...
Currently, I am integrating the react-datepicker plugin into my project alongside Bootstrap 3. Upon implementation, I have noticed that the size of the datepicker on my website appears to be smaller than the examples provided in the plugin demos. It seems ...
I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...
I'm attempting to position two icons next to the close button within a Bootstrap 4 modal. Unfortunately, I am struggling to remove some unwanted margin-left that persists despite my best efforts. While inspecting the element, I was successful in achie ...
I managed to set up a button that works on click with a delay, making it semi-automatic. However, I'm struggling with getting it to not pause after just one click. Here's what I have so far: <!DOCTYPE html> <html> <body> &l ...
After following this guide, I attempted to recreate the photo grid with some spacing between the images. Changing the column-gap property to 3px did add horizontal space, but is there a way to include vertical gaps as well? Any suggestions or solutions wou ...
Here is the code snippet in question: var msg=''; var values = []; $('.selectedoptionselect option:selected').each(function() { if ($(this).val() > 0){ var selected=$(this).val(); values.push(selected +',&ap ...