I'm fooling around with draggable elements and found myself stuck on the stacking part.
I have three windows that are draggable and when clicked the specific element stacks on top the other two. However the stacking order seem to be "reset" on the other two when a window is clicked. For example if I click on .window1 and .window2 is in the back it ends up on top of .window3.
I'm using javascript with a onmouse z-index property for the stacking. Is there a way to make only the clicked element stack on top without affecting the other two? Any help or pointing in the right direction is welcome, cheers!
HTML:
<div class="window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
My javascript for drag and z-index for stacking:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header" });
$('.window1, .window2, .window3').on('mousedown', function(event) {
$('.window1, .window2, .window3').css('z-index','1');
$( this ).css('z-index','1000');
});
Use the Stack option to bring the current dragged item to the front without affecting the other items:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header", stack: ".window" });
.window1 {
background-color: orange;
width: 100px;
}
.window2 {
background-color: lightgreen;
width: 100px;
}
.window3 {
background-color: yellow;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="window window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
Related
For my current project I want to make a sort of fixed element in my DOM.
I am not using position: fixed because the element will lose its existence within the DOM and thus its original position (which in my opinion only makes things look worse). I made the element behave like a fixed element by just adding/removing margin-top: somevalue to the scrollable element, everytime when the user scrolls and the code I use was made possible within the JavaScript. Using this method also adds a nice looking animation to this whole "interaction".
The problem I am experiencing is that when the (browser) window has such a small height, that the element will reach for the footer, it will expand the container, body or whatever parent is on it. How do I prevent this from happening?
I made a JSFiddle per example of this issue.
$(document).ready(function() {
var topPadding = 10;
//Set the scrollable offset before starting the scroll
var scrollableTopOffset = $(".scrollable").offset().top;
$(window).scroll(function() {
/* When scrolling, determine wether the browser window still contains
scrollable: */
if (scrollableTopOffset < $(window).scrollTop()) {
//Code when scrollable is within the browser window...
//$(".shopping-cart").addClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
});
} else {
//Code when scrollable is not within the browser window...
//$(".shopping-cart").removeClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: 0
});
}
});
});
.some-content-block {
height: 150px;
margin-bottom: 5px;
background-color: red;
}
.scrollable {
height: 75px;
background-color: cyan;
}
footer {
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
<div class="row">
<div class="col-md-12">
<div class="some-content-block">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="scrollable">
</div>
</div>
</div>
</div>
<footer></footer>
Edit: Here is my fiddle updated with the answer of SamGhatak: JSFiddle
I think I found a solution here:
https://jsfiddle.net/rv4mg8uq/2/
Added this code there:
if(($('footer').offset().top -scrollableTopOffset +topPadding)<$(window).scrollTop()){
//do nothing
}
I thought this would be kinda straightforward but i cant wrap my head around this. I got to following html:
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
I need to grab/detach the div's .test and put/append them into the .item div's. So the first div .test needs to go in the first div .item, the second div .test to the second div .item etc. So it becomes:
<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>
</div>
Now i found some jquery code and i came to this:
var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);
child.detach();
parent.append( child );
This works but as suspected, it detaches/appends the first div. Now i need to detach/append them all one by one and from reading a lot of topics, i think i need to put a loop/each in there somewhere but i have no idea how and im not getting any closer after screwing around for hours.
Anyone who can put me in the right direction with this?
You can move all of them easily by just using the append() method and selecting all the divs:
$('#bar').append( $('#foo div') )
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
Alternatively, if you want to do something with each element, you can use .each():
$('#foo div').each(function(i, elem) {
var $elem = $(elem);
//Do stuff
$('#bar').append($elem);
});
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
On solution is to get both collections and iterate over one of the collections. Also note that you don't need to use .detach. .append will already do that.
var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");
$fooItems.each(function(index, el) {
$(this).append($barTests.eq(index));
});
Example Fiddle
I think there are two solutions for your issue : .childern() function or usiing jQuery selectors
For example using selector :
$("#bar > div")
or using children() function :
$("#bar").children("div");
also look at this post, you may have your answer here : jQuery - get all divs inside a div with class ".container"
So I have here a content div <div class="content"> that is hidden when going mobile using media queries, what I want to do is when pressing the head title <div class="head"> to toggle (slide) the hidden content div.
HTML Code:
<div class="container">
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
</div>
CSS:
/* Responsive Media Queries */
#media screen and (max-width: 560px) {
.content { display: none; }
}
I tried this way with Javascript, but doesn't work:
$( ".head" ).click(function() {
$( "#content" ).toggle();
});
I can't make it work, I would appreciate some ideas, thanks!
$(document).ready(function () {
$(".head").click(function () {
$(this).next(".content").toggle();
});
});
In your code, you didn't get the "content" selector right: you're searching for an element with id="content" which isn't present in your HTML. The code above will realibly find & toggle the corresponding content element for a clicked head element as long as your HTML structure remains as is.
I'm trying to design a page where there is a task list on the left and many boxes (one for each employee) on the right so I can dispatch all the tasks quickly.
I don't know if it is relevant, but I use Bootstrap. Here is my list's markup :
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Tasks</div>
</div>
<div class="panel-body panel-body-table">
<div id="Unassigned_1" style="margin-left:0px">Task 1</div>
<div id="Unassigned_4" style="margin-left:10px">Task 1.1</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.1.1 Some long name so I can test</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.1.2</div>
<div id="Unassigned_5" style="margin-left:10px">Task 1.2</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.2.1</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.2.2</div>
<div id="Unassigned_2" style="margin-left:0px">Task 2</div>
<div id="Unassigned_3" style="margin-left:0px">Task 3</div>
<div id="Unassigned_6" style="margin-left:10px">Task 3.1</div>
<div id="Unassigned_7" style="margin-left:10px">Task 3.2</div>
</div>
</div>
</div>
And here's the javascript (I'm just begining this page, so the 'drop' code is not there yet)
<script>
$(document).ready(function() {
$('div[id^="Unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' });
});
</script>
For some reason I don't know, if I drag any task (such as the one with the long name) to the right, the text wraps when it "hits" the right border of the panel, then when I pass the border with the cursor, the item follows, but it is still wrapped.
Does anyone know why it does that? Is there a way to fix it?
Thanks a lot
You can fix a width of the dragging element using classes .ui-draggable.ui-draggable-dragging
.ui-draggable.ui-draggable-dragging {
width: 100%;
border: 1px solid #eee;
padding: 5px;
color: #888;
}
Fiddle demo
I wan to know if it's possible to re-order vertical columns on Bootstrap 3.
.col-xs-8 {
background: magenta;
}
.col-xs-4 {
background: cyan;
}
.col-xs-12 {
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-xs-8">Content</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 col-xs-push-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<div class="col-xs-12">D</div>
</div>
</div>
</div>
</div>
JSFiddle
What I want it's to move the items on the sidebar from ABCD to BCAD
What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margins :
Here is a demo
Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels)
HTML
<div class="abcd">
<div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
<div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
<div>
EDIT :
demo with percentage value
In %ge, you can vreate something like :
<div class="abcd">
<div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
<div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
<div>
CSS
.abcd {
margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}
Assuming you have to insert first child just before the last child.
You can do it with jquery. See Demo
$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );