Handle not visible when customizing resizable?
I sent this question earlier, but it never showed up on the list that
I could tell. Sorry if its a duplicate.
Can someone tell me if I change the handle on a resizable to be just
's', if I should actually see a handle on the south side of the div?
Everything works properly when I do this -- the mouse cursor changes
to an up/down arrow, I can resize the div only up/down from the bottom
edge, etc. The SW handle image goes away, which makes sense. But
there is no visual icon or handle added to the bottom of the div. Is
this the way it works?
I've downloaded jquery yesterday with all components and the "start"
theme in it. Then I copied the resizable sample, and just changed it
to use handles: 's'. See sample code below.
Thanks!
Tauren
<html>
<head>
<link type="text/css" href="jquery-ui-1.7.1/css/start/jquery-
ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.7.1/js/
jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1/js/jquery-
ui-1.7.1.custom.min.js"></script>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
animate: true,
handles: 's'
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Animate</h3>
</div>
</div><!-- End demo -->
</body>
</html>