Hello everyone I'm trying to create a draggable and resizable function in my laravel framework using jquery. And each time I reload the page this error keeps on showing in my console
"Uncaught TypeError: $(...).draggable is not a function"
which make the function not to be working. Here is my code
<link rel="stylesheet" href="{{asset('dasharea/css/jquery-ui.css')}}">
<style>
#containment-wrapper {
border: 2px solid #ccc;
position: relative;
overflow: hidden;
}
#containment-wrapper .box {
width: 100px;
height: 100px;
left: 50px;
top: 50px;
position: absolute;
border: 1px solid grey;
cursor: move;
}
</style>
<script src="{{asset('dasharea/js/jquery-3.6.0.js')}}"></script>
<script src="{{asset('dasharea/js/jquery-ui.js')}}"></script>
<script>
$(document).ready(function() {
$(".box").draggable({
containment: "#containment-wrapper"
}).resizable({
containment: "#containment-wrapper"
});
});
</script>
<div id="containment-wrapper" class="meta-builder ui-widget-content">
<img src="{{asset('dasharea/img/placeholder.png')}}" id="cover" style="max-width: 750px;" />
<div class="box"></div>
<div id="name-builder" class="nm_controls pv_controls name-builder">Dummy Name</div>
</div>
Please guys I really need your assistance. Thanks in advance.
Please replace
<script src="{{asset('dasharea/js/jquery-3.6.0.js')}}"></script>
<script src="{{asset('dasharea/js/jquery-ui.js')}}"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
Hope this works!
More information: jQuery UI - Draggable is not a function?
Related
This question already has answers here:
Jquery not loading in head but loading on bottom of body tag
(5 answers)
Closed 7 years ago.
hello my javascript code is not working i included the css and the script in the code i don't have good experience in javascript maybe there is something missing i need some help here thanks in advance
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
</html>
its working already.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
</html>
The order of your HTML is totally incorrect, you have the <head></head> tag below the <body></body>.
Place the head tag above the body, just after the opening html tag then move your css and the link to jQuery in this section.
Finally it's better to add your JS at the very bottom of the page as the browser reads the dom from top to bottom, thus will increase the speed of the page load.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
<script type='text/javascript'>
$(function() {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
</body>
You have multiple errors.
First the css in <style></style> tag must be in your <head></head> of your page.
Best solution is using external css file and add him with a <link> in your <head>.
After that the <script> section is highly better on the bottom of your page because the browser compile in order of your code.
If you want add <script> before html add your script in this function :
$(document).ready(function(){
// Here
});
write the jS code in a .js file and use
<script src="foo/bar/yourScript.js"></script>
the style sheet in an .css and use a
<link rel="stylesheet" href="css/bar/yourStyle.css">
so the Script-tag is always at the Bottom of the body-element
the head is above the body and the link-tag inside the head
Here is suggestion that please maintain the flow of code.
write the css Style in head tag and jquery or JavaScript after body tag completed.
Here is jsfiddle link
https://jsfiddle.net/nbcakhzz/2/
Hope it will help you.
The code below is not workING in my application
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</div>
CSS:
.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}
JAVASCRIPT:
$('.progressBarIndicator').css({"background-color" : "red"});
First Check, whether jquery.min.js is present or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If yes, change your script like this way.
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background-color","red");
});
</script>
$('.progressBarIndicator').css({"background-color" : "red"});
^ ^ ^
remove replace with comma Remove
For more info, check this Jquery CSS Method - W3 Schools & Background CSS Using Jquery - Web Developer Forum
My Updated Code. Do the needful changes if required.
<html>
<head></head>
<body>
<style>
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
</style>
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
</script>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
CSS:
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
JAVASCRIPT:
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
I am trying to implement a draggable (drag & drop) picture using a script that is included at the header of my html file. I have 3 separated files for this project; html, css and js. However, when I upload it to my localhost, the draggable function is not working at all meanwhile it is working perfectly on Jsfiddle.
This is the html:
<!DOCTYPE HTML>
<html>
<head>
<link href="index-05.css" rel="stylesheet">
<script type="text/javascript" src="index-05.js"></script>
<!--dragonfly animation-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script type="text/javascript" src="kinetic-v5.1.0.js"></script>
<script type="text/javascript" src="tweenmax.min.js"></script>
<!--draggable-->
<script>
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "parent", scroll: false});
</script>
</head>
<body>
<div id="container"></div>
<div class="containment-wrapper">
<div class="boxone" class="draggable ui-widget-content"></div>
<div class="boxtwo" class="draggable ui-widget-content"></div>
<div class="boxthree"></div>
</div>
</body>
</html>
Here is the css:
body {
margin:0;
height: 595px;
}
#container{
/*background-color:rgb(19,163,174);*/
background-image:url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:595px;
overflow: hidden;
}
#container .background {
width: 100px;
height: 200px;
}
/************************************draggable************************************/
.containment-wrapper {
background:khaki;
overflow: hidden;
padding: 50px;
}
.boxone {
width: 100%;
height: 200px;
background: papayawhip;
border-radius:50px;
margin-bottom: 15px;
}
.boxtwo {
width: 100px;
height: 100px;
border-radius:12px;
background: darkseagreen;
margin-bottom: 15px;
float: left;
}
.boxthree {
width: 100px;
height: 100px;
border-radius:50px;
background: lightcoral;
margin-bottom: 15px;
float: left;
}
I also included a few other kinetic animation in the same page as the drag-and-drop function. Could this be the problem? Please advice. I am very new in this. Thank you in advance.
there are two jquery-ui js files since including jQuery-ui twice can cause all sorts of issues.
<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Please move one of them.
$(document).ready(function() {
$( "#box" ).resizable();
});
.container {
width: 450px;
height: 450px;
background-color: #000;
}
#box {
width: 150px;
height: 150px;
background-color: red;
padding: 0.5em;
}
<div class="container">
<div id="box">
</div>
</div>
All I see is a red box, inside a black box, cannot see the resize icon at all like in the example here:
http://jqueryui.com/resizable/#helper
I looked at their css file, it seems like with the class .ui-widget-content it works, but why?
What makes that resize icon popup in there?
Why doesn't it work?
there:
<html>
<head id="html">
<title>Jquery project</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<div class="container">
<div id="box">
</div>
</div>
<style>
.container {
width: 450px;
height: 450px;
background-color: #000;
}
#box {
width: 150px;
height: 150px;
background-color: red;
padding: 0.5em;
}
</style>
<script>
$(document).ready(function() {
$( "#box" ).resizable();
});
</script>
</html>
You're missing the jQuery UI stylesheet:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
The entire jQuery UI project uses stylesheets to determine the look and feel of the widgets. The resizable icon is in the stylesheet:
.ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png");
}
The width and height of your element is controlled via styles. On the jquery download page, there is a section (at the bottom) to customize the look and feel. You're free to design your own; the one that I referenced is the default.
Just use this....
#box { resize:both; }
in css
I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.
I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.
Here is the js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Here is the CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.
Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.
I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.
The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.
When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.
Something like this should work (http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}