17 Sizing Elements With JavaScript

Sizing elements with JavaScript

Both our sidebar and our Bootsy editor should fill what vertical space is available to them. CSS alone isn't adequate to handle the job, but we can get it done easily with JavaScript.

We'll just add 3 lines to the closure we created to run on page load. This time we're creating something to occur whenever the page is resized, and then we're actually triggering a resize event so the handler will also run when the page is first loaded.

$(function() {
  $('#notes > li').click(function(ev) {
    ev.preventDefault();
    location.href = $(this).data('url');
  });
  $(window).resize(function() {
    $('#sidebar').height($(window).height() - 55);
    $('.bootsy_text_area').height($(window).height() - 210);
  }).trigger('resize');
});

We'll also update our CSS to include styles for the sidebar. This CSS will allow the notes list to scroll independently of the rest of the page.

#sidebar {
  position: absolute;
  width: 95%;
  overflow: hidden;
  overflow-y: scroll;
}