-
Aug 18th, 2015, 08:46 PM
#1
Breakpoint skips create element
I'm wanting to create a grid of images in a DIV element; so I figure I'd use a nested loop and create the images, set some properties, and add them to the DIV element. However, when I debug my code using FireBug, it goes through the loop but skips over my createElement line as well as when I try to set any properties. Here is the code that I'm using:
Code:
var grid = document.getElementById("Grid");
var h = grid.clientHeight;
var w = grid.clientWidth;
var pb;
for (x = 0; x < h; x = x + h / 50) {
for (y = 0; y < w; y = y + w / 50) {
pb = document.createElement("img");
pb.style.border = "1px solid black";
pb.style.height = "50px";
pb.style.width = "50px";
grid.appendChild(pb);
}
}
It skips the first 4 lines in my For loop. Any reasons why?
-
Aug 19th, 2015, 09:17 PM
#2
Re: Breakpoint skips create element
Have you checked the for loop conditions? Is clientHeight returning a value > 0? Maybe try with getBoundingClientRect. Div elements will have zero height by default, unless you specify it explicitly.
Don't forget to initialise all variables, including "x" and "y". Strict mode might also help you out too, as will JSHint and JSLint.
JavaScript Code:
"use strict"; var grid = document.getElementById("Grid"); var h = grid.clientHeight; var w = grid.clientWidth; var pb; for (var x = 0; x < h; x = x + h / 50) { for (var y = 0; y < w; y = y + w / 50) { pb = document.createElement("img"); pb.style.border = "1px solid black"; pb.style.height = "50px"; pb.style.width = "50px"; grid.appendChild(pb); } }
Last edited by tr333; Aug 19th, 2015 at 09:23 PM.
-
Aug 20th, 2015, 07:20 AM
#3
Re: Breakpoint skips create element
Hi there dday9,
This may be a possible solution...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="/" media="screen">
<style media="screen">
body {
background-color:#f0f0f0;
}
#grid{
height:200px;
padding-top:10px;
padding-bottom:10px;
margin:0;
border:1px solid #999;
background-color:#fff;
}
.thumb {
float:left;
width:46px;
height:46px;
margin:1px;
border:1px solid #000;
border-radius:4px;
background-color:#fcfcfc;
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
(function() {
'use strict';
var gr=document.getElementById('grid'),
h,w,rh,rw,mw,pb,x,y;
function createThumbs(){
h=grid.clientHeight,
w=grid.clientWidth,
rh=Math.floor(h/50),
rw=Math.floor(w/50),
mw=(w%50)/2+'px';
for(x=0;x<rh;x++) {
for(y=0;y<rw; y++) {
pb=document.createElement('img');
pb.src='http://coothead.co.uk/images/anim'+w%6+'still.gif';/* just for amusement */
pb.className='thumb';
gr.appendChild(pb);
}
}
gr.style.paddingLeft=mw;
}
createThumbs();
onresize=function(){
while(gr.firstChild) {
gr.removeChild(gr.firstChild);
}
createThumbs();
}
})();
</script>
</body>
</html>
Last edited by coothead; Aug 20th, 2015 at 07:26 AM.
Reason: tpynig eorrr
~ the original bald headed old fart ~
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|