Quick XPages Tip: Using Bootstrap Auto-Hiding Navbar in XPages

Datetime:2016-08-22 22:18:57          Topic: Bootstrap           Share

Last week I received the question whether it was possible to hide the navigation bar automaticly in an XPage application using Bootstrap when a user scrolls down on a page. In some cases it is convenient to hide the top navigation bar. For this, there is a simple solution, the Bootstrap Auto-Hiding Navbar plugin.

The only thing that is needed to hide the navigation bar automaticly is to include the source javascript file from the Bootstrap Auto-Hiding Navbar plugin, <script type="text/javascript" src="hidingnavbar/jquery.bootstrap-autohidingnavbar.js"></script> . Next it can be initialized with the following code: <script>$("div.navbar-fixed-top").autoHidingNavbar();</script> .

The Bootstrap Auto-Hiding Navbar plugin can be downloaded on GitHub .

Bootstrap Auto-Hiding Navbar is an extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.

Initialization parameters object

When calling $(".navbar-fixed-top").autoHidingNavbar() you can pass a parameters object with zero or more of the following:

  • disableAutohide , defaults to false, set this to true if you want to show/hide the navbar programmatically.
  • showOnUpscroll , defaults to 'true', the navbar shows up when scrolling the page upwards (otherwise it shows only when scroll is on page's top).
  • showOnBottom , defaults to 'true', the navbar shows up when scroll reaches the page's end.
  • hideOffset , defaults to 'auto', hides the navbar after scrolling that much pixel. Auto means the navbar's height.
  • animationDuration , defaults to '200', is the duration of the show and hide animations in milliseconds.
  • navbarOffset , defaults to '0', the navbar doesn't hide that many pixels from the bottom.


Methods

There are also some methods available that can be called with the following syntax:

$('.navbar-fixed').autoHidingNavbar('setDisableAutohide', true);

$('.navbar-fixed').autoHidingNavbar('hide');

  • setDisableAutohide (value) to change the disableAutohide parameter.
  • setShowOnUpscroll (value) to change the showOnUpscroll parameter.
  • setShowOnBottom (value) to change the showOnBottom parameter.
  • setHideOffset (value) to change the hideOffset parameter.
  • setAnimationDuration (value) to change the animationDuration parameter.
  • show() to show the navbar programmatically.
  • hide() to hide the navbar programmatically.
  • destroy() destroys the plugin instance.


Sample Codes XPage

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

xmlns:xc="http://www.ibm.com/xsp/custom">

<script type="text/javascript" src="hidingnavbar/jquery.bootstrap-autohidingnavbar.js"></script>

<xc:ccLayoutBootstrap><xp:this.facets>

<xp:panel xp:key="facetMiddle">

<xp:br></xp:br>

</xp:panel>

</xp:this.facets>

</xc:ccLayoutBootstrap>

<script>$('div.navbar-fixed-top').autoHidingNavbar();</script>

</xp:view>

Sample Code XPage with some parameters

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

xmlns:xc="http://www.ibm.com/xsp/custom">

<script type="text/javascript" src="hidingnavbar/jquery.bootstrap-autohidingnavbar.js">

</script>

<xc:ccLayoutBootstrap><xp:this.facets>

<xp:panel xp:key="facetMiddle">

</xp:panel>

</xp:this.facets>

</xc:ccLayoutBootstrap>

<script>$("div.navbar-fixed-top").autoHidingNavbar({

showOnUpscroll: false,

showOnBottom: false

});

</script>

</xp:view>





About List