Skip to content

Position the footer at the bottom of the page without using "position: absolute"

License

Notifications You must be signed in to change notification settings

the-software-factory/jquery-sticky-footer

Repository files navigation

Build Status

jQuery Sticky Footer

The footer is positioned at the bottom of the page but without an absolute position.

Installation

You'll need bower to install jQuery Sticky Footer plugin and its dependencies. Install the plugin and save it as a dependency in your project:

$ bower --save install jquery-sticky-footer

Usage

The page structure has to match the following one:

<body>
    <div>...</div>
    <div class="footer">/div>
</body>
  • <body> tag must have ONLY two tags as children: the first one as page container and the second one as footer container.
  • There are NO restrictions for tags and classes that you can use as children of the <body> tag.

Please run the following script to initialize a footer:

$('.footer').stickyFooter();

Development

The project has the following structure:

dist/
    *.min.js // The uglified version of the component.
src/
    *.js // The source file
test/
    src/*.js // Tests
    ...      // Task runner configuration file and test dependencies
...

Installation

This project requires node for the development installation so you can install its dependencies, build it and test it.

Please run following commands to install all dependencies:

$ npm install
$ ./node_modules/bower/bin/bower install
$ cd test && npm install

Grunt Tasks

Here is a list of grunt tasks => actions mappings, see below for a deeper explanation of the actions.

Grunt task jshint uglify usebanner devserver watch emptyTheChangelog conventionalChangelog changelogCommit
grunt * * *
grunt development * *
grunt changelog * * *
  • jshint: Validate files with JSHint.
  • uglify: Create the final *.min.js.
  • usebanner: Prepends a banner to the minified file
  • devserver: Spawns a web server so you can rapidly test your app in action
  • watch: Run default task when src or test files are added, changed or deleted.
  • emptyTheChangelog: Truncates the CHANGELOG.md file as conventionalChangelog task will append fully regenerated changelog
  • conventionalChangelog: Appends Markdown-formatted changelog history to CHANGELOG.md
  • changelogCommit: Prepares a new commit with updated CHANGELOG.md and commit message "CHANGELOG.md Updated"

Tests

Take a look at test/README.md for more details.

Contributing

Take a look at CONTRIBUTING.md for more details.

About

Position the footer at the bottom of the page without using "position: absolute"

Resources

License

Stars

Watchers

Forks

Packages

No packages published