angularjs - resize div on window resize

Question

I'm trying to get a div to size correctly on page load AND also resize on $(window).resize (but without jQuery)
I've got two sets of code that kinda work :

The 1st from this solution: angularJS window resize issue

myapp.directive('resize', function($window) {
    return function(scope, element, attr) {
        var w = angular.element($window);
        w.on('resize', function() {
            var hh = document.getElementById('header').offsetHeight;
            var fh = document.getElementById('footer').offsetHeight;
            console.log('hh & fh', hh, fh);

            var tp = hh + 2;
            var bt = fh + 2;
            console.log('tp & bt', tp, bt);                

            var changes = {
                bottom: bt + 'px',
                top: tp + 'px',
            }
            element.css(changes);
            scope.$apply();
        });
    };
});

...which works fine on window resize, but not on initial load / refresh

The 2nd uses a link property

myapp.directive('contentsize', function($window) {
    return {
        restrict: 'A',
        scope:{},
        link:function (scope, element, attrs) {
            scope.$watch(function(){return $window.innerHeight;}, 
                function () {
                    var hh = document.getElementById('header').offsetHeight;
                    var fh = document.getElementById('footer').offsetHeight;
                    console.log('hh & fh', hh, fh);                    

                    var tp = hh + 2;
                    var bt = fh + 2;
                    console.log('tp & bt', tp, bt);                

                    var changes = {
                        bottom: bt + 'px',
                        top: tp + 'px',
                    }
                    element.css(changes);
                }, 
            true);
        }
    };
});

...which works fine on initial load / refresh but not on window resize

Questions:
- how do I get either of these solutions to work on initial load AND window.resize
- What's the optimum solution ? (1st solution indicates that $watch has unnecessary overhead)

jsFiddle is here http://jsfiddle.net/goredwards/012jsvrp/
(just swap the 'resize1' for 'resize2' in the html to see the 2nd 'solution')

PS The 2px space between divs is deliberate.

Did you have a look a the vm units for css ? it may help you resizing automatically css-tricks.com/viewport-sized-typography — sam
– sam, Commented Dec 12, 2014 at 9:05
@sam thanks for the info - but how is using VM units any different from using % (which don't work in this case due to max / min heights on the header & footer) ? — goredwards
– goredwards, Commented Dec 12, 2014 at 11:21

Jscti · Accepted Answer · 2014-12-12 09:49:31Z

2

Why don't you just call the same function at init and resize ?

myapp.directive('resize', function($window) {
    function updateUI(element) {
        var hh = document.getElementById('header').offsetHeight;
        var fh = document.getElementById('footer').offsetHeight;
        console.log('hh & fh', hh, fh);

        var tp = hh + 2;
        var bt = fh + 2;
        console.log('tp & bt', tp, bt);                

        var changes = {
            bottom: bt + 'px',
            top: tp + 'px',
        }
        element.css(changes);
    }

    return function(scope, element, attr) {
        var w = angular.element($window);

        updateUI(element);

        w.on('resize', function() {
            updateUI(element);
            scope.$apply();
        });
    };
});

answered Dec 12, 2014 at 9:49

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goredwards Over a year ago

good stuff - seems to work well - plus don't need the scope.$apply either !

Collectives™ on Stack Overflow

angularjs - resize div on window resize

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related