CODEWITHSUNDEEP
javascripthtml
mkyong
mkyong

Reputation: 12947

Dynamic div from bottom of page - Javascript

I want to insert a new div each time a new user is found in my database. I have the following code working if I change the CSS (remove "bottom" and "absolute" from the classes). The problem is that it starts at the top and each div is inserted below the previous one. I would like for the divs to be in the bottom left hand corner of the screen, and then move up when a new div is inserted. It would essentially push the existing divs up and the newest div would be at the bottom of the stack. Any ideas on how to do this? Any help would be appreciated. Thanks!

This code will insert a new div, but it just places it on top of the previous one.

.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
    width:200px;
    height:50px;
    bottom:0;
    position:absolute;
}
.redBox {
    padding:8px;
    background: red;
    margin-bottom:8px;
    width:200px;
    height:25px;
    bottom:1;
    position:absolute;
}

<p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
</p>

<div class="greyBox">Users</div>

$("#after").click(function () {
     $('.greyBox').after("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     location.reload();
});

http://jsfiddle.net/ymTtB/

Upvotes: 0

Views: 1639

Answers (2)

Misha Ts
Misha Ts

Reputation: 431

Add a new div container with class "bottom" http://jsfiddle.net/4np4q/

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
    .bottom{
    position: absolute;
    bottom: 0;     
    }
    .greyBox{
        padding:8px;
        background: grey;
        margin-bottom:8px;
        width:200px;
        height:50px;

    }

    .redBox{
        padding:8px;
        background: red;
        margin-bottom:8px;
        width:200px;
        height:25px;
    }
</style>

</head>
<body>

  <p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
  </p>

  <div class="bottom">
    <div class="greyBox">Users</div>
</div>
<script type="text/javascript">

    $("#after").click(function () {
      $('.greyBox').after("<div class='redBox'>User 1</div>");
    });

    $("#reset").click(function () {
      location.reload();
    });

</script>
</body>
</html>

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49198

It's your position: absolute on .redbox:

.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
    width:200px;
    bottom:0;
    position:absolute;
}

.redBox {
    padding:8px;
    background: red;
    margin-bottom:8px;
    width:200px;
    height:25px;
}

Also, I imagined you were trying to add to the .greyBox element, instead of after it.

$("#after").click(function () {
     $('.greyBox').append("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     $('.greyBox').children().remove();
});

http://jsfiddle.net/Bb6am/

If you really do want .after() greyBox, you'll need to use a wrapper and apply the "bottom" style to it:

.users {
    width:200px;
    bottom:0;
    position:absolute;
}
.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
}

<p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
</p>

$("#after").click(function () {
     $('.greyBox').after("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     $('.users').children().not('.greyBox').remove();
});

http://jsfiddle.net/Bb6am/2/

Upvotes: 0

Related Questions