Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ First, add `angular.vertilize` to your Angular application module dependencies.
</div>
```

## Usage: smallest height
Is it possibel do set, intead watch for the tallest element as base height, use the smallest one.

## Example: smallest height
```html
<div vertilize-container="min">...</div>
```

## How it works
The `vertilize-container` directive groups and gives scope to it's child `vertilize` directives. The `vertilize` elements DO NOT need to be the immediate children of `vertilize-container` and can be on any kind of element, as long as its CSS `display` property is set to `block` or `inline-block`. When any of the `vertilize` elements' height changes to become the tallest sibling, either due to a window resize, element width change, or content being added or removed, all siblings set their height to match.

Expand All @@ -24,4 +32,4 @@ Open the `index.html` file in your web browser or go to [http://sixthdim.github.
angular-vertilize has been tested in all modern browsers, as well as IE8 and works well. Feel free to submit a pull request if you find a bug or have a better way of handling something in the module.

## License
MIT
MIT
21 changes: 15 additions & 6 deletions angular-vertilize.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@
return {
restrict: 'EA',
controller: [
'$scope', '$window',
function($scope, $window){
'$scope', '$window', '$attrs',
function($scope, $window, $attrs){

// Alias this
var _this = this;

Expand All @@ -34,13 +35,21 @@
_this.childrenHeights[index] = height;
};

// API: Get tallest height
// API: Get smallest/tallest height
_this.getTallestHeight = function(){
var height = 0;

var heights = [];

for (var i=0; i < _this.childrenHeights.length; i=i+1){
height = Math.max(height, _this.childrenHeights[i]);
heights.push(_this.childrenHeights[i]);
}
return height;

if($attrs.vertilizeContainer && $attrs.vertilizeContainer.toLowerCase() == 'min'){
return Math.min.apply(null, heights) || 0;
} else {
return Math.max.apply(null, heights) || 0;
}

};

// Add window resize to digest cycle
Expand Down