PxFooter

Static

Bottom

Fixed

To make the .px-footer element fixed, add the .px-footer-fixed class.


<div class="px-footer px-footer-fixed" id="footer-fixed">
  ...
</div>

<script>
  $(function() {
    $('#footer-fixed').pxFooter();
  });
</script>

Initializing

PxFooter plugin has no custom options.

PxFooter plugin is initialized on pre-existing markup.


$('#footer').pxFooter();

Usage


require(['jquery', 'px/plugins/px-footer'], function($) {
  ...
});

Methods

You can call a public method of PxFooter instance using the syntax: 


$('#footer').pxFooter('methodName');

Method name Description
update Update footer position.
You need to call this method after each footer content change.
destroy Destroy the PxFooter instance.

Usage

To use PxFooter plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/plugins/px-footer.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-footer.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['px-footer']);

Alternatively, you can include PxFooter plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'px-footer',
    files: [
      'path/to/js/pixeladmin/plugins/px-footer.js',
      'path/to/js/pixeladmin/directives/angular-px-footer.js',
    ],
  },
]);

px-footer directive

Specify template-url attribute on the element to load footer content from a template.

NOTE: The template-url attribute expects an angular expression instead of a literal string. 


<px-footer>Default</px-footer>
<px-footer template-url="'path/to/footer/template.html'"></px-footer>

You can use px-footer directive where you want. And when the scope is destroyed the directive will be destroyed.

Text
Default

Text

Instance

You can define instance attribute to get a pointer to PxFooter element: 


<px-footer instance="ctrl.$footer">...</px-footer>
        

function SomeController() {
  // Pointer
  this.$footer = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$footer('update');
});