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'm facing an issue where I am attempting to send a request from the server to the same server using axios as a PUT method. Here is an example of what I have tried: await axios({ url: `http://localhost:4000${url}`, method: requestType, ...
My react application performs perfectly when run locally and is successfully deployed on heroku. However, upon clicking any link from the home page to another page, a blank page with 'not found' message appears. No other error messages are displa ...
Everytime I try to access $scope.packgs, it shows as a $$state object instead of the array of objects that I'm expecting. When I console log the response, it displays the correct data. What am I doing wrong? This is my controller: routerApp.controll ...
I've successfully designed a polka dot background using pure CSS: .polka-gr{ background-image: radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0); background-size: 30px 30px; background-positio ...
Take a look at the first part of this code where we are using the variable $Tno. if(isset($_POST['submit'])) { $Tno=$_POST['Tno']; $query="SELECT * FROM docs WHERE Tno='$Tno'"; $result=mysql_query($query) or di ...
Having just started my journey with JavaScript and Google BigQuery, I am seeking help due to my lack of experience in these areas. My goal is to create a javascript code that can fetch data from one of the public databases on BigQuery. I came across a solu ...
After using a Regex pattern to check for every href="" in my document, I now want it to specifically target all hrefs located between <a and </a> tags while still allowing other parameters within. Do not include in the match: <base href="http ...
How can I restrict certain data from being displayed in an aldeed tabular datatable? For instance, if my collection includes attributes A, B, C, D and attribute C contains sensitive information that should not be published, is there a way to prevent it fro ...
Need help with returning the parameter of a Laravel route to an AJAX response. Here is the relevant code: public function getPermissions(Request $request) { //$v = request()->route()->parameters('profile'); $v = request()-& ...
Recently, I've been exploring options for adding a scroll pane to a window. Someone recommended jScrollPane, which seems promising. However, I'm curious if there are alternative solutions available, possibly using jQuery UI. Has anyone found any ...
Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...
Exploring the app directory within Next.js version 13, I came across a change in the official documentation where they have replaced the old head method with metadata. Initially, I thought this feature was only available on page or layout components. Now, ...
Having trouble navigating from the login screen to the profile screen after email and password authentication. All other functions are working fine - I can retrieve and store the token from the auth API. However, when trying to navigate to the next screen, ...
function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...
I am facing a challenge with decoding html that is in json format. I'm struggling to figure out how to retrieve my html and display it on a page. It seems like json_decode isn't the solution. Can anyone help me with this issue? Appreciate any as ...
I need assistance with a data format related issue. The current format of the data is being set by someone else in the backend of the application. When the data is empty, it looks like this: "opening_time":{"Mon":[["0"],["0"]], "Tue":[["0"],["0"]], "Wed" ...
I recently created a single page and noticed that there is a significant amount of unused JavaScript in my codebase. Specifically, I am using MUI and React icons. Any suggestions on how to efficiently manage this issue? To address the problem, I attempte ...
Developed a leaflet map featuring markers that open popups when clicked. Also integrated a search bar for marker searchability. However, encountering an issue where each popup can only be opened once and on selecting a marker name, the zoom functionality w ...
Below is the XPATH I am using to extract price information from various websites, except for Myntra. This XPATH works perfectly on my local Windows system with Selenium, Python3 version, and Chrome driver. Driver path: driver = webdriver.Chrome("/usr ...
How can I output the absolute URLs of images in a browser window (e.g., 'www.mysite.com/hello/mypic.jpg')? Below is a snippet of my code: $('img').each(function() { var pageInfo = {}; var img_src = $(this).attr('s ...