Home/ Questions/Q 7583735
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:45:12+00:00

I want to insert a new div each time a new user is found

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0