Evento resizable al aparecer cursores en jquery

nomafeito · #1 (**permalink**) 04/02/2012, 09:28

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.

chicohot20 · #2 (**permalink**) 04/02/2012, 19:02

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
   $("#content").resizable();
   $("#content .ui-resizable-handle").hover(function(){
       $(this).parent().addClass("hover");
       },
       function(){$(this).parent().removeClass("hover");}
       )
});
 
</script>
<style>
#content { width: 150px; height: 150px; padding: 0.5em; }
#content h3 { text-align: center; margin: 0; }
.hover{background: #DDD;}
</style>
</head> 
<body>
<div id="content" class="ui-widget-content">
<h3 class=ui-widget-header>Resizable</h3>
</div>
</body>
</html>

nomafeito · #3 (**permalink**) 05/02/2012, 04:28

Ah!!! claro!!! tengo que conocer mejor los selectores.

!!!!!!!!!!!!!MUCHISIMAS GRACIAS!!!!!!!!!!!!!!!!!