将画布拉伸至全宽和全高以动态调整尺寸

Question

I have a page where elements are dynamically added below each other (and can be dragged around). When the number of elements exceed the viewport height, the height of the page gets longer. Same with the user dragging it out of normal bounds--it gets wider.

What is the event that I can track this with? $(window).resize() does not work because the window isn't really resizing. Is there a single event I can handle, instead of doing something like checking the width and height whenever an element is dragged or added?

Fiddle of what I'm talking about .

Answer 1

Inside your click event, you want to re-set the height to the document height.

canvas.height = $(document).height();

See Fiddle

---

Alternatively you can:

$(document).bind('DOMSubtreeModified', function(e) {
    canvas.height = $(document).height();
});

But this is not advised as it will set the height almost every time something happens to the DOM. You can imagine how excessive that is. So it's better to call a function on the events you know would be expanding the content of the page.

Also note that this may not work in IE, for that you might want to create your own function to check the height of the document on some interval (eg, 50ms).

See Fiddle