Hola, tengo un div donde le he aplicado el método resizable, funciona perfectamente, aparecen los cursores y el div escala sin problema.
Lo que quiero es que este div cambie de color nada más aparecer estos cursores, no encuentro por ningún lado un evento para poder llamar a una función en cuanto aparezcan estos cursores.
De esta forma:
Código Javascript
:
Ver original$("#midiv").resizable(
resize:function(){
cambio el color del div
});
Solo lo cambia en cuanto el div está redimensionando, y no en cuanto aparezcan los cursores.
A lo mejor lo tengo que hacer en los CSS, por ejemplo, tengo en mi hoja de estilos:
Código CSS:
Ver original.mydivclass {
background-color:gray;
}
..y luego está...
Código CSS:
Ver original.ui-resizable { position: absolute;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; 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: 20px; 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;}
¿hay alguna forma de hacer cambiar el color del div en cuanto aparezcan los cursores, supongo que hay que añadir algo al .ui-resizable-handle o quizás exista algún evento en jquery? No sé cómo hacerlo.
Muchas gracias por vuestra ayuda, un saludo.