Home How do I hide a div in angular based upon document height?
Reply: 2

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

Jonathan Sloan
1#
Jonathan Sloan Published in 2017-11-14 18:55:08Z

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

Lex
2#
Lex Reply to 2017-11-14 19:57:05Z

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>

JohnFalcon
3#
JohnFalcon Reply to 2017-11-14 19:15:16Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.332722 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO