https://github.com/heathdutton/jquery-formspace

Hides fixed navigation when form fields are focused to conserve space on smaller screens.
https://github.com/heathdutton/jquery-formspace

Last synced: about 1 year ago
JSON representation

Hides fixed navigation when form fields are focused to conserve space on smaller screens.

• Host: GitHub
• URL: https://github.com/heathdutton/jquery-formspace
• Owner: heathdutton
• License: mit
• Created: 2017-06-12T16:43:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-12T17:16:52.000Z (almost 9 years ago)
• Last Synced: 2025-02-19T23:03:52.998Z (over 1 year ago)
• Language: JavaScript
• Size: 427 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jQuery Form Space

Hides fixed navigation when form fields are focused to conserve space on smaller screens.

Not all mobile browsers handle fixed navigations well. This plugin helps ease the pain and gain back a little screen realestate by hiding navigations whenever form fields are focussed.

## Example

Before:

![Before](/example/before.png?raw=true)

After:

![After](/example/after.png?raw=true)

## Usage

Include jQuery (1.11+) and the plugin on the page:

```html

```

And run the library as needed in the body:

```html

    $('body').formSpace();

```

## Options

The following additional options are supported:

```html

    // You can target the entire body, or a specific form, etc.

    $('#mobile_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

    });

```