Question

181

Creating DIV dynamically, is not taking height and width on fly

rated 0 times [ 186] [ 5] / answers: 1 / hits: 19172 / 13 Years ago, sat, february 18, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raynamadilynl

Add To Favorites

Follow

Total Points: 653

Total Questions: 110

Total Answers: 98

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 13 Years ago mireyag · Accepted Answer

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>