Auto Hide Sticky Nav While Filling Form Fields - Form Space

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.

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.

  • Publication date: 16.06.2017
  • Source