CODEWITHSUNDEEP
csshtmlposition
tornal vergaro
tornal vergaro

Reputation: 157

Ordering divs with javascript

I have something like this: http://s9.postimg.org/wwizuwnq7/Untitled_1.png

And if you see, the divs (Where I marked in green) have a space of some pixel. And i want if there is a 0-20 pixel space between divs, to order them like this: http://s23.postimg.org/ky2htcpt7/image.png

So, i started to do this on javascript and i dont know to to continue..

var position = new Array();
$(".post").each(function(){
    position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});

now i have all the position of all the divs, and now i need to check where divs have a space of 0 - 20 pixel, and then i want to take down the higher block.

I not sure if this is the good way, and if now, i need another idea..

Thanks!

Upvotes: 1

Views: 71

Answers (5)

tornal vergaro
tornal vergaro

Reputation: 157

I managed to find a method!

var position = new Array();
$(".hblocks").each(function(){
    position[$(this).attr("id")] = $(this).offset().top;
});

$.each(position, function(key, value) {
    $.each(position, function(key2, value2) {
        var space = value2 - value;
        if (space <= 20 && space >= -20 && space != 0)
        {
            var finalSpace = Math.max(value, value2);
            var spaceplus = space + 28;
            if (finalSpace != value)
            {
                $("#" + key).css("margin-top",spaceplus + "px");
            }
            else
            {
                $("#" + key2).css("margin-top",spaceplus + "px");
            }
        }
    });
});

Upvotes: 1

cronoklee
cronoklee

Reputation: 6722

This is untested but something like this should work after your code...

The idea is to continuously add 1pixel to the top margin of the problematic div until the difference between the two divs is 20px

 while(position['div1'] - position['div2'] <20){
     $('#div2').animate({marginTop: '+=1px'}, 0);​​​​​​​​​​​​​​​​​
 }

If you want to show them directly in line as in your picture, it's even easier:

 var diff = position['div1'] - position['div2']
 if(diff < 20){
     $('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);​​​​​​​​​​​​​​​​​
 }

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20492

Your answer would be some king of javascript+css coding to verify height of elements .. work on em then re-arrange them.

Stop trying to figure out by yourself, try using Masonry or jQueryEqualHeight explained on CSSTrick.

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Upvotes: 0

cronoklee
cronoklee

Reputation: 6722

You can do this by adding a container div around the bottom 2 blocks. That way they will always be in line, regardless of the height of either of the top two blocks. You should try not to use javascript for styling. CSS is very powerful.

Here's a fiddle: http://jsfiddle.net/kVn7x/

HTML:

<div>
    <div style='height:100px;'></div>
    <div style='height:200px;'></div>
</div>

<div style='clear:left'>
    <div style='height:80px;'></div>
    <div style='height:80px;'></div>
</div>

CSS:

div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}

Upvotes: 0

achudars
achudars

Reputation: 1506

Can't you simply add a bottom margin to the selected element in CSS?

#element {
   margin-bottom: 20px;
}

Upvotes: 0

Related Questions