Question

I have this code:

function viewport() {
var height = $(window).height();
viewport = parseInt(height) + 'px';
$(".page").css('height',viewport);
$(".dot_page").css('height',viewport);
}

All it does is resize a div according to the viewport height. This happens once during the page load, but I would like it to update dynamically if the viewport is resized without reloading the page (someone just resizing their browser with their mouse).

Thank you

Answer 1

Use the resize event on the window object

$(window).resize(function() {
  viewport();
});

You should also change your function because:

viewport = parseInt(height) + 'px';

reassigns the viewport variable, which is initially the function to

var heightString = parseInt(height) + 'px';

with both of these, it should fix your problems.

The resize event assignment should be in a $(document).ready call.

With all your code, this looks like:

<script>
function viewport() {
  var height = $(window).height();
  var viewportHeight = parseInt(height) + 'px';
  $(".page").css('height',viewportHeight);
  $(".dot_page").css('height',viewportHeight);
}

$(document).ready(function() {
  viewport();
  $(window).bind('resize', viewport);

  $(".scroll").click(function(event){
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1250);
  });

  $(".circle_col > a > img").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, 200);
    },
  function() {
    $(this).stop().animate({"opacity": "1"}, 200);
  });
});
</script>