CODEWITHSUNDEEP
javascript
domii
domii

Reputation: 169

Setting left position of an element that changes dynamically(in a loop)

I have the following JavaScript code. ***

var pos = document.getElementById('pos');
pos.style.position = 'relative';
pos.style.width = '100%';
pos.style.height = '100%';
pos.style.background = 'gray';
for(i=1;i<4;i++)
{
var div = document.createElement('div');
var node = document.createTextNode("This is new.");
div.appendChild(node);
var j = i-1;
var f = Math.round(250/(i+1));
var d = Math.round(250/i);
var col = 'rgb('+f+','+140+','+d+')';
div.style.background = col;
div.style.width = '200px';
div.style.height = '300px';
div.style.position = 'relative';
div.style.top = '0px';
div.style.border = 'solid';
div.style.borderColor = 'green';
div.style.borderWidth = '2px';
left = Math.floor((j*200)+30+30);
left = left+'px';
div.style.left = '30px';
pos.appendChild(div);
}

HTML code: ***

<div id = "pos"></div>

The first element is positioned correctly with 0px top and 30px left however the second and third are off the mark, I tried to use display as inline but that only set them on same line but the left positioning were not set. The result is as shown in this picture

But I would like it to appear as:

Upvotes: 2

Views: 2283

Answers (2)

Domain
Domain

Reputation: 11808

 var pos = document.getElementById('pos');
     pos.style.position = 'relative';
     pos.style.width = '100%';
     pos.style.height = '100%';
     pos.style.background = 'gray';
     for(i=1;i<4;i++)
     {
     var div = document.createElement('div');
     var node = document.createTextNode("This is new.");
     div.appendChild(node);
     var j = i-1;
     var f = Math.round(250/(i+1));
     var d = Math.round(250/i);
     var col = 'rgb('+f+','+140+','+d+')';
     div.style.background = col;
     div.style.width = '200px';
     div.style.height = '300px';
     div.style.position = 'relative';
     div.style.display = 'inline-block';  //added 
     div.style.marginLeft = '1%';       //added
     div.style.top = '0px';
     div.style.border = 'solid';
     div.style.borderColor = 'green';
     div.style.borderWidth = '2px';
     left = Math.floor((j*200)+30+30);
     left = left+'px';
     div.style.left = '30px';
     pos.appendChild(div);
     }

Make display of each div to inline-block and give them a margin that will do Check this

Upvotes: 0

user5454715
user5454715

Reputation:

Add a display:inline-block and put some margin-right:10px to the dynamically created elements

Here is the edited code:

var pos = document.getElementById('pos');
     pos.style.position = 'relative';
     pos.style.width = '100%';
     pos.style.height = '100%';
     pos.style.background = 'gray';
     for(i=1;i<4;i++)
     {
     var div = document.createElement('div');
     var node = document.createTextNode("This is new.");
     div.appendChild(node);
     var j = i-1;
     var f = Math.round(250/(i+1));
     var d = Math.round(250/i);
     var col = 'rgb('+f+','+140+','+d+')';
     div.style.background = col;
     div.style.width = '200px';
     div.style.height = '300px';
     div.style.position = 'relative';
     div.style.display="inline-block"; //add this line
     div.style.marginRight="10px";     //add this line
     div.style.top = '0px';
     div.style.border = 'solid';
     div.style.borderColor = 'green';
     div.style.borderWidth = '2px';
     left = Math.floor((j*200)+30+30);
     left = left+'px';
     div.style.left = '30px';
     pos.appendChild(div);
     }

Check the fiddle

Upvotes: 2

Related Questions