jQuery End Page Box: Displaying a Box at the End of the Page

In this day and age, we are all competing for attention. The longer people stay on your website and drill down to your content, the better. Today, I have decided to implement a plugin called End Page Box that will let you easily show any dialog when the user scrolls to the bottom (or any range) of the page.

You can use it to recommend other posts on your website, show related posts, or even to annotate the page with extra information which will eventually create a richer and deeper experience for your users.

Note: This plugin has been tested on Windows’, OSX's, iOS's, Android's Chrome, Firefox, Safari and IE10.

Displaying a Box at the End of the Page with jQuery End Page Box


How to Use jQuery End Page Box

How does it work?

This plugin will keep track of your scroll location and whenever you scroll to the specified area, the plugin will automatically display the dialog until you go out of range. The animations available are a combination of jQuery for basic animations such as fade and slide, and CSS3 (defined in endpage-box.css) for more complex ones.

In this plugin, I’ve decided to let you define the range of which the dialog will appear in percentage because this will allow you to calculate approximately where the dialog should appear a lot easier than having to calculate the exact pixels.

The plugin will determine the height of the document automatically and convert the percentage to pixels without you doing the hard work. For the container itself, if the plugin couldn’t detect the container in the document, it will automatically generate a div and append to the body of the document for you.

How-Tos

Before you begin, make sure you’ve included: the latest jQuery plugin available here, and then include both the jquery.endpage-box.js and endpage.css found here into your document's . Once that is done, simply execute the function shown below:

JS:

$(window).load( function() {
  $("#endpage-box").endpage_box({
    animation: "fade",
    from: "50%", 
    to: "110%",
    content: "Better Add something cool here." 
  });
});

With the setup above, the dialog will fade in when the users scroll half a page down with a caption “Better Add something cool here.”. and fade out when they are no longer scrolling in the bottom half part of the page. As with all my other plugins, you can customize the way the plugin works by changing these options:

  • animation: There are several animations available such as “fade”, “slide”, “flyInUp”, “flyInDown”, “flyInLeft”, “flyInRight” or if you want to turn off the animation and let the dialog appear instantly, simply set this option to false.
  • from: With my plugin, you can define the starting point at which the dialog will appear. This option accepts both percentage and pixels. The default value is 50%.
  • to: You can also define where the endpoint at which the dialog will appear. Again, you can set this as a percentage or pixels. The default value is 110%. (The extra 10% is used to support the overscrolling effect you get when browsing on Mac OSX’s Chrome and Safari.)
  • content: In case you don’t want to add your own container to your document, the plugin will automatically generate the container for you and this option will allow you to define the content of the generated container. This option accepts HTML tags as well.

Multiple Instances with Custom Containers

Sometimes, you may find yourself wanting to define the container’s content before the JS is loaded or show multiple dialogs with different settings. You can do both by simply adding your containers right above the closing tag as shown below:

HTML

...
<div id="endpage-box-1" class="endpage-box">...</div>
<div id="endpage-box-2" class="endpage-box">...</div>
</body>

and execute each function like this:

JS:

$("#endpage-box-1").endpage_box({
  animation: "fade",
  from: "10%",
  to: "30%"
});
$("#endpage-box-2").endpage_box({
  animation: "slide",
  from: "40%",
  to: "60%"
});

Now, there will be 2 different dialogs, the first showing when the user scrolls between 10% - 30% of the page, and the last showing when the user scrolls between 40% - 60% of the page, both with different animations.

Conclusion

And that is it for today’s tutorial. What do you think of this plugin? Will you use it on your next project? If you have any suggestions or recommendations, feel free to let us know in the comments below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.