Last active
August 12, 2016 14:00
-
-
Save calendee/e189e5ac267107aa1039 to your computer and use it in GitHub Desktop.
Automatically Position Subheaders and Content in Ionic Framework Apps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('app', ['ionic']).directive('positionBarsAndContent', function($timeout) { | |
| return { | |
| restrict: 'AC', | |
| link: function(scope, element) { | |
| var offsetTop = 0; | |
| // Get the parent node of the ion-content | |
| var parent = angular.element(element[0].parentNode); | |
| // Get all the headers in this parent | |
| var headers = parent[0].getElementsByClassName('bar-subheader'); | |
| // Iterate through all the headers | |
| for(var x=0;x<headers.length;x++) | |
| { | |
| // If this is not a footer bar, adjust it's position and calculate offset | |
| if(headers[x].className.indexOf('bar-footer') === -1) { | |
| // If this is not the main header or nav-bar, adjust its position to be below the previous header | |
| if(x > 0) { | |
| headers[x].style.top = offsetTop + 'px'; | |
| } | |
| // Add up the heights of all the header bars | |
| offsetTop = offsetTop + headers[x].offsetHeight; | |
| } | |
| } | |
| // Position the ion-content element directly below all the headers | |
| element[0].style.top = offsetTop + 'px'; | |
| } | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment