Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve the desired effect. Any creative solutions would be greatly appreciated. Thank you!
Give this a shot
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin-top : 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll',function(){
var a = $(window).scrollTop();
//alert(a);
if( a > 50) {
$("p").css("textDecoration", "underline");
}
else {
$("p").css("textDecoration", "none");
}
});
});
</script>
</head>
<body>
<div>
<p>As you scroll, I'll underline myself.</p>
<p>As you scroll, I'll underline myself.</p>
<p>As you scroll, I'll underline myself.</p>
<p>As you scroll, I'll underline myself.</p>
</div>
</body>
</html>
You might also want to check out the example here.
Try using this code snippet to address your problem:
$(document).on("scroll", function(){
var topPixels = $(window).scrollTop(); //captures the number of pixels scrolled by the user
if(topPixels > 100){
//adds underline to the text when scrolling past 100px
$('.text').css('text-decoration','underline');
}
if(topPixels < 100){
//removes underline when user scrolls back below 100px
$('.text').css('text-decoration','none');
}
});
I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...
Take a look at my React component located in index.js: import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render() { return ( <div className="App"> <h1>Hello, ...
I am working on a code snippet to generate a list of unique random numbers. Each generated number is supposed to be added to an array after checking that it doesn't already exist in the array. However, I seem to be facing some challenges with getting ...
My HTML code displays dynamic rows with information, along with an image link that reveals specific details about the clicked row using the compentence_ID field. echo "<td>".$compi['Competence_ID']."</td>"; ec ...
What is the best way to convert this to jQuery? showDish("balkandish1") function showDish(dishName) { var i; $(".city").css('display', 'none'); $("#" + dishName).css('display', 'block'); } ...
My current setup includes a canvas featuring a doughnut chart created with chart.js enclosed in a div element that displays like this: The canvas has a red background to enhance visibility. Currently, the chart is centered within the canvas with additiona ...
Experimented with the following code snippet from w3schools: Coding in index.html <!DOCTYPE html> <html manifest="demo_html.appcache"> <body> <script src="demo_time.js"></script> ...
Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...
Below is the code I have written: $(document).ready(function() { cookieanimalid =($.cookie("cookieanimal")); $.ajax({ type: 'POST', url: "/myurl/", data: {cookieanimalid}, success: function ( ...
I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...
My Express app is structured in the standard Express 4 format, with dependencies at the top, followed by app configuration, routes, and finally the listen function. I'm currently working on organizing my routes into categorized files (e.g., routes/au ...
Currently, I am experimenting with integrating a pre-built inline editor from the following source: https://github.com/wbotelhos/inplace Regrettably, the available support documentation is lacking and my expertise in Javascript, jQuery, or Ajax is limited ...
My table was automatically created using data from the database. var rows = ""; rows += "<tr class='row_primary'>"; rows += "<td>COL 1</td>"; rows += "<td>COL 2</td>"; rows += "<td> ...
When a link is clicked, I want to open a new window with content determined by a post to my MVC controller. Here's how I currently approach it: jQuery.ajax({ type: "POST", url: '/controller/mycontroller', data: { myd ...
Is it possible to dynamically add Angular's resolve after it has been initially defined in the app? Let's say we have a setup with routes like this: app.config(['$routeProvider', function ($routeProvider) { $routeProvider ...
One of the challenges I'm facing is getting a JavaScript script to load an HTML page into a specific div element on another HTML page: The page that's being loaded, startScreen.html, looks like this: <!DOCTYPE html> <html lang="en ...
Creating a mobile application utilizing MongoDB and express.js with the Node.js MongoDB driver (opting for this driver over Mongoose for enhanced performance). I am aiming to incorporate asynchronous functions as a more sophisticated solution for handling ...
After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...
Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...
I'm encountering a challenge while trying to preload images in an array for later use in drawing on a canvas, such as in a 2D top-down game board. Interestingly, one of these images (which are Greyscale GIFs, by the way) refuses to load. It's evi ...