In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I’m unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
Your example has some syntax errors. I would address those first. You also have various versions of jQuery included.
There’s something strange both of my browsers don’t want to allow that functionality. I copied and pasted it into the WS3Schools editor, and it ran perfectly. I can’t make sense of that.
I have no idea, but thanks. I now know, beyond the syntax errors, that the issue lies somewhere else.
