Permalink
Cannot retrieve contributors at this time
EZ-Sticky-Footer jQuery plugin | |
Version: 0.1.2 | |
jQuery plugin to make the page footer stick to the bottom of the page. | |
https://github.com/maratbn/EZ-Sticky-Footer | |
https://plugins.jquery.com/ez-sticky-footer | |
INSTALLATION INSTRUCTIONS | |
(1) Test the plugin by opening 'example.html', and varying the height of | |
the browser window. The footer <div> should always be at the bottom | |
of the page. When there is not enough page content to meet the | |
footer, the footer should still remain attached to the bottom of the | |
browser viewport, and not be cut-off or require any scrolling to see | |
it. | |
(2) Upload all the plugin files to a web server. Test 'example.html' on | |
the server. Use the example file as a template for deploying inside | |
another page. | |
(3) To deploy inside any webpage, it is necessary to load the | |
'jquery.ez-sticky-footer.js' file after loading the main jQuery | |
JavaScript file. So insert a <script> tag for | |
'jquery.ez-sticky-footer.js' below the <script> tag for jQuery. | |
(4) The plugin requires that several <div>s (or any other tags that are | |
displayed in block mode) be designated as: | |
(1) Main page container <div> | |
(2) The content expander <div> | |
(3) The page footer <div> | |
The <div>s are designated by assigning them special CSS class names | |
according to the following table: | |
role CSS class name to assign | |
---- ------------------------ | |
page container jq-ez-sticky-footer-page-container | |
content expander jq-ez-sticky-footer-content-expander | |
page footer jq-ez-sticky-footer-page-footer | |
The structure of the page must be the following: | |
<body> | |
<div class='jq-ez-sticky-footer-page-container'> | |
<div>your header (does not need any CSS class)</div> | |
<div> | |
... | |
your content (does not need any CSS class) | |
... | |
<div class='jq-ez-sticky-footer-content-expander'></div> | |
</div> | |
<div class='jq-ez-sticky-footer-page-footer'> | |
your footer | |
</div> | |
</div> | |
</body> | |
Assign the class names to the <div>s accordingly. | |
Important: | |
(1) The container <div> designated for use by the plugin should | |
not have any customized margin or padding styles applied to | |
it, as the plugin needs to manipulate these settings for it to | |
work. If needed by the page, these settings can still be | |
specified in a nested <div>. | |
(2) The expander <div> must be inside the page content <div>. | |
(3) The expander <div> must be completely empty. | |
(5) Test the page with the plugin deployed. If the plugin does not seem | |
to work correctly, please file a bug report at: | |
https://github.com/maratbn/EZ-Sticky-Footer/issues | |
When filing a bug report, please make sure to state the browser you're | |
using, and to include links to 'example.html' on your webserver, as | |
well as the page on which the plugin is deployed but does not seem to | |
be working. |