How would I implement stacking properties to draggable divs in JQuery UI?
I you do not understand what exactly I am talking about, check this out: http://qtip2.com/demos#section-stacking
As you can see, in the link above, as you hover over the "tips", the respective tip will go to the top(which looks much like incresing the z-index).
How would I do this if I had 3 divs which are draggable?
Dumie example:
$(function() {
$(".draggable").draggable();
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
When I click any of the divs, I want them to come to the front(or do something like increasing the z-index).
Now I do not have any idea of how to do this, please do help and comment! :)
JQuery UI draggable has an option called stack that can do what you need. Simply set the selector against which the elements need to stack (it doesn't have to be only other draggables), and it'll manage the z-index for you. Like this:
$(function() {
$(".draggable").draggable({
stack: '.draggable'
});
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
http://api.jqueryui.com/draggable/#option-stack
Related
I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>
Im trying to figure out the easiest way to re order some divs on a project im working on. I created this simple test: http://jsfiddle.net/Tt6uN/254/
$('.container > div').each(function() {
$(".green").insertBefore(".red");
});
div {
height: 100px;
width: 100px;
marign: 10px 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="red"></div>
<div class="green"></div>
<div class="green"></div>
</div>
As you can see there are 3 div elements in the code. Why is a fourth getting generated in the output? Also does anybody have a solution to my re ordering div problem. Regardless of where the red div is in the markup. it should always be after the green div
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 have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle