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 have a PHP script called updater.php that performs a task for 1-2 minutes. It is crucial for the script to complete its job. While I can schedule it with cron, I have come up with an alternative solution. The script should only run at specific times wh ...
Currently working on implementing ngbTypeAhead and encountering problems with RxJS version 5.5.5. The example I am referencing is from version 6 of rxjs. "rxjs": "^5.5.2" and angular "^5.0.1", "typescript": "~2.6.1", While trying to apply typeahead on f ...
I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...
I am currently using Windows and WebStorm as my development environment. I attempted to install the angular2-localstorage package by running the command npm install angular2-localstorage, but encountered an error. After realizing that the angular2-localst ...
I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...
Lately, I've been crafting queries utilizing backticks const firstUser = await connection .getRepository(User) .createQueryBuilder("user") .where(`user.id = '${id}'`) .getOne(); However, in the typeorm documentatio ...
Is there a way to make the dropdown menu hide automatically after the mouse cursor leaves the area? If you take a look at Amazon.com for example, when you hover over "Shop by Department" and then quickly move your cursor away and back within about half a ...
Do you have a question? Imagine you have 3 spans where the default color is black. When you hover over a span, its color changes to red. But what if I told you that at the start, the first span has an orange color. Now, I want to hover over the orange on ...
Is there a way to change the onsubmit parameter of a form in an asp.net project, specifically from the master page code behind of a child page? I am interested in updating the form value so that it looks like this: <form id="form1" runat="server" onsu ...
I am working on a component called components.ts in my Angular project. My goal is to create a function that sorts an array based on counts, and then utilize the sorted data in my HTML to generate a chart. import { Component } from '@angular/core&apo ...
Struggling with toggling a menu item in AngularJS, unsure why it's not working. <div ng-controller="firstController as firstCtrl"> <button type="button" class="btn btn-default" aria-label="Menu" ng-click="firstCtrl.toggle(firstCtrl.navOp ...
After developing a custom library with components for an Angular 4 application, I encountered an issue where the CSS styling from the components was not being applied when using them in an application. Although the functionality worked fine, the visual asp ...
In this example: <?php $html='<p style="color:#eee;"> Test content 1. </p> <p dir="LTR" style="color:#f00;"> <span>Test content 2.</span> </p> <p style="color:#000;"> Test content 3. </p>' ?> ...
Here is my code that uses XMLHttpRequest: function SignUp() { signUpConnection = new XMLHttpRequest(); signUpConnection.onreadystatechange = processRegistration; signUpConnection.open('GET', 'index.php?registrarse=&username= ...
type x = 'first' | 'second' I am looking to create a type y that is similar to this: type y = 'FIRST' | 'SECOND' Here is what I attempted: type x = 'first' | 'second' type y = {[key in x]: key[& ...
I am in the process of dividing my app into multiple feature modules. Currently, I am using only the router-outlet inside a component within a feature module. However, this approach brings along all the static components such as the navbar and footer. How ...
const { resolve } = require("path"); const prompt = require('prompt'); const fsPath = require('fs-path'); // Retrieve files from Directory const getFiles = dir => { const stack = [resolve(dir)]; const files = []; whi ...
As I work on my Angular Application in VS Code, I keep encountering popups when opening the application. Despite this, the 'ng serve' command functions properly and successfully runs the app. However, I am noticing an error in the console with t ...
I'm in the process of creating a dashboard for discord.js, however, I am facing difficulties using the discord.js library and connecting it to the client. Below is my JavaScript code (The project utilizes node.js with express for sending an HTML file ...
Can you explain the functionality of template reference variables when the same variable name is used multiple times? What scoping rules apply when accessing this variable within the template? ...