0

I have been googling for a while and so far I found how to resize window with window resize directive but in my code I'm using window.innerHeight to get initial height. I can use it any time except I need an event to when it changes. JavaScript window resize event does not fire for me for some reason. Here is my code inside of the controller:

function adjustH() {
    var bodyElem = document.getElementsByTagName('body')[0];
    var topP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-top');
    topP = topP.substring(0, topP.indexOf("px"));
    var bottomP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-bottom');
    bottomP = bottomP.substring(0, bottomP.indexOf("px"));
    vm.h = window.innerHeight - topP - bottomP - 20;
}

window.onresize = function(event) {
    adjustH();
}

Can anybody tell me if it is impossible to do it this way and I have to go the directive route? Or if its possible please tell me what I'm missing.

Community
  • 1
  • 1
serge
  • 1,590
  • 2
  • 26
  • 49

2 Answers2

1

If you are working with angularJS, did you pass $window as a dependency to you controller.

I have had similar issues with this before and it was because the depoendency was not set. Hope this helps.

Tekill
  • 1,171
  • 1
  • 14
  • 30
  • Would be helpful if you added your angularJS controller and any directives or services you are using – Tekill Nov 20 '15 at 17:44
  • Never mind, you you are right. But the only thing I dont understand is why my `window.innerHeight` worked and I didn't have to pass it to controller. – serge Nov 20 '15 at 17:46
  • Also my canvas set to `height="{{vm.h}}"` but it only resizes when I mouse over – serge Nov 20 '15 at 17:59
  • Post the rest of the code if you don't mind, it will help identify the issue... May have something to do with your scopes and/or event propagation – Tekill Nov 23 '15 at 14:06
-1

After reading your comment which stated

Also my canvas set to height="{{vm.h}}" but it only resizes when I mouse over

It seems that you need to call $scope.$apply() (or $rootScope.$apply()) in order to update the height property of the element.

If you add more code from your directive/controller, I could give you a more detailed answer.

Chic
  • 9,836
  • 4
  • 33
  • 62