Menu
I need to make resizable handles like in this image.
To be more specific, I need those blue dots to be around my <div> to allow resizing from different sides.
Currently I'm using the following code:
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.10.2/themes/base/jquery-ui.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<title>border</title>
<script type="text/javascript">
$(function() {
$('#elementResizable').resizable({
handles: {
'ne': '#negrip',
'se': '#segrip',
'sw': '#swgrip',
'nw': '#nwgrip'
}
});
});
</script>
<style>
#elementResizable {
border: 1px solid #000000;
width: 300px;
height: 40px;
overflow: hidden;
}
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
#segrip {
right: -5px;
bottom: -5px;
}
</style>
</head>
<body>
<div id='elementResizable'>
<h1>Full Name</h1>
Title
<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
</div>
</body>
</html>
As a result i got something like this.
The result is OK, but I need to make the handles not only in corners, but also in the middle of the border, exactly like in the first image.
417
resizableadjective. That which can be resized.
This option is used to add a CSS class to style the element which you want to resize. When the element is resized a new <div> element is created, which is the one that is scaled (UI-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears.
Take a look at this fiddle: http://jsfiddle.net/j2JU6/256/
<div id='elementResizable'>
<h1>Full Name</h1>
Title
<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
<div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>
#elementResizable {
border: 1px solid #000000;
width: 300px;
height: 40px;
overflow: hidden;
}
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
#nwgrip {
left: -5px;
top: -5px;
}
#negrip{
top: -5px;
right: -5px;
}
#swgrip{
bottom: -5px;
left: -5px;
}
#segrip{
bottom: -5px;
right:-5px;
}
#ngrip{
top: -5px;
left:50%;
}
#sgrip{
bottom: -5px;
left: 50%;
}
#wgrip{
left:-5px;
top:50%;
}
#egrip{
right:-5px;
top:50%;
}
$('#elementResizable').resizable({
handles: {
'nw': '#nwgrip',
'ne': '#negrip',
'sw': '#swgrip',
'se': '#segrip',
'n': '#ngrip',
'e': '#egrip',
's': '#sgrip',
'w': '#wgrip'
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
