title: box-sizing x IE7, the last battle
body: <p>I've been searching through the web for a solution that can viabilize box-sizing in the IE7 (I know, the year is 2014, but the project (therefore the clients) still demand this). I really need box-sizing because the entire project is responsive.</p>
  
  <p>I found this <a href="https://github.com/Schepp/box-sizing-polyfill" rel="nofollow">boxsizing.htc</a> and it works pretty well in almost any case. But, unfortunately, it is not my case.
  Because I'm using angularjs and I have a div with three columns (children divs with float left) inside and i can click on a button to change the number of columns. When this happens the boxsizing.htc process all its calculations again making my width and height smaller each time I change the number of columns.</p>
  
  <p>So, I thought, angularjs can solve this. I found this <a href="http://microblog.anthonyestebe.com/2013-11-30/window-resize-event-with-angular/" rel="nofollow">pretty interesting link</a></p>
  
  <p>I could adapt that code into this:</p>
  
  <pre><code>myApp.directive('resizable', function($window){
  return {
          restrict: 'A',
          link: function(scope, element){
              scope.initializeWindowSize = function(){
                  var win = angular.element($window);
                  scope.windowHeight = win.innerHeight();
                  scope.windowWidth = win.innerWidth();
                  scope.sideHeight = scope.windowHeight - 80;
  
                    /* ie 7 */
                  var workArea = angular.element('.workArea');
                  var workWidthPadding = parseInt(workArea.css('paddingLeft')) + parseInt(workArea.css('paddingRight')) + parseInt(workArea.css('borderRightWidth')) + parseInt(workArea.css('borderLeftWidth'));
                  var workHeightPadding = parseInt(workArea.css('paddingTop')) + parseInt(workArea.css('paddingBottom')) + parseInt(workArea.css('borderTopWidth')) + parseInt(workArea.css('borderBottomWidth'));
  
                  scope.workWidth = scope.windowWidth - 228 - 210 - workWidthPadding;
                  scope.workHeight = scope.sideHeight - 60 - 25 - 2 - workHeightPadding;
                  console.log('height', scope.workHeight);
  
              };
  
              scope.initializeWindowSize();
              angular.element($window).bind('resize',function(){
                  scope.initializeWindowSize();
                  scope.$apply();
  
              }); 
          }
      }
  });
  </code></pre>
  
  <p>But that code don't solve all of my problems, just when I can relate the div's width or height with window width or height which it is not all the cases.</p>
  
  <p>Finally, I decide, let's make a jQuery plugin. I came up with this:</p>
  
  <pre><code>$.fn.boxsizing = function(){
  // if(navigator.appVersion.indexOf("MSIE 7.") != -1){
  
      var thisWidth = this.width(),
          thisHeight = this.height(),
  
          thisborderLeft = parseInt(this.css('borderLeftWidth')),
          thisborderTop = parseInt(this.css('borderTopWidth')),
          thisborderRight = parseInt(this.css('borderRightWidth')),
          thisborderBottom = parseInt(this.css('borderBottomWidth')),
  
          thispaddingLeft = parseInt(this.css('paddingLeft')),
          thispaddingTop = parseInt(this.css('paddingTop')),
          thispaddingRight = parseInt(this.css('paddingRight')),
          thispaddingBottom = parseInt(this.css('paddingBottom')),
  
          newWidth = thisWidth - thisborderLeft - thisborderRight - thispaddingLeft - thispaddingRight,
          newHeight = thisHeight - thisborderTop - thisborderBottom - thispaddingTop - thispaddingBottom;
  
          console.log(newWidth, newHeight);
          this.css({'width':newWidth, 'height':newHeight});
  // }
  }
  </code></pre>
  
  <p>This almost worked.
  I can't figured how to apply this code in window resize. </p>
  
  <pre><code>$(window).resize(function(){
    $('div.FOO').boxresizing();
  });
  </code></pre>
  
  <p>Can someone help? I don't know if angularjs can handle alone this kind of stuff or, if I really need this plugin and, how can I make things work in the window resize.</p>
  
  <p>Thank you and sorry for my poor english.</p>