Dynamic div in Javascript

Question

I need to implement a dynamic div that pops up for each user. I need it to float over a Google map and each new div would appear below the previous one. It would end up being a stack of users essentially. Right now I have a table that adds a new row each time, but I am having trouble referencing each individual cell. Any advice on how to dynamically create a new div and make the new div appear under the other one(s)? It will float in the bottom left corner of the screen. Any help would be great. Thanks!

EDIT:

Here is some code that will show a div by pressing a button. What do I need to add to make a new div appear under the previous one?

function creatediv(id, html, width, height, left, bottom) {

var newdiv = document.createElement('div'); 
newdiv.setAttribute('id', id); 
if (width) { 
    newdiv.style.width = 200; 
} 
if (height) { 
    newdiv.style.height = 50; 
} 
if ((left || bottom) || (left && bottom)) { 
    newdiv.style.position = "fixed"; 
    if (left) { 
        newdiv.style.left = left; 
        if (bottom) { 
            newdiv.style.bottom = bottom = "10"; 
        } 
    } 

    newdiv.style.background = "#FFFFF"; 
    newdiv.style.border = "4px solid #000"; 

    if (html) { newdiv.innerHTML = html; 
    } 
    else { 
        newdiv.innerHTML = "nothing"; 
    } 
document.body.appendChild(newdiv);
}
}
</script>
</head>
<div>
<input type="button" onclick="creatediv(id, 'User 1', 'width', 'height', 'left', 'bottom')" value="Create Div"/>

 </div>
 </html>

Would you happen to have a link to a website using a similar feature to the one you're proposing? — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Mar 3, 2012 at 14:01
Think of it like a new chat message in a new div. The program checks the db each second to look for new users, if they are found it will add a new row to a table and display the user's name, and then pop up under the previous user's cell, creating a 'stack' of users. I want to switch from cells to divs if possible. — mkyong
– mkyong, Commented Mar 3, 2012 at 14:06

Manishearth · Accepted Answer · 2012-03-03 18:57:08Z

1

Keep a record of the top/bottom etc of the previoisly made div. Also the z-index. Now simply set the top/etc of the new div to a slightly shifted value, and increment the z-index. Repeat.

answered Mar 3, 2012 at 18:57

Manishearth

16.3k8 gold badges61 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic div in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related