I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to use the window.pageYOffset property, however, it only changes the cursor to a pointer and does not revert back to the default cursor when scrolling stops.
Any assistance in resolving this problem would be greatly appreciated.
Check out the demo. Utilize hostlistener to achieve this functionality.
class="casa";
private timeout: number;
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll(event) {
this.class = "hand";
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.class = "casa";
}, 300);
}
You can also apply custom CSS properties to your classes:
.hand{
cursor:pointer;
}
.casa{
cursor:default ;}
Lastly, make sure to add the event to your HTML element like so:
<div class="{{class}}"(scroll)="onScroll($event)" </div>
Here is a snippet you can use to change the cursor on scroll:
let timer = null;
window.addEventListener('scroll', function() {
document.body.style.cursor = 'all-scroll';
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
document.body.style.cursor = 'default';
}, 150);
}, false);
I've been trying to work on this issue using React and local host, but it keeps showing the direct file instead of the website. I've been stuck on this problem for the past 3-4 hours and still haven't been able to find a solution. I'm h ...
Below is a BootstrapVue table I'm working with; The code, courtesy of this response, is showcased below; new Vue({ el: '#app', data() { return { filter: '', items: [ { id: 1, first_name: "Mikkel&qu ...
Currently, I am utilizing the following pattern for email validation var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3 ...
One scenario I encounter frequently is the need for a button in a layout to toggle something within the components it contains. For instance, you might have a notifications button in a fixed layout that triggers a side panel to open in the main application ...
I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...
Here is an example of HTML with CSS classes that float elements left and right: <div class="block-footer"> <button class="medium float-left">A</button> <button class="medium float-left">A</button> <button class="m ...
I'm really stuck and could use some assistance with the following issue, as I am unable to solve it on my own :( When a user is redirected to a form (provided via an iframe), there is a dynamic URL involved: website.com/form?id=123 The code resp ...
In my JavaScript component, I have a simple exporting statement: ./component/index.js : export const t = 'string value'; This component also has a TypeScript definition file: ./component/index.d.ts : export const t: number; A very basic Typ ...
I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...
Currently, I am delving into the API first architecture in order to implement it on a web application. I came across some valuable insights regarding this topic on Advantages of a separate REST backend API? Provided below is an example to facilitate a bet ...
I'm interested in plotting a single series with two synchronized y-axes that display different units, such as °F and °C temperatures. I want the data to be readable from both axes, but only one set of points should be plotted. Here are some approac ...
Hello, I have reviewed similar questions regarding the issue I am facing with developing an API. Despite trying different solutions, none seem to resolve my problem. When handling request and response payloads in my API, everything seems to be working fin ...
I am having an issue with AngularJS's one-time binding feature using the :: expression. Despite my code setup, the values are still changing. I must be missing something crucial here. Consider this controller: $scope.name = "Some Name"; $scope.chang ...
After completing a node.js server installation, I verified the command prompt by running node --version Despite these steps, I encountered issues trying to start npm. ...
Currently, I am in the process of integrating a GTM snippet into my Angular project. However, I have noticed that when the page is hard reloaded, it pushes data but does not do so during normal navigation. I have already added the GTM snippet provided by ...
Is there a way to retain and add information to an Error object in typescript/javascript without losing the existing details? Currently, I handle it like this: try { // code that may throw an error } catch (e) { throw new Error(`Error while process ...
After setting up Node.js and installing the latest version of Express 3.4.1, I started coding. However, when trying to send parameters other than /, I encountered an error. In my index.js file, I have the following code: exports.speakers = function(req, ...
Greetings! I am currently working on an angular js application. One issue that I have encountered is when I run the application and open the debugger by hitting F12, I notice that for every page it continuously calls a certain function and seems to stop th ...
I am trying to create a flexible length display using bxSlider. Here is the code I have so far. JS var duration = $('ul > li > img').data("bekleme"); $(document).ready(function () { $('.bxslider').bxSlider({ ...
Here is the current appearance of the cross button in IE/Edge: And here is how it is supposed to look: Upon inspecting the CSS, it reveals that the #10006 html character has a color code of FFF: I am seeking assistance on how to remove the black border ...