Fixed Website Fold height (minimal Javascript Plugin, jQuery)

by
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:

Simple Cloud Hosting Built for Developers

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);

  1. ID of the container to be resized
  2. How many pixels height to leave free
  3. 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

I’ve got invites for a free bank transfer!

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’:

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

No comments yet

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount