How to change mouse cursor in jQuery UI resizable plugin?
-
When you use jQuery UI resizable plugin the mouse cursor style can be as "e-resize" (2 arrows in opposite directions). But, how can we change it? I've tried this: $("#right-line").hover(function() { $(this).css("cursor", "crosshair"); }); And it doesn't work, that is the cursor is still "e-resize". Actually, I've made my own outer black div around the main div rectangle. That outer black div is like a thin border and has 8 small squares in top-left, top-right, bottom-left, bottom-right corners and top-center, bottom-center, left-center and right-center locations, which I want to use as my own handles. It means I don't want to allow "e-resize" cursor along the whole border of container, but only on my own squares. So, I need to control the cursor style in jQuery UI resizable plugin. I know I can change the original jQuery CSS file, but is there a way to achieve this programmatically? Thank you for any suggestion.
-
When you use jQuery UI resizable plugin the mouse cursor style can be as "e-resize" (2 arrows in opposite directions). But, how can we change it? I've tried this: $("#right-line").hover(function() { $(this).css("cursor", "crosshair"); }); And it doesn't work, that is the cursor is still "e-resize". Actually, I've made my own outer black div around the main div rectangle. That outer black div is like a thin border and has 8 small squares in top-left, top-right, bottom-left, bottom-right corners and top-center, bottom-center, left-center and right-center locations, which I want to use as my own handles. It means I don't want to allow "e-resize" cursor along the whole border of container, but only on my own squares. So, I need to control the cursor style in jQuery UI resizable plugin. I know I can change the original jQuery CSS file, but is there a way to achieve this programmatically? Thank you for any suggestion.
lets see; Resizable Plugin uses css classes to change cursor shape. see this:
/*!
* jQuery UI Resizable 1.8.20
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Resizable#theming
*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}you can select the element using the class and set the css for it
$('.ui-resizable-se').css("cursor", "crosshair");
Help people,so poeple can help you.