Within this div, there is a horizontal list displaying all the alphabets. Below the list, there are blocks of names starting with each alphabet, with the header of each block matching the respective alphabet.
I am looking to add a class to the div containing the alphabet, which is a child of the div with the horizontal list.
If you visit this sample link, you will notice that as you scroll down, the current alphabet block will be highlighted in pink on the top horizontal bar.
To effectively track the position of the window scroll in relation to different sections of the document, you can compare the scroll position with each section.
$(document).ready(function(){
$(window).scroll(function(e){
var sp = $(this).scrollTop();
$('div[data-letter]').each(function(){
if(sp > $(this).offset().top-40){
$('#nav span').removeClass('active');
$('#nav span[data-letter="'+$(this).attr('data-letter')+'"]').addClass("active");
}
});
});
});
While this code works, there are significant improvements that can be made. It serves as a good starting point for your project. If you provide a MCVE demonstrating your attempts, we can offer more tailored assistance.
I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...
Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...
/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...
Forgive me for what may seem like a foolish inquiry, but I am unsure of how to search a string to determine if it includes a period. Here's what I have attempted: var text = "This is an example without a period. What next?" alert(text.search(".")); ...
Currently developing a C# MVC 4 app and aiming to integrate a notification system similar to Facebook's. I am considering implementing a table for each event to store notifications, then using AJAX calls every minute to fetch notifications for the cu ...
I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like ...
Utilizing html2canvas for the conversion of HTML elements into canvas images, I iterate through the HTML using .each to pass elements to html2canvas. Once an element is converted into a DataURL, it is added to an array called content. $('.itinerary- ...
While attempting to publish an update for my app, I encountered a strange error. Can anyone pinpoint the issue? (Note: Node.js is included) Error Message: Unexpected token < <script> console.log(process); let output = <h2 class="page- ...
My form contains a text input field and a checkbox. The text input must not be left empty when the form is submitted, which is why the required attribute is used. I want the form to be submitted every time the checkbox is clicked, while still maintaining ...
Storing the name "Uncle Bob's Organic" in the data-Iname attribute caused a retrieval issue, as it only retrieved up to "Uncle Bob". Here is the process used for retrieving the value from the data-Iname: var itemName = $(this).attr("data-Iname"); T ...
I am facing an issue with my AJAX process while trying to display the current value inserted in a new row of a table after successfully adding it to the database. I am unable to figure out how to echo or display the values. Immediate assistance is needed t ...
Every time PHP code is present in my file, the page appears blank and upon checking the source code, there are no tags visible on the page. However, once I remove the PHP code, the form displays correctly without any issues. <?php $title = $_POST[&apos ...
I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...
Here is the script in question: var d; $(".circle").click(function() { var id = $(this).attr('id'); var MyDiv1 = document.getElementById(id); var name = MyDiv1.innerHTML; $.get("url", function(data){ d=data; }); d=d ...
Despite my best efforts, I can't seem to figure this out. I've searched everywhere for a solution but no luck so far. Is there a way to automatically display the content from http://tympanus.net/Tutorials/CSS3ContentNavigator/index.html#slide-mai ...
I am presenting the following data in a table: <table class="neo-table"> <tr> <td>Day of final discharge home</td> <td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', ' ...
I'm trying to figure out how to hide the tooltip that appears when hovering over this element using Materialize CSS. <li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-pos ...
I attempted to incorporate a basic file upload feature with ajax and progress bar into my mvc 4.0 controller using VS2013 and .net Framework 4.5. Uploads under 4MB function correctly, but when attempting to upload files larger than 4MB, the Controller met ...
Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...
When using ng repeat in span, I encountered a word breaking into a new line. Here is the actual output: https://i.stack.imgur.com/k4c9k.png To style this, I implemented the following CSS: border: 1px solid #ECE9E6; border-radius: 3px; text- ...