FoldResizer is a Javascript plugin that will keep anything you want above the fold without worrying about your visitors screen size. The plugin is very easy to install and it works by resizing a <div> and allowing you to decide how much space left you need. Here are some examples:
These are screenshots of the same website loaded in different screen sizes, as you can see, the fold is always in the same place, displaying the same content for each user and having full control on what you want to show to them. Always keeping what matters above the fold.
Features
- Cross-browser – Works in Firefox, Chrome, Safari, IE (including IE6)
- No plugins required – Just 100% pure Javascript
- Instant loading – No need to wait for the page to be loaded completely
- Small size – Less than 0.2KB
Instructions
Include the script file and call the function by passing the parameters:
foldresizer(‘containerID’, freeheight, minheight);
- ID of the container to be resized
- How many pixels height to leave free
- Minimum size of the resized container (default 0)
Example:
<script type="text/javascript"> resizefold('head', 200, 300); </script>
Note that this plugin is purely JavaScript and does not rely on jQuery or any other plugins so you can call it in your <head> while the page is loading and users will not notice any page redrawing or resizing.
Demo
See the plugin working live at the SFP Group website. Resize your browser window and reload the page to see how it always keeps the fold fixed.
Download
Download the script by right clicking on the links and clicking ‘Save as’:
- FoldResizer Minified version (0.95KB) (recommended)
- FoldResizer Maxified version (1.5KB)
No comments yet