Develop Reference

Jquery .draggable is not a function

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?

show hide content on mouseover boxes

Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.

I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>

I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.

flying text from top to down

I am trying to make a banner, where there should be some text going down from the top to the bottom. The code is just for a test, to see if it is working, so I will optimize it later. I have made this code:
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>
If I put an alert("test"); in the javascript code, I get the alert. But when I try to animate something, nothing happen. So I guess it is the animation code in the javascript, there is something wrong with? Can anybody see what I am doing wrong?
Best Regards
Mads

1 Include JQuery library.
2 Use absolute values in animate function:
$("#animation").animate({ top: 300 }, 1500 ).animate({ top: 40 }, 800 );
For this you need to make your <div class="transbox" id="animation"> as absolute positioned.

You are using Jquery here you just forget to include it into your code:
Working Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>

.animate() is the jQuery function. You need to include the jQuery library to use it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>

Just include jQuery lib in your page in header section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Can't get JQuery UI Selectable to work at all

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"/>');
}

Cannot load Jquery or JQuerry.tabify

I need to create a tabbed menu on a Drupal website. The drupal installation is a good ould Drupal 4.7. In order to create tabbed menu I use tabify plugin for Jquery. The problem is that I cannot get it working. It seems that the Jquery doesn't load. I put the code (below) on the website where I would like to have the menu. It didnt work. Then I put it on the main drupal page and on every template file. Not working either. What is the cause of that? Any advice appreciated. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tabify-1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('#tabbed_menu').tabify();
});
// ]]>
</script>
<ul id="tabbed_menu">
<li class="active">Treatment</li>
<li>Prices</li>
<li>FAQ</li>
</ul>
<div id="description" class="content">
some text
</div>
<div id="usage" class="content">
<h2>Prices</h2>
some text
</div>
<div id="download" class="content">
some text
</div>
And CSS:
#tabbed_menu{ padding: 0;}#tabbed_menu LI{ display: inline;}#tabbed_menu LI A{ background: #EDF; padding: 10px; float: left; border-right: 1px solid #CCF; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}#tabbed_menu LI.active A{ background: #E07; color: #FFFFFF;}.content_tabbed{ float: left; clear: both; border: 1px solid #CCF; border-top: 1px solid #CCF; border-left: 1px solid #CCF; background: #FFF; padding: 10px 20px 20px; width: 100%; border-bottom: 1px solid #CCF;}

its because the jquery u have loaded on is the core jquery, u need the jquery ui :) and make sure that <script> is above other codes where you call the tabify, :)