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

# 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; }); 
Enter max height:
Window Outer Height is {{windowOuterHeight}}px

Document Height is {{documentHeight}}px

JohnFalcon
3#
 Why don't you try something like this: 
 I would also dismiss the usage of jQuery for a trivial task as fetching those values.