Hello Readers if you are designing the html UI and you want to make div resizable by mouse then you can use the code as below:-
<!doctype html>
<html lang="en">
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-div-content">
<h3 class="ui-div-header">This is dummy data. !!</h3>
</div>
</body>
</html>
Now the Jquery which will make it resizable, will go like this:-
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
Now last add some css to it:-
<!-- CSS -->
<style>
.ui-div-header {
background:Red;
border: 1px solid #ba56b6d;
color: Green;
font-weight: bold;
}
.ui-div-content {
background: Green;
border: 1px solid #ff456g;
color: blue;
}
#resizable { width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
Now when you load this you well see the outer div have a boarder. When user will put the mouse on it, it will allow user to drag the boarder and scale as large as it got free space. Also when you resize the out div it will auto increase the matter inside it.
0 Comment(s)