5

How to Calculate Dynamically Height of Window and Use in AngularJS

 2 years ago
source link: https://www.js-tutorials.com/angularjs-tutorial/calculate-dynamically-height-windows-use-angularjs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to Calculate Dynamically Height of Window and Use in AngularJS

This quick angularjs tutorial helps to compute window height by screen resolution. The responsive theme can only help to modify the screen width but not to dynamically adjust the height. We give a script that calculates the height of the windows dynamically and places them in the page layout in the container height.

The theme is usually header, sidebar and footer so that the windows are calculated using the approach below,

container_height = window_height-header height - footer_height;

Calculate Height of Window using JavaScript

I use the angularjs but the object to obtain window object is JavaScript $window variable. Javascript code helps in the calculation of dynamic height and in a variable setting with $raotscope> (global variable in angularjs application).

//set windows height
      $scope.setHeight = function() {
         var windowHeight = $(window).innerHeight();
         windowHeight= windowHeight-150;
         console.log(windowHeight);
         $rootScope.windowHeight = windowHeight;

Now call the variable $scope.setHeight on the file layout or when the applications are initialised:

$scope.setHeight();

You must also call this function on the window object to resize the template layout.

    $(window).resize(function() {
$scope.setHeight();

How to Set Dynamic Height

You need to simple call variable as angularjs uses, Please make sure variable must be suffix with 'px'.

<tbody ng-style="height:{{windowHeight-100}}px;">

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK