I have a resizable and draggable box (grey in color). The box can be resized by stretching it from its corners.
Currently the box can be resized only by stretching from corners. I want to be able to resize it also from edges. Stretching from corners makes it scale uniformly across width and height. However, scaling across one edge, would scale it along length only. While, scaling it across another edge, would scale it along width only. How do I achieve that?
My code is here. /
HTML:
<div id="outer" style="background-color: yellow; width: 600px; height: 400px; margin-left: 40px; margin-top: 50px;">
<div class="draggable_div rot">
<div class="rotatable">
<div id="inner" class="resizable" style="background-color: #3C3C3C; width: 300px; height: 300px;">
</div>
</div>
</div>
</div>
<div id="x_and_y_of_inner">Left: , Right: </div>
JS:
$('.draggable_div').draggable();
$( ".draggable_div" ).draggable({
drag: function( event, ui ) {
var left_most_cordinates = $("#outer").offset().left;
var top_most_cordinates = $("#outer").offset().top;
$("#x_and_y_of_inner").text( "Left: " + left_most_cordinates + " Top: " + top_most_cordinates );
ui.position.left = Math.min( left_most_cordinates, ui.position.left );
ui.position.top = Math.min( top_most_cordinates, ui.position.top );
}
});
$('.resizable').resizable({
aspectRatio: true,
handles: 'ne, se, sw, nw'
});
$(document).on('mouseover', '.rot', function(){
var tc = $(this);
tc.rotatable({
handle:tc.children('.rotate.left, .rotate.right')
});
return true;
});
CSS:
.draggable_div
{
position: relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
cursor: hand;
cursor: pointer;
}
.resizable
{
width: 50%;
border: 1px solid #bb0000;
}
.resizable img
{
width: 100%;
}
.ui-resizable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
.ui-resizable-se
{
right: -5px;
bottom: -5px;
}
.ui-rotatable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
visibility: hidden;
}
I have a resizable and draggable box (grey in color). The box can be resized by stretching it from its corners.
Currently the box can be resized only by stretching from corners. I want to be able to resize it also from edges. Stretching from corners makes it scale uniformly across width and height. However, scaling across one edge, would scale it along length only. While, scaling it across another edge, would scale it along width only. How do I achieve that?
My code is here. http://jsfiddle/akashdmukherjee/sa44ks9u/4/
HTML:
<div id="outer" style="background-color: yellow; width: 600px; height: 400px; margin-left: 40px; margin-top: 50px;">
<div class="draggable_div rot">
<div class="rotatable">
<div id="inner" class="resizable" style="background-color: #3C3C3C; width: 300px; height: 300px;">
</div>
</div>
</div>
</div>
<div id="x_and_y_of_inner">Left: , Right: </div>
JS:
$('.draggable_div').draggable();
$( ".draggable_div" ).draggable({
drag: function( event, ui ) {
var left_most_cordinates = $("#outer").offset().left;
var top_most_cordinates = $("#outer").offset().top;
$("#x_and_y_of_inner").text( "Left: " + left_most_cordinates + " Top: " + top_most_cordinates );
ui.position.left = Math.min( left_most_cordinates, ui.position.left );
ui.position.top = Math.min( top_most_cordinates, ui.position.top );
}
});
$('.resizable').resizable({
aspectRatio: true,
handles: 'ne, se, sw, nw'
});
$(document).on('mouseover', '.rot', function(){
var tc = $(this);
tc.rotatable({
handle:tc.children('.rotate.left, .rotate.right')
});
return true;
});
CSS:
.draggable_div
{
position: relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
cursor: hand;
cursor: pointer;
}
.resizable
{
width: 50%;
border: 1px solid #bb0000;
}
.resizable img
{
width: 100%;
}
.ui-resizable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
.ui-resizable-se
{
right: -5px;
bottom: -5px;
}
.ui-rotatable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
visibility: hidden;
}
4 Answers
Reset to default 6You cannot achieve this if you want to preserve the aspect ratio. So basically when you remove that option from the resizable, you can use the corners to drag on any direction as per your requirement and scale it across height and width.
$('.resizable').resizable({
//aspectRatio: true, //ment or remove this
handles: 'ne, se, sw, nw'
});
DEMO
Do it simple, no need to plicate yourself with JavaScript. Usually the more simple the more it guarantees it will work on all browsers. Sometimes "Less is More" Just use this in your CSS and wallah it works.
.divName {
resize: both;
overflow: auto;
}
You can also use resize:horizontal; or resize:vertical; or resize:none;
As in example if you only want vertical resize but not horizontal:
.divName {
resize: vertical;
overflow: auto;
}
try this code , in this code i doing resizing from its edge:
HTML
<div id='resizeDiv'><div id='handle' class="ui-resizable-handle ui-resizable-s"></div>
</div>
CSS
#resizeDiv {
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid #CCC;
background-color: #FAFAFA;
}
#handle {
width: 100px;
height: 10px;
background-color: gray;
}
js
$(function() {
$( "#resizeDiv" ).resizable({handles: {'s': '#handle'}});
});
JSfiddle click here...
Just use css property resize and overflow:
div
{
resize: both;
overflow: auto;
}