0

In an attempt to improve this answer here: How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap

I have been trying to work out how to create a jQuery that will dynamically set the margin-top of divs depending on the accumulated height total in comparison to the height total of the adjacent column of divs.

The css:

div {outline:solid 1px red; }
// Set media container widths small to test code.
@media (min-width: 400px) {
.container {
    max-width: 1170px;
}
   .left {
    max-width:50%;
    width: 50%;
    float:left;
    clear:left;
} 
   .right {
    max-width:50%;
    width: 50%;
    float:left;
}  
}

@media (min-width: 150px) {
.container {
    max-width: 400px;
}
.col-sm-12 {
    width: 100%;
}
}

The Html:

<div id="1" class="left col-sm-12" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right col-sm-12" style="height:80px;">DIV 2</div>
<div id="3"  class="left col-sm-12" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right col-sm-12" style="height:70px;">DIV 4</div>
<div id="5" class="left col-sm-12" style="height:20px;background-color:yellow;">DIV 5</div>
<div id="6" class="right col-sm-12" style="height:80px;">DIV 6</div>
<div id="7" class="left col-sm-12" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right col-sm-12" style="height:90px;">DIV 8</div>

Js:

$(function () {
// Get div by id.
var idR = $("div").attr('id');
var idNumder =parseInt(idR);
// check if it's a right div.
if((idNumber % 2 ==0) && (idNumber > 2)){

var className = $("div").attr('class');
var leftHeight = 0;
var rightHeight = 0;

for(int i =0; i<idNumber; i++){
// count up left side heights.
if(className.localeCompare("left")==0){
   leftHeight += $("#"+idNumber.ToString()).height;
}
 // count up right side heights.
 if(className.localeCompare("right")==0){
    rightHeight += $("#"+idNumber.ToString()).height;
}

   var diff = leftHeight - rightHeight;
   // Determine which side is shorter.
   if(leftHeight > rightHeight){
        $("#idR").css({
        "margin-top":"-"+ diff + "px",
    });
   }
    else{
        var idL = (idNumber + 1).toString();
       $("#idL").css({
        "margin-top":"-"+ diff + "px",
        "clear":"both",
    });
    }
}
}
});

The fiddle: http://jsfiddle.net/kermit77/hswxc06w/26/

enter image description here

The idea is, that the difference in height is applied as a negative top margin to the shorter div, bringing it up flush under the dive above it.

enter image description here

I am not sure what I'm doing wrong, I suspect it is more than one thing. I've been fiddling around with it (no pun intended) and cannot make it work.

I don't think it's being acted on at all.

I'd appreciate any feedback

I solved this with the accepted answer's help, see full code here:

https://stackoverflow.com/a/32553919/3956566

Community
  • 1
  • 1

1 Answers1

1

Take a look at my way of figuring out a solution for this.

I took a couple of new divs and made the existing divs to hide behind, then appended the divs as per class to right and left of the two divs.

JS fiddle link
The below is my code for adding the existing divs into two new divs

$('#div1').css("float", "left");
$('#div2').css("float", "right");

$('#div1').append($('.left'));
$('#div2').append($('.right'));
Vamsi
  • 102
  • 9