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.
Hey there! I'm currently working on a post form in jQuery with PHP. The form calls another page and retrieves the result as JSON from jQuery. For example, when I use jQuery to call a PHP page, I receive the following JSON data: <?php print '{ ...
In my project, I have a jQuery file and a PHP file. If the PHP file successfully completes the process, it returns the value 2 using `echo json_encode(2)`. I am able to catch this value in the jQuery file and display a string on an HTML div without any iss ...
I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...
My current challenge involves adding text to the TinyMCE editor using SELENIUM. I have successfully added text with the following code snippet: $('iframe').last().contents().find('body').text('401c484b-68e4-4bf2-a13d-2a564acddc04& ...
$(".btn-close").on('click', function () { alert('click'); var win = $(this).closest("div.window"); var winID = win.attr("id"); $(win).find("*").each(function () { var timerid = $(this).attr("data-timer-id"); ...
Suppose I have the following element on my page... <span data-function="DoSomething">Click</span> ... and then add the following to my page header... $(document).ready(function() { $('[data-function]').each(function() { ...
My frontend is built using Vue.js and is hosted on an nginx server in production. Here's a snippet of my nginx.conf configuration: server { listen 80; server_name localhost; root /usr/share ...
I am experiencing a strange issue with the jQuery code on my website. Surprisingly, the code works perfectly fine on jsFiddle but not when I run it locally. Both instances have the exact same code as I simply copied and pasted it. Can anyone provide insi ...
Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...
My Vue app is constructed using Webpack and includes a few basic computed properties, such as calculating the sum amount from input values. However, I now require the capability to replace the summation function with one stored in a separate file that is n ...
I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...
Looking for a solution to successfully load an external URI using uFrame. Currently encountering an "Access Denied" issue when attempting to do so on Firefox. Any suggestions? ...
I'm in need of assistance with a particular error I encountered. I was following an ecommerce example application and everything seemed to be going smoothly until I clicked on "Shop Now." At that point, I received the following message: Server Error T ...
I have a collection of data fetched from Web API 2.2 stored in an Angular array as objects. Each object represents a Client and includes properties like name, surname, and a collection of contracts assigned to that client. Here is the interface definition ...
I have developed a script that is designed to display the menu in a shaking motion and hide it as you scroll down. It functions properly when scrolling within the body of the webpage, but I am facing issues when attempting to do so with a div that has an o ...
My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...
After struggling to use jquery plugins for smooth motion with the div elements I'm working on, I've decided it's time to seek some assistance. I have a group of div elements that all share a class and I want them to move around the screen c ...
While trying to parse JSON data from a server, I came across a strange issue. The data consists of rows of data - essentially a list of lists - and it looks something like this: [[1,2,3],[4,5,6],[7,8,9]] When viewing the JSON data in FF (using Firebug), ...
I am currently developing a yearly chart, but I've encountered a small issue. The chart begins in January, however there is no data available until May. The client specifically wants the chart to only display when there is data available, and unfortu ...
Currently, I am working on a bootstrap website that features a slideshow with 3 photos. The jQuery function responsible for this is as follows: $(function () { $.vegas('slideshow', { backgrounds: [{ src: 'img/ph1.jpg ...