Skip to content

Instantly share code, notes, and snippets.

@codfish

codfish/uiEqualHeights.js

Last active February 12, 2018 09:02
Show Gist options
  • Save codfish/c9e21570a0bc3bee26f6 to your computer and use it in GitHub Desktop.
Save codfish/c9e21570a0bc3bee26f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. codfish revised this gist Oct 6, 2014. 1 changed file with 28 additions and 15 deletions.
    43 changes: 28 additions & 15 deletions uiEqualHeights.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,31 +8,44 @@
    * calculate the height of every direct child (one level down)
    * then set all of them to be the height of the tallest one.
    *
    * EXAMPLE:
    * <ul data-equal-heights>
    * <li>column1</li>
    * <li>column2</li>
    * <li>column3</li>
    * </ul>
    * @example
    <ul data-equal-heights>
    <li>column1</li>
    <li>column2</li>
    <li>column3</li>
    </ul>
    *
    * @ngInject
    */
    function EqualHeightsDirective($timeout) {
    function link($scope, $element, attrs) {
    $timeout(function() {
    var $children = $element.children(),
    currentMaxHeight = 0;
    currentMaxHeight = 0,
    numImagesLoaded = 0,
    $images = $element.find('img'),
    imageCount = $images.length;

    angular.forEach($children, function(child) {
    var childHeight = $(child).outerHeight();
    if (imageCount > 0) {
    angular.forEach($images, function(image) {
    if (image.complete) {
    numImagesLoaded++;
    }
    });
    }

    if (numImagesLoaded === imageCount) {
    angular.forEach($children, function(child) {
    var childHeight = $(child).outerHeight();

    if (childHeight > currentMaxHeight) {
    currentMaxHeight = childHeight;
    }
    });
    if (childHeight > currentMaxHeight) {
    currentMaxHeight = childHeight;
    }
    });

    // set heights
    $children.css({height: currentMaxHeight});
    // set heights
    $children.css({height: currentMaxHeight});
    }
    });
    }

  2. codfish created this gist Sep 29, 2014.
    48 changes: 48 additions & 0 deletions uiEqualHeights.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    'use strict';

    /**
    * Equal Heights
    *
    * Attach this directive to the parent/wrapping element of
    * a bunch of elements that are columns. This directive will
    * calculate the height of every direct child (one level down)
    * then set all of them to be the height of the tallest one.
    *
    * EXAMPLE:
    * <ul data-equal-heights>
    * <li>column1</li>
    * <li>column2</li>
    * <li>column3</li>
    * </ul>
    *
    * @ngInject
    */
    function EqualHeightsDirective($timeout) {
    function link($scope, $element, attrs) {
    $timeout(function() {
    var $children = $element.children(),
    currentMaxHeight = 0;

    angular.forEach($children, function(child) {
    var childHeight = $(child).outerHeight();

    if (childHeight > currentMaxHeight) {
    currentMaxHeight = childHeight;
    }
    });

    // set heights
    $children.css({height: currentMaxHeight});
    });
    }

    return {
    restrict: 'A',
    scope: {},
    link: link
    };
    }

    angular
    .module('ui.equalHeights', [])
    .directive('equalHeights', EqualHeightsDirective)