Creating Boxes In Javascript
I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I
Solution 1:
You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.
Solution 2:
It is difficult to understand what you want, maybe this?.
<script>window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50var height=window.innerHeight-50-120for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.lengthdocument.body.appendChild(el);
}
}
</script>Solution 3:
<html><head><title>Boxes on Boxes on Boxes</title><styletype="text/css">#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style><scriptlanguage="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
functionboxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
functioncolorChange(field,group) {
switch (group) {
case1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
functionfontChange(field,group) {
switch (group) {
case2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script></head><bodyonload="boxes()"><divid="box_group1"><divid="box1"onclick="colorChange(this,1)">
Orange
</div><divid="box2"onclick="colorChange(this,1)">
Blue
</div><divid="box3"onclick="colorChange(this,1)">
Green
</div></div><divid="box_group2"><divid="box4"onclick="fontChange(this,2)">
Arial
</div><divid="box5"onclick="fontChange(this,2)">
Courier
</div><divid="box6"onclick="fontChange(this,2)">
Tahoma
</div></div><divid="box_group3"><divid="box7"onclick="fontChange(this,3)">
Arial
</div><divid="box8"onclick="fontChange(this,3)">
Courier
</div><divid="box9"onclick="fontChange(this,3)">
Tahoma
</div></div><divid="box_group4"><divid="box10"onclick="colorChange(this,4)">
Orange
</div><divid="box11"onclick="colorChange(this,4)">
Blue
</div><divid="box12"onclick="colorChange(this,4)">
Green
</div></div><divid="textbook">Textbook</div></body></html>
Solution 4:
Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv #mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color arrayvar colorArray = newArray("red", "green", "gray", "blue");
// loop through as many boxes you want to createfor(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Here's Another thread explaining similar Case,And It's Solution
Post a Comment for "Creating Boxes In Javascript"