I am trying use Jquery-ui for the first time, and am trying to create a div with all the 3 features mentioned above in the title.
You can find the JSBin link here: https://jsbin.com/haleyucipu/1/edit?html,output
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<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>
$( function() {
$( "#resizable" ).resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
Only, resizeable and draggable work! Selectable doesnt!
Selectable needs a container, if you look at the examples, they use <ol>.
Consider the following code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
.ui-selecting {
background: #FECA40;
opacity: .65;
}
.ui-selected {
background: #F39814;
color: white;
}
.ui-resizable-ghost {
border: 1px dotted gray;
}
</style>
<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>
$(function() {
$("#resizable").resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().parent().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
This makes <body> the container and now all UI Interactions work.
Hope that helps.
Related
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 2 years ago.
So I have the following in my HTML page:
and i intentionally made it so that the "overflow" happens which results in the scrollbar at the right.
So i made a button called "Click to scroll up". So what i wanted was that everytime we click that button, the document would immediately scroll all the way up. Which means if I were to navigate all the way down, and click the button, it would bring me all the way up.
I looked up and there's a method "scrollTop" but it doesn't seemed to work. Would appreciate some help on this.
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost() {
$(document).scrollTop();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
$("#scrollup").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
Please try this code
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>
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.
I am using jQuery draggable. I have added draggable function to main div. Now in all the child elements it's also draggable. How can I disable dragging inside child div if parent is draggable?
$(function() {
$("#draggable").draggable();
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: black solid 2px;
}
.noDrag {
width: 100px;
height: 50px;
border: blue solid 2px;
}
<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>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
<div class='noDrag'>No Drag</div>
</div>
To fix this use the cancel property, and provide it a selector to match the element you want to disable the drag behaviour on, like this:
$(function() {
$("#draggable").draggable({
cancel: '.noDrag'
});
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: black solid 2px;
}
.noDrag {
width: 100px;
height: 50px;
border: blue solid 2px;
}
<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>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
<div class="noDrag">No Drag</div>
</div>
you can use cancel or disableselection() like suggest in jQuery-ui documentation https://jqueryui.com/draggable/#handle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Handles</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
</style>
<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>
$( function() {
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>You can drag me around…</p>
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
</div>
</body>
</html>
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}
I'm looking for option how to comparison id in draggable&dropabble elements. It's my first journey with jquery.
Actually I have (fragments):
$(".letter").draggable();
$(".simpleSlot").droppable({
drop: function( event, ui ) {
var idDrag = ui.draggable.attr("id");
var idDrop = $this.attr("id");
$("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
if(idDrag == idDrop){ alert("Done!"); }
}
});
Droppable element:
var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);
$("#divId").css({
left: positionX, top: positionY
});
$("#mixedWord").append(letter);
Draggable element is generated the same way.
And my css for droppable:
.letter{
border: 2px solid;
border-radius: 25px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
position: absolute;
}
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/flipclock/libs/prefixfree.min.js"></script>
<script src="js/flipclock/flipclock.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div id="area">
<div id="time">Time:</div>
<div id="mixedWord"><!--here goes random word as simple letters in simple divs--> </div>
<div id="slots"></div>
<div id="height"></div>
<div id="width"></div>
</div>
</body>
MY PROBLEMS:
Draggable works. But when I drop something on droppable element - I can't move it more. It cannot be that.
It doesn't change #TEST - so it means drop doesn't work. Why?
And I don't have alert.