CODEWITHSUNDEEP
javascriptjqueryhtml
idlackage
idlackage

Reputation: 2863

Stretch canvas to full width and height for dynamic resize

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.

Upvotes: 0

Views: 119

Answers (1)

vol7ron
vol7ron

Reputation: 42099

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 (e.g., 50ms).

See Fiddle

Upvotes: 1

Related Questions