Resizable element is an element that can be resized by the user just by using the mouse. by hovering the cursor down the element will be higher and so when the cursor to the right direction the element will increase in width.
In this tutorial, we will create a resizable image. Because the image is the element that most often need to be resizabeled in a website, especially websites that display images such as website photography. For more details, let's follow and pay attention on the following steps:
Open your Text editor and create new file. Save as resize.html.
Add the HTML element as usual.
<html>
<head>
<title>Resizable Image</title>
</head>
<body>
</body>
</html>
<img id="resizable" src="gmb.jpg">
.ui-widget-content class to get style form jquery UI and add width="100px" as image width before resizing.<img class="ui-widget-content" width="100px" id="img" src="gmb.jpg">
Because we don't want to install or host the jQuery and jQuery UI file, we should add The CDN as replacement.
<head> element.<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script> tag. You can put it in element or in <body> or in <head> element.<script></script>
$(document).ready(function(){
});
$( "#img" )
$( "#img" ).resizable();
animate: true as parameter like this :$( "#img" ).resizable({
animate: true
});
<html>
<head>
<title>Resizable Image</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$( "#img" ).resizable({
animate: true
});
});
</script>
</head>
<body>
<h3>RESIZABLE IMAGE</h3>
<img class="ui-widget-content" width="100px" id="img" src="gmb.jpg">
</body>
</html>