efecto - jQuery UI redimensionable no funciona en absoluto

jquery ui tooltip

Question

Ok, aquí está el problema. jQuery Resizable simplemente no funciona en esta página: haga clic aquí

Pruébelo en el cuadro gris en la esquina superior izquierda.

Lo que quiero hacer es hacer que el shoutbox en el tamaño correcto cambie de tamaño. Pero no funcionó, así que intenté copiar todo desde la página de ejemplo de jQuery UI a la mía y probarlo. Así que agregué la caja gris de la misma manera que lo hicieron, usando incluso el mismo css, pero no funcionará.

Así es como se llaman las bibliotecas:

 <script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function() {
});
</script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type=''text/javascript'' src=''js/jqueryEasingMin.js''></script>
<script type=''text/javascript'' src=''js/jquery.imghover-1.1rc.js''></script>
<script type="text/javascript" src="js/shoutbox.js" ></script>
<script type="text/javascript" src="js/bbcode.js" ></script>
<script type=''text/javascript'' src=''js/jqueryLoader2.js''></script>

script dentro de la función de documento listo (como en el ejemplo):

 $(''#resizable'').resizable();

CSS de la caja gris:

<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>

Tuve que agregar los parámetros de posición y de índice z debido al diseño de mi sitio, pero eso no parece afectar nada.

E implementación:

 <div id="resizable"></div>

Creo que me estoy perdiendo algo realmente obvio aquí, pero no puedo verlo. Incluso lo intenté vinculando las bibliotecas de la interfaz de usuario jquery a un directorio local en lugar de utilizar los de google.

Realmente apreciaría un asentimiento en la dirección correcta. Gracias

Answer 1

Debe incluir el css proporcionado por jquery-ui cuando cree su descarga personalizada. Puede encontrar el archivo css en jquery-ui-1.8.21.custom / css / ui-lightness / jquery-ui-1.8.21.custom.css (si eligió el tema lightness). Aquí está el css para redimensionar:

.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;}

Answer 2

Se supone que debe haber esto justo después de llamar a jquery ui y css:

<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>

EDITAR: Además, debe incluir un tema para que funcione correctamente.

Answer 3

intente agregar esto:

<div id="resizable" class="ui-widget-content">