How to make divs re-arrange when another div is positioned between existing?


Tags: javascript,jquery,css,html

Problem :

Here is code and fiddle.

CSS

 #siirto {display: none}

 #container {
 width:90px;
 height:200px;
 border:2px; 
 border-style:solid;
 margin-left: auto ;
 margin-right: auto;
 background-color:#999;

 }

 .luokka {
 position:relative;
 float:left;    
 width:20px;
 height:20px;
 margin:2px 2px 2px 2px;
 border:2px;
 border-style:solid;
 background-color:#3F0;
 }

 .luokka1 {
 position:relative;
 float:left;
 width:80px;
 height:0px;
 margin:2px 2px 2px 2px;
 border:0px;
 border-style:solid;
 background-color:#00F;
 }

HTML

 <div id="container">
 <div id="siirto" class="luokka1"></div>
 <div id="1" class="luokka" onclick="siirra('1', '20', '20')"></div>
 <div id="2" class="luokka" onclick="siirra('2', '20', '20')"></div>
 <div id="3" class="luokka" onclick="siirra('3', '20', '20')"></div>
 <div id="4" class="luokka" onclick="siirra('4', '20', '20')"></div>
 <div id="5" class="luokka" onclick="siirra('5', '20', '20')"></div>
 <div id="6" class="luokka" onclick="siirra('6', '20', '20')"></div>
 <div id="7" class="luokka" onclick="siirra('7', '20', '20')"></div>
 <div id="8" class="luokka" onclick="siirra('8', '20', '20')"></div>
 <div id="9" class="luokka" onclick="siirra('9', '20', '20')"></div>
 <div id="10" class="luokka" onclick="siirra('10', '20', '20')"></div>
 <div id="11" class="luokka" onclick="siirra('11', '20', '20')"></div>
 <div id="12" class="luokka" onclick="siirra('12', '20', '20')"></div>
 </div>

SCRIPT function siirra(idnumero, kokox, kokoy) {

    x=$("#" + idnumero).position();
    var toppi = parseFloat(x.top)+parseFloat(kokoy)+parseFloat(6);

 if ($("#siirto").height() <= 1) {

 $("#siirto").css("top", toppi);
 $("#siirto").fadeIn();
 $("#siirto").animate({height:'40px',opacity:'0.4'},"fast");
 $("#siirto").animate({width:'89px',opacity:'0.8'},"fast");
 $("#siirto").animate({opacity:'1.0'},"fast");

 }

    else if ($("#siirto").height() >= 1) {  
    $("#siirto").animate({width:'40px',opacity:'0.8'},"fast");
    $("#siirto").animate({height:'0px',opacity:'0.4'},"fast");
    $("#siirto").animate({opacity:'1.0'},"fast");
    $("#siirto").fadeOut();


      }
 }

http://jsfiddle.net/SuSDL/9/

When green cubes are clicked it show and reposition "siirto" div. Idea is that it positions below clicked div and pushes green cubes below clicked one to below blue "siirto" div. I cannot get it working, there is something big that i am missing.

If i change

 .luokka1 {
 position:absolute;

it works as planned, but does not push divs below siirto downwards (of course), otherwise it looks as should.

How do i proceed from here?



Solution :

I'm not sure if this is exactly what you want. But you can use insertBefore to push the elements down. Because the elements are not grouped however, this pushes every individual element down.

$(".luokka").click(function(){
        if ($("#siirto").height() <= 1) {
        $("#siirto").insertBefore($(this));
        $("#siirto").fadeIn();
        $("#siirto").animate({height:'40px',opacity:'0.4'},"fast");
        $("#siirto").animate({width:'89px',opacity:'0.8'},"fast");
        }
else{
    $("#siirto").animate({width:'40px',opacity:'0.8'},"fast");
        $("#siirto").animate({height:'0px',opacity:'0.4'},"fast");
        $("#siirto").fadeOut();
}
});

http://jsfiddle.net/SuSDL/12/

If you want to push down the elements as a row you have to group them in a div and insertBefore the parent:

Updated HTML

<div class="containThree">
    <div id="1" class="luokka"></div>
    <div id="2" class="luokka"></div>
    <div id="3" class="luokka"></div>
</div>

Added jquery:

$("#siirto").insertBefore($(this).parent());

http://jsfiddle.net/SuSDL/13/

UPDATE: If you want the rows to stay intact during the animation you're easiest sollution is to remove the width animation:

$("#siirto").width("89");

http://jsfiddle.net/SuSDL/15/

UPDATE FOR ROWWIDTH: You can use the following code to check for row width:

var rowWidth = $(this).parent().width();

Updated fiddle http://jsfiddle.net/SuSDL/17/


    CSS Howto..

    With css, how to ensure wrap on span boundary?

    How To Set Height of Child Div According To Parent Div

    how to relate to a relative css of master page?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    Pure.css 1-3 grid only shows 2 items per line

    How to apply css to php 'echo $tube->error;'?

    How do I center my logo image to another div in CSS horizontally and vertically?

    How do you create a scrolling window over a still background image with CSS?

    How to center links in header using CSS?

    How to programmatically ungroup CSS selectors?

    when users upload an image how can i use css to minimize skewing?

    How are the page-break properties in CSS supposed to work?

    CSS div element - how to show horizontal scroll bars only?

    Styling Tables - How to use column groups to modify TH tag located in that column

    How to add a background image inline style to link tag Rails

    How Would I Center Text In This DIV?

    How can I map 5 distinct zone on a draggable-vertical element?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    how do i hide anchor text without hiding the anchor

    How to apply css style when using ng-print inAngular JS

    How to right and left align every alternate list item in html and css along with the bullets

    How can I bold specific HTML rows and columns with CSS or HTML?

    How to prevent left “post” section from dropping off?

    How to reduce spacing between navigation links CSS

    How to change CSS of an element on hide/show of another element(without custom events)?

    How to add and use jquery and css file in joomla module..?

    How can I cut long text according to available div area size?

    How to set p margin for a section

    CSS How to make text align background-color top line

    How to resize Brand Image?