How to trigger a function on resize

How to trigger a function on resize

I found the following script here: http://css-tricks.com/resolution-specific-stylesheets/ It's a script to change a stylesheet based on the browser width.

My problem is that when you resize the browser window, the stylesheet doesn't change. It works if you reload, but not on resize. I'm using the script as part of a Wordpress theme.

  1. jQuery(document).ready(function($){
  2.       $(function() {
  3.           adjustStyle($(this).width());
  4.           $(window).resize(function() {
  5.               adjustStyle($(this).width());
  6.           });
  7.       });
  8.    
  9.     function adjustStyle(width) {
  10.           width = parseInt(width);
  11.           if (width < 480) {
  12.               $("#size-stylesheet").attr("href", "handheld.css");
  13.           } else if ((width >= 480) && (width < 1024)) {
  14.               $("#size-stylesheet").attr("href", "small.css");
  15.           } else if ((width >= 1024) && (width < 1500)) {
  16.               $("#size-stylesheet").attr("href", "medium.css");
  17.           } else {
  18.              $("#size-stylesheet").attr("href", "wide.css");
  19.           }
  20.       }
  21. });
Any ideas as what could be wrong?

Thanks