.belowfold() is a jQuery plugin for easy below the fold content detection with a helpful message for the unaware user to scroll down.

Tip! Scroll this page to the top, hit refresh in your browser and wait. The popup message will appear in 5 seconds!

It has been proven that a large number of people browsing the web still don't scroll down the page when there is content below the fold (content which is out of view below the browser window). Best practise is to have all the important information above the fold, but if you want to make people who don't scroll aware of the extra content then this is the plugin for you.

The helpful message will only appear if the user has not scrolled after a set period of time. If the user scrolls before the set period the message will not appear. Also the message will disappear automatically after a set period of time or if the user scrolls the window and if the browser window is resized larger than the document.

How to use

1. Download or link to the jQuery library 1.4.x

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2. Link to the belowfold plugin below the jQuery library

<script src="js/jquery.belowfold.min.js"></script>

3. Add the .png image to the same folder as your html pages or better still set the location with the src parameter.

4. Start by adding the jQuery document ready function below the library and plugin scripts either on the page or in external .js file

Learn Coding & Web Design at Treehouse
<script>
$(function(){

	// your code here
			
});
</script>

5. Apply the plugin to the selector where you want the message to appear. Attaching it to the body will centre the pop up message in the browser window. Attaching it to an id selector will centre it within this element.

<script>
$(function(){

	// attach it to the body

	$('body').belowfold();
	
	// or to an element with an id
	
	$('#content').belowfold();
			
});
</script>

6. Popup delay: To delay the pop up window you can add a delay parameter. Default is 5000 milliseconds (this is also the minumum).

<script>
$(function(){

	// 10 second delay

	$('#content').belowfold({delay:10000});
			
});
</script>

7. Popup placement: To set how far up the page from the fold you want the popup to be placed you can set the bottom parameter i.e pixels from the bottom of the window. Default is 20px.

<script>
$(function(){

	// the popup will appear 50px from the bottom of the browser window

	$('#content').belowfold({bottom:'50px'});
			
});
</script>

8. Popup fade out: To change how long the popup appears before fading out, you can change the duration parameter. Default is 5000 milliseconds.

<script>
$(function(){

	// the popup will fade away after 7 seconds

	$('#content').belowfold({duration:7000});
			
});
</script>

9. Popup fade in and out: To change the fade in and fade out duration you can use the fadeIn and fadeOut parameters using milliseconds or standard jQuery 'slow' and 'fast' values. Default is 500 milliseconds.

<script>
$(function(){

	// the popup fade in duration is fast
	// the fade out duration will take 1 second

	$('#content').belowfold({fadeIn:'fast', fadeOut:1000});
			
});
</script>

10. Image source: You can use your own image for the popup message. Just add the location to your image and edit the width and height properties to match the dimensions. The image format can either .gif or .png You can also store the image in a folder of your choice.

<script>
$(function(){

	// use your own image for the pop up message
	
	$('#content').belowfold({width:'200px', height:'50px', src:'images/your-image.png'});
			
});
</script>

11. Popup z-index: The z-index of the pop up is set to 1000. If you need to change this you can edit the zIndex parameter:

<script>
$(function(){

	// make sure your popup always appears above your content
	
	$('#content').belowfold({zIndex:2000});
			
});
</script>

12. The plugin automatically sets the selector to have a position:relative in the css so the popup can be positioned within it. If the element is already set to position:relative or it is absolutely positioned then you can turn this feature off:

<script>
$(function(){
	
	$('#content').belowfold({autoPosition:false});
			
});
</script>

13. The message will not appear if the window has been scrolled before the delay time or if the window is at the bottom of the document. If you want to add an area for the plugin to ignore at the footer of your document then you can add an offset parameter:

<script>
$(function(){
	
	// the plugin will ignore 100px from the bottom of the document
	
	$('#content').belowfold({offset:'100px'});
			
});
</script>

14. Example with all parameters:

<script>
$(function(){
	
	$('#content').belowfold({
		delay: 10000,
		duration: 7000,
		width: '200px',
		height: '50px',
		bottom: '60px',
		zIndex: 2000,
		fadeIn: 'fast',
		fadeOut: 1000,
		src: 'images/your-image.png',
		offset: '100px',
		autoPosition: false
	});
			
});
</script>
blog comments powered by Disqus