I would like to do a jquery function that when window resize, it search div with css-class name "taskbox" and set the max-height to the parent div height - current offset for the taskbox to be able to be smaller than the available space but do not extend it.

I would like to do a jquery function that when window resize, it search div with css-class name "taskbox" and set the max-height to the parent div height - current offset for the taskbox to be able to be smaller than the available space but do not extend it.

• javascript
• jquery

2 Answers 2

I'm not certain exactly what you're trying to do, but to get all the elements that contain an element that has the taskbox class you can use:

$(":has(.taskbox)").height(300);

This will adjust the height of all those elements. To adjust the height of all the taskboxes based on the height of the parent element on window resize you can do something like this:

$(window).resize(function() {
  var parent = $(".taskbox");
  $(".taskbox").each(function() {
    $(this).height($(this).parent().height() - 50);
  });
});

Keep in mind that the parent elements will need to have height specified in order for this to work well. You can get the height of the window with:

$(window).height();

You might try looking for an existing solution (jQuery has an immense plug-in munity):

At the very least this will get you started.