I want to position a draggable div within the divs parents center. See example here
$("#mover").draggable({
revert: true,
containment: "parent"
});
<div style="width: 100px; height: 100px;" id="joystick">
<div style="width: 10px; height: 10px" id="mover"></div><br />
</div>
Now, it works fine, but as soon as I want to position the mover at the joysticks center, the dragging doesn't work the way I want it to.
I tried positioning it giving the mover a margin: 45px 0 0 45px;, but then (because of the box-model seeing the margin as a part of the box) the dragging still only works down and right, and not up and left.
As you see, I want to create kind of a "joystick" used to steer something. Therefore, it needs to be centered but also be movable in all axis'.
Any ideas would be highly appreciated.
Here's a full working demo, you have to position the center of the joystick with position:relative;: http://jsfiddle.net/E6BQe/
HTML:
<div id="coords"> </div>
<div id="joystick">
<div id="mover"></div>
</div>
CSS:
#joystick { background-color:whitesmoke; width: 100px; height: 100px; padding:0px; }
#mover { background-color:red; position:relative; margin:0px; padding:0px; width: 10px; height: 10px; left:45px; top:45px; }
javascript:
$("#mover").draggable({
revert: true,
containment: "parent",
create: function(){
$(this).data("startLeft",parseInt($(this).css("left")));
$(this).data("startTop",parseInt($(this).css("top")));
},
drag: function(event,ui){
var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
var rel_top = ui.position.top - parseInt($(this).data("startTop"));
$('#coords').text(rel_left + ", " + rel_top);
},
stop: function(){
$('#coords').html(" ");
}
});
Add the following CSS:
#joystick {position:relative}
#mover {position:absolute;top:45px;left:45px}
Working example: http://jsfiddle.net/52V6h/
The difference between this and margin is that this just sets the position, while keeping the containers the same. Changing the margin will force the #mover to always be 45px away from the box corner.
Related
I'm using jQuery's draggable({containment: }); to restrict dragging within a certain area. My question is how do I restrict dragging after a certain level of the Y axis within a restricted div?
jQuery("#map").draggable({
containment: $('#range'),
/////*
stop: function(event, ui) {
if(ui.position.bottom>375) {
// stop dragging if exceed y axis 375 px ?
}
}
*/////
});
Since containment option accepts array of coordinates, you could subtract 375px from the height of the containment element.
(sample code. Exact coordinates depends on your CSS and HTML structure)
$("#map").draggable({
containment: [
$('#range').offset().left,
$('#range').offset().top,
$('#range').offset().left + $('#range').width() - $("#map").innerWidth(),
$('#range').offset().top + $('#range').height() - 275
]
});
#range{
width: 400px;
height: 400px;
background: #ccc;
}
#map{
padding:5px;
max-width:36px;
background:black;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id=range>
<div id=map>MAP</div>
</div>
Yet another solution is to make a #virtual-range element inside #range element and set its height to $('#range').height()-375. Then use that #virtual-range as dragging region. And once again - all depends on your CSS and HTML structure.
$('#virtual-range').css('height', $('#range').height()-275);
$("#map").draggable({
containment: $('#virtual-range')
});
#range{
margin-left: 50px;
margin-top: 50px;
width: 400px;
height: 400px;
background: #ccc;
}
#map{
padding:5px;
max-width:36px;
background:black;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id=range>
<div id=virtual-range>
<div id=map>MAP</div>
</div>
</div>
I have a container with 2 divs inside:
One is a small fixed width left div that is floated to the left (like a side menu).
The second is a fluid div that also floats left (to be able to stack alongside the fixed div).
The second div has sortable icons that float left. When the window is shrunk, I would like the icons to shift to the left and form a new row. For example, if "X" is an icon inside of the window and I have 6 icons.. My sortable items look just like the example here (http://jqueryui.com/sortable/) except that they float and stack to the left instead of vertically, like in the example.
Before window shift (all stacked in one row because they fit the browser):
X X X X X X
After window shift (when only 4 can fit the shrunken browser, the other two should make a new row):
X X X X
X X
You can see the code here: jsfiddle.net/6ZWq6/18
My problem is that the right fluid column will clear the left fixed column and end up completely beneath it, then only after they are stacked on top of each other, will it start to form new sortable rows. I do not want the right column to clear the left one at all, I just would like for the sortable items to make a new row.
I tried setting clear to none on the second fluid div and it did not change this behavior. I also tried floating the fixed column left and the fluid column right and it did not change it either. Is there some way to make the sortable JS function occur before the clearing one or to completely prevent it from clearing?
Here is the code:
CSS:
.container
{
background: transparent;
overflow: hidden;
clear: none;
}
.left-fixed {
background: #ccc;
padding: 10px;
width: 160px;
float: left;
min-height:500px;
}
.right-fluid {
list-style: none;
padding: 10px;
width: auto;
float: left;
overflow: auto;
}
.sortable-item {
cursor: move;
display: block;
font-weight: bold;
color:#CC0033;
margin: 5px;
float: left;
HTML:
<div class="container">
<div class="left-fixed connectedSortable" style="float:left">
<div class="sortable-item"><span class="img1"></span>
<p>Item Name Here</p>
</div>
</div>
</div>
<div class="right-fluid connectedSortable" style="float:left">
<div class="sortable-item"><span class="img2"></span>
<p>Item Name Here</p>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('.right-fluid, .left-fixed').sortable({
connectWith: ".connectedSortable"
});
Thank you!
could you check this fiddle link, you may get answer
$(function() {
$( "div.right-fluid" ).sortable({
connectWith: ".connectedSortable"
});
$( "div.left-fixed" ).sortable({
connectWith: ".connectedSortable",
dropOnEmpty: false
});
$( ".right-fluid, .left-fixed" ).disableSelection();
});
.container{background: transparent;overflow: hidden; clear: none;}
.right-fluid {padding: 10px;background: #ccc;width: 160px;float: left;
min-height:500px;overflow: auto;}
.left-fixed {list-style: none;padding: 10px;width: 160px;float: left;}
.sortable-item {cursor: move;display: block;font-weight: bold;color:#CC0033;
margin:5px;float: left;}
http://jsfiddle.net/6ZWq6/10/
Thank you Philip Tenn for helping me fix the CSS, this ended up being the solution!
CSS change to:
.left-fixed {
padding: 10px;
background: #ccc;
width: 160px;
float: left;
min-height:500px;
overflow: auto;
}
.right-fluid {
list-style: none;
padding: 10px;
margin-left: 160px;
}
The working code is here:
http://jsfiddle.net/ptenn/6ZWq6/19/
could you try with this code
$(function() {
$( "div.right-fluid" ).sortable({
connectWith: ".connectedSortable"
});
$( "div.left-fixed" ).sortable({
connectWith: ".connectedSortable",
dropOnEmpty: false
});
$( ".right-fluid, .left-fixed" ).disableSelection();
});
i had added a drag and move div to my website, i am using common header for each pages.
my drag and move div code as follows:
Script:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
Div:
<div class="student_avatar_header" id="draggable" title="Drag and Move...">
Some texts...
</div>
CSS:
.student_avatar_header {
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 20px;
border-radius: 250px;
z-index: 9998;
box-shadow: 2px 2px 12px #008abc;
cursor: move;
}
this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,
NOTE: my website have above 35 pages.
any idea.?
thanks...
Have a look on the following code :
$("#draggable").draggable({
stop: function(event, ui) {
$.cookie("elementIDCookie", ui.position);
}
});
To re-position the element when the user returns:
$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });
I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.
I am trying to built a window located in the center of the screen and when I scroll down it will always be in the center, I have tried the follwing code:
<style>
#Window {
display: none;
text-align: center;
border: 1px solid #333;
position:absolute;
width: 200px;
height: 80px;
z-index:9999;
background:#fff;
border-radius: 5px;
padding: 10px;
}
</style>
<script>
$("#window").css('top', 200);
$("#window").css('left', winW/2- $("#window").width());
$(window).scroll(function () {
var winH = $(window).height();
setTimeout( function(){
$('#alertWindow').animate({'top':winH/2-$("#window").height()/2},200);
}, 1000);
});
</script>
<div id="window">this is scroll window</div>
The problem is that when I scroll down, the window moves to the center at the first time which works, but when I scroll again, it won't keep moving to the center, I think the scroll function is only called once, how can I keep the window move constantly to the center of the creen when I scroll down or up, any one could help me with that, sorry if I did present the whole code.
All you need is css.
Just use position: fixed
You should try taking advantage of Jquery UI's excellent dialog plugin http://jqueryui.com/demos/dialog/. There is an option to update the position of the dialog
$( ".myDialogWindow" ).dialog( "option", "position", 'center' );
as well as being able to theme it with css however you want.