Develop Reference

How to: Use JQuery to fetch and update ONLY the following classes under a button living in one of those classes

Working fiddle is here and I'm trying to show/hide parent/child nodes.
Sample structure related to the question (conceptually similar to the fiddle)
<div class="card LevelOne">
<button></button>
</div>
<div class="card LevelTwo">
<button></button>
</div>
<div class="card LevelThree">
<button></button>
</div>
What I'd like to do is. if I click on a button under class level one, hide level two and there. If I click on a button under class two, only hide three. Kind of like that structural parent/child hide capability. what's the best way to accomplish this?

Try nextAll()
$("button").click(function() {
$(this).parent().nextAll(".card").toggle()
})
Demo
$("button").click(function() {
$(this).parent().nextAll(".card").toggle();
})
.card
{
margin:20px;
padding:10px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card LevelOne">
<button>Button1 For toggle below 2</button>
</div>
<div class="card LevelTwo">
<button>Button2 For toggle below 1</button>
</div>
<div class="card LevelThree">
<button>Button3</button>
</div>

Stacking and placing draggable elements on top without affecting others?

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>

How do I stop a "fixed" element using following code?

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
}

How can I reorder vertical columns in Bootstrap?

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" );

change background of a div containing divs

I'm sure the answer is really simple, but I can't figure this out :
http://jsfiddle.net/VfQAH/
I have a bunch of divs in a table style layout like so :
<div class="row">
<div class="col boxname">Box Name</div>
<div class="col length">Length</div>
<div class="col width">Width</div>
<div class="col height">Height</div>
</div>
<div class="row">
<div class="col boxname">A</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
<div class="row">
<div class="col boxname">B</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
I want rows to change color on hover, for that I have :
.row :hover{
background: #003366;
}
But the background changes only on the hovered cell, instead of the whole row.
Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?

You'd use .row:hover instead of .row :hover to highlight the whole row.
.row:hover{
background: #003366;
}
Your original selector, .row hover, selects all hovered elements which descend from .row, instead of .row itself.
jsFiddle here.

You need to remove the space
.row:hover{
background: #003366;
}
Otherwise it is interpreted as
.row *:hover{
background: #003366;
}
jsFiddle