CODEWITHSUNDEEP
javascriptjqueryangularjs
Jonathan Sloan
Jonathan Sloan

Reputation: 33

How do I hide a div in angular based upon document height?

Forgive me if this is elsewhere...

I came into a project abandoned half-way through. I've not worked in angular before and need to hide/show a "back to top" button dependent upon whether the document is taller than the viewport. I've tried several different approaches and cannot get anything to work successfully. This is my latest attempt: 

$(document).ready(function() {

    if ($(document).height() > $(window).height()) {
        console.log("document height is greater");
        $('#arrowUp').show();
    } else {
        console.log("window height is lesser");
        $('#arrowUp').show();
    }
});

Thanks in advance

Upvotes: 0

Views: 288

Answers (2)

Lex
Lex

Reputation: 7194

First, I highly discourage the mixing of Angular and jQuery - both are DOM manipulation frameworks and they will step on each other causing you endless headaches as you try to troubleshoot various things.

Here is a very contrived example of the "Angular" way of showing or hiding a div based on the height. You should be able to adapt this to suit your needs of showing the arrow based on a difference in window and document heights (it's hard to demonstrate that in the built-in snippet runner).

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.maxHeight = 1200;
    $scope.windowOuterHeight = window.outerHeight;
    $scope.documentHeight = document.documentElement.clientHeight;
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    Enter max height: <input type="text" ng-model="maxHeight">
  </div>
  <div ng-show="windowOuterHeight < maxHeight">
    Window Outer Height is {{windowOuterHeight}}px <br/><br/>
    Document Height is {{documentHeight}}px
  </div>
</div>

Upvotes: 0

JohnFalcon
JohnFalcon

Reputation: 71

Why don't you try something like this:

<div id="arrowUp" ng-show="$(document).height() > $(window).height()" >
  /\
</div>

I would also dismiss the usage of jQuery for a trivial task as fetching those values.

Upvotes: 1

Related Questions