When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place.
When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place.
To customize the cursor style, use the following code:
$(function() {
$( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});
For more detailed instructions, visit this link.
If you're looking for a pure CSS solution, consider using the CSS :active pseudo-selector/pseudo-element. You can see a demo using div:active here.
If that doesn't work, you can always turn to jQuery to add a selector. It's not entirely clear if .click() requires both pressing and releasing the mouse button, so I recommend using mousedown().
$('#divIDOrClass').mouseup(
function() {
$(this).removeClass('active');
}).mousedown(
function() {
$(this).addClass('active')
});
You can check out a demo of the jQuery approach here.
Just so you know, the reason why :focus didn't work is because it's usually used for elements that have keyboard or other input focus, like form inputs and hyperlinks.
Have you explored the cursor feature in the draggable section?
//Utilizing the css cursor while dragging.
//Examples of code
//Setting up a draggable with a specified cursor option.
$( ".selector" ).draggable({ cursor: 'crosshair' });
//Retrieve or update the cursor option post initialization.
//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
Here is an alternative approach for a "pure CSS" solution (although technically still utilizing jQuery UI): take note of the ui-draggable-dragging class that is applied to the element during dragging. A simple CSS rule like this can be used:
.ui-draggable-dragging {
cursor: move;
}
You can test it out here. Alternatively, Robert's suggestion involving the use of the cursor option should also work effectively.
I am currently in the process of scraping a website that dynamically loads content using JavaScript. My objective is to create a Python script that can visit a site, search for a specific word, and then send me an email if that word is present. Although I ...
Encountering something new while working with Node.js - a unique way of declaring functions. You can find an example at this link. 'use strict'; const Actions = { ONE: 'one', TWO: 'two', THREE: 'three' }; clas ...
I am working on a website that utilizes jQuery. The structure of my page is as follows: <div id="page"> <!-- Content goes here --> <div id="content"> <div class="row"> <div class="col"><!-- content goes here ...
I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...
Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...
I'm curious about how to accomplish this using JQuery. I have a menu where each item must have a unique class name in order for the CSS to properly display a sprite background position shared by all items. When an item is clicked, I also need to activ ...
My burning question of the day is: which loads faster, a web page designed from static html like this: <html> <head> <title>Web page</title> </head> <body> <p>Hi community</p> </bo ...
After authenticating and fetching data from a 3rd party API in my Laravel Controller, I'm encountering an issue where 'undefined' is being logged in the console instead of the actual data that I want to store in a Vue component. I've t ...
I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking ...
Take a look at this code snippet on JSFiddle: https://jsfiddle.net/reko91/998woow6/ The issue I am facing with my project is that every time I add an element to an array, it ends up overwriting all the existing elements with the newly added one. To repli ...
**Background:** I have been utilizing lodash to eliminate the empty key from my JSON data. However, upon removal of the keys, it transforms my array into an object. For instance: { "projection": "Miller", "series": [ { "mapPolygons": { ...
I'm currently facing a challenge with my app that utilizes MongoDB as its database. Specifically, I am having trouble extracting property values from array variables. Despite using a _.forEach method to confirm the presence of data, I encountered diff ...
With regards to marking this as answered by another question, please take note that this is not a flat array but an array of arrays. Additionally, the numbers provided are just examples for visual representation. I am attempting to iterate through an arra ...
For a recent client project, I utilized basic HTML and CSS. However, the client expressed a desire for Glyphicons to be included in the website menus. Attempting to incorporate Glyphicons with Bootstrap CSS posed challenges as it affected other aspects of ...
On my website, I rely on using jquery and custom scripts that are stored in Site Assets. As a member of the "Designer" and "Owner" groups, everything functions smoothly for me. However, regular users encounter errors such as "$" is undefined. Could it be ...
I'm struggling to figure this out, as I am new to classic ASP and JavaScript. I hope someone can help me understand. I want to display the response.write on the main.asp (or the result) page, but each time I try, it redirects to pass.asp on a differen ...
Here is a React state: const [filterByInvoiceNo, setFilterByInvoiceNo] = useState( 0 ); This represents a React Material TextField: <TextField size="small" type="number" label="Invoice No&quo ...
I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...
I am looking to create a web application that can be extended by other developers with their own applications. Would using iFrames, similar to how Facebook does it, be the best approach? Is this considered a good practice in web development? Are there a ...
I am struggling with organizing a tree structure. :( My goal is to create a tree structure based on the interface below. export type Tree = Array<TreeNode>; export interface TreeNode { label: string; type: 'folder' | 'file'; ...