Question

I’m working on building a simple 4-pane object editor and canvas sizing is a little problematic. I learned that I should not size the canvas inside CSS and should instead define explicit pixel width and height. I’ve been trying to set everything up so that everything resizes on the fly when the browser is resized, so I basically have a 5×5 table with rows 1,3 and 5 as a height of 5px and columns 1,3 and five with a width of 5px. The four cells that remain are all equal size.

I placed a div inside each of the found table cells and give the div a background and a border using CSS, along with a padding of 0px. I don’t specify a width or height (but I’ve tried it with 100% as well).

I place a canvas inside each div and don’t specify dimensions until everything is laid out. Afterward, I read the width and height of one of the table cells and set the size of each canvas according to that. It works fine except that I have a strange 3px gap between the bottom of each canvas and the border of it’s containing div. For the table, I’ve specified padding: 0px; border-spacing: 0px; and border-collapse:collapse; and for the td cells, have specified padding: 0px;

The gap is problem #1.

The second problem is that because each canvas has it’s width and height defined, all other components on screen resize automatically with a change in windows size, but the canvas elements remain fixed. Can I somehow detect a window resize event and regenerate the canvas elements? Ideally, since a resize while they’re visible is kind of slow, I would like to hide or remove the elements when the resize begins and rebuild and show them when resize is complete. ???

Answer 1

$(window).resize(function() {
    // handle accordingly
});