CODEWITHSUNDEEP
javascriptdynamichtml
mkyong
mkyong

Reputation: 12947

Dynamic div in Javascript

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>

Upvotes: 0

Views: 3653

Answers (1)

Manishearth
Manishearth

Reputation: 16198

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.

Upvotes: 1

Related Questions