Auto Hide Sticky Nav While Filling Form Fields - Form Space

Form Space is a smart, user-friendly jQuery plugin that automatically hides sticky navigation when filling form fields for better user experiences on smaller screens (mobile devices). Compatible with Bootstrap framework.

How to use it:

1. Link to jQuery library and the jQuery Form Space plugin's main JavaScript:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.formspace.js"></script>

2. Invoke the plugin on the target form and specify the selectors of your fixed navigation and target form fields.

$('form').formSpace({
  header: '.navbar-fixed-top,
  fields: 'input[type=text], input[type=password], input[type=tel], input[type=image], input[type=file], select, textarea'
});

3. Possible plugin options with default values:

$('form').formSpace({

  // Selector for header fixed navigation items. This default is as used in Bootstrap.
  header: '.navbar-fixed-top, .navbar-static-top',

  // Selector for footer fixed navigation items. This default is as used in Bootstrap.
  footer: '.navbar-fixed-bottom, .navbar-static-bottom',

  // The delay (in ms) after a DOM change before re-attaching to form fields.
  delay: 1000,

  // Selector for fields that we wish to detect focus on. These are fields that mobile devices will open a "keyboard" for.
  fields: 'input[type=text], input[type=password], input[type=tel], input[type=image], input[type=file], select, textarea',
  
  // Speed of the animation to hide.
  speed: 100,

  // Class/es to add for hiding, should CSS be needed.
  class: 'formspace_hidden',

  // Optionally use this for desktop as well.
  mobileOnly: true

});

---

This awesome jQuery plugin is developed by heathdutton. For more Advanced Usages, please check the demo page or visit the official website.