Menu
I want to create div dynamically based on some calculations.I am able build div's dynamically but the only issue is it's not taking height and width on fly.please any one share their view or code if possible.
Here's the script which i used for your reference.
<script type="text/javascript" language="javascript">
function createDiv()
{
var totalheight=400;
var totalwidth = 600;
var height = 80;
var width = 40;
var divheight = totalheight / height;
var divwidth = totalwidth / width;
var id=1;
for(var i=1;i<=divheight;i++)
{
var eh=divwidth;
var fh=1;
for (var w = 1; w <= divwidth; w++)
{
var div=document.createElement("<div id='"+id+"' style=\"background:#F0E68C;width:'"+width+"'px;height:'"+height+"'px;border:solid 1px #c0c0c0;padding: 0.5em;text-align: center;float:left;\"></div>");
document.body.appendChild(div);
eh=eh+divheight;
fh=fh+divheight;
id++;
}
var div1=document.createElement("<br/>");
document.body.appendChild(div1);
}
}
</script>
Thanks in advance.
992
Try this.. hope this is what you are trying to do..
<html>
<script type="text/javascript" >
function newDiv(){
var totalheight=400,ht = 80 , totalwidth = 600 ,wd = 40 ,i;
var divheight = totalheight / ht;
var divwidth = totalwidth / wd;
var id=1;
for(var i=1;i<=divheight;i++)
{
var eh=divwidth;
var fh=1;
for (i = 1; i <= divwidth; i++)
{
var div=document.createElement("div")
div.setAttribute("id","newDivId"+id)
div.setAttribute("class","newDiv")
div.style.width =wd+"px";
div.style.height =ht+"px";
document.body.appendChild(div);
eh=eh+divheight;
fh=fh+divheight;
id++;
}
var div1=document.createElement("<br/>");
document.body.appendChild(div1);
}
}
</script>
<style type="text/css">
.newDiv{
background-color:#F0E68C;
border:1px solid #c0c0c0;
padding: 0.5em;
text-align:center;
float:left;
}
</style>
<body>
<input type="button" onclick="newDiv()" value="Click Me">
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
