I'm a pretty new coder, going through a course for javascript and jquery. I stopped to play around with drag and drop features in jquery, and have gotten stumped on something.
Codepen - http://codepen.io/Allayna-1472610667/pen/ozvqNd
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
div {
margin:auto;
}
#bigsquare {
width: 400px;
height: 400px;
background-color: aqua;
border:2px solid #ccc;
font-weight: bold;
font-size: 20px;
text-align: center;
padding: 0;
}
#smallsquare {
width: 200px;
height: 200px;
background-color: blue;
color: yellow;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="bigsquare">
<p>Drop here</p>
</div>
<div id="smallsquare">
<p>Drop me in the box</p>
</div>
<script type="text/javascript">
var dropped = false;
$("#bigsquare").droppable( {
drop: function(event,ui) {
$("#smallsquare").draggable("option", "containment", "#bigsquare");
$("#smallsquare").css("background-color","green");
$("#smallsquare").html("I am trapped now!");
$("#bigsquare").css("background-color","red");
$("#bigsquare").html("I have you now! BWAH HA HA!");
dropped = true;
}
});
$( "#smallsquare" ).draggable({
drag: function (event, ui) {
if(dropped == false) {
$("#smallsquare").html("Don't let me get trapped!");
}
}
});
</script>
</body>
</html>
This code without any margins or with floats, it works perfectly as it should: the little box can be dragged freely until dropped in the big one, then it is trapped in the big one.
But if I dare apply the "margin:auto" to my divs to center my divs, the little box jumps outside the box that should be constraining it.
Related
I am creating div elements dynamically, on clicking on duplicate button. the divs are draggable and resizable horizontally. Everytime I create a new div, by clicking on duplicate, the new divs are draggable. But with resizable an unusual behavior is observed. The behavior is all the divs uptil second last div gets the resizable feature, but the most recent(last) doesn't get resizable. I referred the solution given here,
Apply jQueryUI Resizable widget to dynamically created elements. They are using :last and after() methods.
I am not getting how I use it in my case.
Following is my code,
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<script type="text/javascript">
var bar_id = 1;
$(document).ready(function(){
$(".action").draggable({cursor:"move",containment:"#limits"});
$(".action").resizable({handles:"e,w",maxWidth:1300,maxHeight:46,minWidth:100,minHeight:46});
$(document).on('click',".duplicate_btn",function(){
bar_id += 1;
var duplicate_bar = $(this).parent().clone();
duplicate_bar.attr("id","action_"+bar_id);
duplicate_bar.find(".duplicate_btn").attr("id","duplicate_btn_"+bar_id);
$("#limits").append(duplicate_bar);
$(".action").draggable({cursor:"move",containment:"#limits"});
$(".action").resizable({handles:"e,w",maxWidth:1300,maxHeight:46,minWidth:100,minHeight:46});
});
});
</script>
<style type="text/css">
.action{
background-color: #aaa;
height: 46px;
width: 200px;
float:left;
border:2px solid black;
position:absolute;
/*for items inside div*/
display: flex;
align-items: center;
justify-content: center;
}
#limits{
background-color: lavender;
height: 50px;
width: 1300px;
}
</style>
</head>
<body>
<div id="limits">
<div id="action_1" class="action">
<button id="duplicate_btn_1" class="duplicate_btn">Duplicate</button>
</div>
</div>
</body>
</html>
Please help to get the way out. Thank You in advance!.
If you check the DOM inspector after you clone() the element you'll see that it has also copied the .ui-resizable-handle elements which were added to the original element when draggable() and resizable() were called on it.
This is the cause of the issue. You need to remove those elements before you define draggable and resizable on the new element. Also note that you can call those methods on the new instance directly instead of redefining the plugin on all instances of .action. Try this:
var bar_id = 1;
$(document).ready(function() {
defineDragResize($('.action'));
$(document).on('click', ".duplicate_btn", function() {
bar_id += 1;
var $duplicate_bar = $(this).parent().clone().appendTo('#limits')
$duplicate_bar.find('div').remove();
defineDragResize($duplicate_bar);
});
function defineDragResize($el) {
$el.draggable({
cursor: "move",
containment: "#limits"
}).resizable({
handles: "e,w",
maxWidth: 1300,
maxHeight: 46,
minWidth: 100,
minHeight: 46
});
}
});
.action {
background-color: #aaa;
height: 46px;
width: 200px;
float: left;
border: 2px solid black;
position: absolute;
/*for items inside div*/
display: flex;
align-items: center;
justify-content: center;
}
#limits {
background-color: lavender;
height: 50px;
width: 1300px;
}
#limits {
background-color: lavender;
height: 50px;
width: 1300px;
}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<div id="limits">
<div class="action">
<button class="duplicate_btn">Duplicate</button>
</div>
</div>
One thing to note is that I removed the dynamic id logic. This is an anti-pattern and should not be used. Use common classes and DOM traversal instead.
I'm trying to resize a box (orange box), but my issue is that I can ONLY resize it to the right and bottom , but I cannot resize it to the top (I only want to be able to resize it to the top).
Also after re-sizing it to the top I don't want it to resize the green box (I want the green box to be static, meaning that I don't want it to change its size, the orange box should be over it). I have tried and cannot come up with good results. Using jQuery or pure JavaScript works fine with me.
Here's my code:
<html>
<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script><!-- CSS -->
<script>
$(function() {
$( "#orangeBox" ).resizable();
});
</script>
</head>
<body>
<div id="greenBox" class="ui-widget2">
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</div>
<p></p>
<div id="orangeBox" class="ui-widget">
<p>This is the Orange Box</p>
</div>
</body>
</html>
CSS code:
.ui-widget {
background: orange;
border: 1px solid #DDDDDD;
color: #333333;
}
.ui-widget2 {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#orangeBox {
width: 300px; height: 150px; padding: 0.5em;
text-align: center; margin: 0;border:2px solid black;
}
#greenBox {
width: 340px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; border:2px solid black;
}
You can do it like this:
$(function() {
$( "#orangeBox" ).resizable({
handles:'n,e,s,w' //top, right, bottom, left
});
});
working example Link in JSFiddle : http://jsfiddle.net/sandenay/hyq86sva/1/
Edit:
If you want it to happen on a button click:
$(".btn").on("click", function(){
var height = $("#orangeBox").offset().top; // get position from top
console.log(height);
$("#orangeBox").animate({
height: "+="+height+'px'
}, 1000);
});
and add this in your HTML:
<button class="btn">Click here to resize</button>
Working fiddle: http://jsfiddle.net/sandenay/hyq86sva/4/
Try this in your script :
$(function() {
$( "#orangeBox" ).resizable({
handles: 'n, e, s, w'
});
});
Hope this helps !!
I have a html file which positions one image on top of another. However I wish to that the superimposed image can be dragged around by the user, confined within the boundaries of the underlying image. Anyone may be kind enough to provide suggestions?
<html>
<head>
<style type="text/css">
#about {
z-index:1;
position:absolute;
top:10%;
left:3%;
opacity: 0.6;
}
#main-content-image {
height:100%;
position:relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
var img = new Image();
$(img).load(function () {
$('#main-content-image').append(this);
}).attr('src', 'foo.jpg');
});
});
</script>
</head>
<body>
<div id="main-content-image">
<img id="about" src='bar.jpg'>
</div>
</body>
</html>
You just need to use the function draggable from jQuery UI.
$(document).ready(function () {
$(function () {
$("#draggable").draggable();
});
});
Here is a working example:
https://jsfiddle.net/rv8kcjqd/
You can use the jQueryUI Draggable Widget which allows you define a containment setting, which will not allow moving outside of the bounding box.
Here's a small example:
$(function() {
$("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
});
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm contained within the box</p>
</div>
</div>
I am trying to make a form building tool. Everything was working just fine. I was able to drag my first icon and drop it on the main form body, just fine. When I do this, it appends a new div of class panel. I make panel droppable as well, however when I try to drop something on it nothing happens. If I hard code the div in it works fine, however when I append the div it does not. I'm having a lot of trouble figuring this out.
Here's my code:
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<style type="text/css">
#toolbox
{
width: 100%;
height: 200px;
position: fixed;
top: 0;
left: 0;
background-color: #666666;
z-index: 2;
}
.icon
{
padding-top: 20px;
padding-left: 20px;
text-align: center;
display: table-cell;
}
#formbuilder
{
width: 100%;
position: absolute;
top: 200px;
left: 0px;
bottom: 0px;
padding-top: 5%;
background-color: orange;
opacity: 0.4;
overflow: visible;
}
.panel
{
margin: 0 auto;
margin-bottom: 20px;
height: 150px;
width: 150px;
background-color: blue;
opacity: 0.4;
}
</style>
</head>
<body>
<script type="text/javascript">
function formDropHandler(event, ui)
{
if(ui.draggable.hasClass("pan"))
{
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
$(".panel").droppable({
drop: panelDropHandler
});
}
}
function panelDropHandler(event, ui)
{
if(ui.draggable.hasClass("tab")) alert("TRUE");
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").droppable({
drop: formDropHandler
});
$(".panel").live('mouseover',function(){
$(".panel").droppable({
drop: panelDropHandler
});
});
});
</script>
<div id="toolbox">
<div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div>
<div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div>
</div>
<div id="formbuilder">
<div class="panel"></div>
<div class="panel"></div>
</div>
</body>
</html>
Try this. Both drops are working now. The panel drops on the form builder and the table drops on the panels, (even the newly created ones). Just remember that the formbuilder is only the area that is colored in under the toolbar section. So the further you go down you won't be able to drop anything unless you scroll back up. But that's just a simple matter of CSS, change the position:absolute to position:relative and it should grow with the panels.
function formDropHandler(event, ui) {
if (ui.draggable.hasClass("pan")) {
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
} else if (ui.draggable.hasClass("tab")){
alert("TRUE");
}
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").live('mouseover', function() {
$("#formbuilder").droppable({
drop: formDropHandler
});
});
$(".panel").live('mouseover', function() {
$(".panel").droppable({
drop: formDropHandler
});
});
});
Only those elements which are existing when you called .droppable() were made "dropables". Since you ran it once, at doc ready, then never again, any elements which are added to the page after-the-fact are just run-of-the-mill elements.
You will need to initialise each new addition. You can do this quickly by turning around your append statement.
var form = $("#formbuilder");
$('<div class="panel ui-droppable"></div>')
.appendTo(form)
.droppable({drop:panelDropHandler});
I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?
Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}
The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help
After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS
This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}
Working sample: http://jsfiddle.net/hasYK/
I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>