Fixed Website Fold height (minimal Javascript Plugin, jQuery)

by Xavi Esteve
on August 8, 2011
(1 minute read)

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.