I'm trying use jquery ui to scale
a div that I'm dragging around to make it easier to see what's behind it, but any
text inside it
is scaling strangely. The
text itself becomes smaller, but it seems to have
a bunch of padding around it and
is floating now. The
text extends past the bottom of the div even though it should be contained properly by the div. I put
a red border around the lines of
text and the borders are the same size as the original
text. I'm not really sure what to do to get
this to work...
HTML:
<div class="item draggable" id="item-1'">
<div class="image-block">
<a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove
this image?\');">X</a>
<a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
<div class="clear-block"></div>
</div>
<h3>Some title</h3>
</div>
CSS:
div.image-list div.item {
float:left;
background:#fff;
width:150px;
padding:5px;
margin:4px;
border:1px solid #d3d5d6;
}
div.image-list div.item h3 {
margin:0;
padding:0;
border:solid 1px #F00;
}
div.image-list div.item div.image-block
a.delete-button {
float:right;
position:relative;
background:#fff;
display:none;
top:0.8em;
margin-bottom:-20.0em;
width:3em;
height:1.8em;
padding:0.2em 1em;
}
div.image-list div.item div.image-block
a.image {
float:left;
display:block;
}
.clear-block {
clear:both;
}
jquery:
$(".draggable").draggable({
helper: 'clone',
start: function(ev, ui) {
$(ui.helper).effect( "scale", { percent: 50 }, 200 );
}
});
