CODEWITHSUNDEEP
javascriptcsshtml
MirrorMirror
MirrorMirror

Reputation: 188

set a newly created div on top of the older divs

I have a bunch of divs inside a container. The position of the content divs is relative, because I want them to appear one below the other and their height is unknown.

These divs are created dynamically (appendchild) inside the container div. Now, each div appears on the end (bottom) of the stack but my requirement is that the divs have a "newest first" option too, that is, each new div appears on top, not on bottom of the content divs (if the user selects the "newest first" in the settings).

html:

<div class="container">
    <div id="div1" class="content">aaa<br>aaa</div>
    <div id="div2" class="content">bbb<br><br>bbb</div>
    <div id="div3" class="content">ccc</div>
    <div id="div4" class="content">ddd</div>
</div>

css:

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid red;
}

.content {
    position: relative;
    top: 0px;
    left: 5px;
    width: 200px;
    height: auto;
    border: 1px solid blue;
    margin: 3px;
}

http://jsfiddle.net/jk559/1/

so I'd like the end-user visible order to be: div4, div3, div2, div1.

How can I achieve this? (css/js)

preferrably no jquery.

thanks in advice!

Upvotes: 1

Views: 427

Answers (7)

medBouzid
medBouzid

Reputation: 8382

try this :

$("div[id*=div]").sort(function(a,b){
    if(a.id > b.id) {
        return -1;
    } else {
        return 1;
    }
}).each(function() { 
    var elem = $(this);
    $(".container").append(elem);
});

this will sort your divs inside container like this : div4, div3, div2, div1

if you want change the order to : div1, div2, div3, div4 just change if(a.id > b.id) to if(a.id < b.id)

you can add a link called change order then call this code when you click on it

Upvotes: 0

z33m
z33m

Reputation: 6043

Take a look at this answer about reordering dom items.

Basically, you have to maintain a state that decides the ordering. When you insert items (see insertItem below) you append or prepend based on the state. When the user selects the newest first option (see newFirst below), you first reverse the dom elements and then flip the state so that subsequent insert happen at the right place.

var newFirst = false;
var list = document.getElementById('my-list');

function newFirst() {      
    var items = list.childNodes;
    var itemsArr = [];
    for (var i in items) {
        if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
            itemsArr.push(items[i]);
        }
    }

    itemsArr.reverse();

    for (i = 0; i < itemsArr.length; ++i) {
      list.appendChild(itemsArr[i]);
    }

    newFirst = !newFirst;
}

function insertItem(content) {
    var item = document.createElement("div");
    item.setAttribute("class","content");
    item.innerHTML = content;

    if(newFirst) {
        list.insertBefore(item, list.firstChild);
    } else {
        list.appendChild(item);
    }
}

Upvotes: 1

Coder
Coder

Reputation: 7076

JS FIDDLE UPDATED DEMO

Use prepend() to add as first child of an element

/* $( ".container" ).prepend( "Your div with id here" ); */
/* Example */

 $( ".container" ).prepend( "<div id='div5' class='content' >div5 on top </div>" );

Upvotes: 2

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

You can insert content in the beginning simply using .prepend() .

$(".container").prepend("<div id='div5' class='content'>eee</div>");

Demo

Upvotes: 2

Anto Subash
Anto Subash

Reputation: 3215

try this

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.setAttribute("id","div5");
theKid.setAttribute("class","content");
theKid.innerHTML = 'eee';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

Demo Fiddle http://jsfiddle.net/jk559/4/

Upvotes: 3

codingrose
codingrose

Reputation: 15699

Pure css solution:

Use flexbox to achieve this.

.container {
    display:flex;
    flex-direction:column-reverse;
    justify-content: flex-end;
    align-content: flex-end;
}

Updated fiddle here.

Read more information here.

Upvotes: 5

Sriraman
Sriraman

Reputation: 7937

You can easily do it with JQuery with the following function.

$('.container > div').each(function() {
    $(this).prependTo(this.parentNode);
});

UPDATED FIDDLE

As you mentioned in the question, I will try to attain the expected output with the pure javascript.

Upvotes: 3

Related Questions