CODEWITHSUNDEEP
javascriptjqueryresize
user823527
user823527

Reputation: 3712

Resizing an element when the document resizes

I'd like to resize an element when the document resizes. If a draggable div is moved around and causes the document to scroll. I want to resize an element like this $("#page").css('height','120%');. I do that in the onresize event for a div. Is that the right way? Is there a different event that where I should do this?

Here is the HTML.

<div id="matting" onresize="resize_page();"> <!-- Begin page matting div --> 

  <div id="page"> <!-- Begin page div --> 

  </div> <!-- End page div --> 

</div> <!-- End page matting div --> 
<script type="text/javascript"> 
    function resize_page() { 
        alert ('resize_page'); 
        $("#page").css('height','120%'); 
    } 
</script>

Upvotes: 0

Views: 114

Answers (4)

user823527
user823527

Reputation: 3712

The solution was to reset the height of the page div to be that of the scrolling height of the parent div (the document). 

     var page_height = $('#matting')[0].scrollHeight;
     $("#page").css('height',page_height);

Upvotes: 0

Korvin Szanto
Korvin Szanto

Reputation: 4511

I understand now, the new code uses a plugin that allows the resize method to be applied to every element.

http://jsfiddle.net/P9Ppb/ << Resize the window.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to hook into the draggable stop callback:

$("#matting" ).resizable({
   stop: function(event, ui) { ...YOUR CODE... }
});

Upvotes: 1

Robin Andersson
Robin Andersson

Reputation: 5380

You can hook the resize event in jQuery: http://api.jquery.com/resize/

A better solution would probably be to put a restriction on the draggable object so it can't move out of bound and scroll the page.

Upvotes: 0

Related Questions