Not all jQuery plug-ins are hard to implement and use.

In the last article, I presented you with a jQuery plug-in that had a lot of different functions, but not all plug-ins are like that. I have invented my own way to categorize jQuery plug-ins (not rocket science or anything). In my head, I have four categories:

1. The ones that I cannot figure out how to set up or cannot even understand or see the use of
2. The ones that have a lot of functions and I can understand and see the use of
3. The ones that have limited functions, which I can easily understand and use straight off
4. The ones that do just one thing and have very limited functions and I can understand and use them within minutes

When I started using jQuery plug-ins years ago, most fit into category 1 as I did not understand any of the language that described them or the way input, functions, options, and callback worked. But everything has a learning curve, and I do not consider myself more clever than the average person I meet in the street, so over time I have gotten the hang of it. And I understand it all based on my RPG background, not with an OO or C or Java background, and that sure makes big difference.

When I speak to C developers, they understand jQuery plug-ins right away, while I have to struggle with basic knowledge of objects (not IBM i objects as we know them) that contain methods or functions that you can use right away or that you can create for that specific object. I’m not sure I’m using the correct terms, so please correct me if I’m totally wrong.

Over time, I got the hang of it. I suddenly found that plug-ins that started in category 1 moved to category 2 and some even moved to 3. I simply could not see the forest for the trees in the beginning.

What I am trying to say is this: You might have an RPG background, and you might think that all this OO talk is way over your head. As I have said many times before, fear not! Learn the basics of how to implement, use, and work with jQuery and jQuery plug-ins, and you will feel like the king of the World Wide Web.

But back to the topic of this article: This time I will be in category 4, the easiest plug-ins to use. I have picked up a number of small and simple plug-ins that do just that one thing you expect them to do. I have tried to find some that will improve the look and feel of browser pages, some that might not even be noticed because the user will only see they are missing then they are not there.

Scrollup Master

Let me give you the first example. It shows a table listing some records from my collection (I dislike customer data as examples). When you scroll down the list, please notice what happens. Scroll down and see.

Did you notice what happened? Yes in the right bottom corner a little “marker” showed up when you had scrolled down about 300 pixels. Why 300 pixels? That’s something the jQuery plug-in called ScrollUp Master developed by Mark Goodyear made possible for us to configure and use. Of course, you have already figured out what the plug-in does; it enables you to easily go back to the top if you have a long list of data on your page.

Let’s have a look at how to set up the plug-in.

Inside the code, you specify a reference to a CSS file and a JavaScript file, and then you add a function at the top of the JavaScript section. And that’s all.

It will look like this:

      <script type="text/javascript" src="/javascript/jquery.min.js"></script>

      <!--<link id="scrollUpTheme" rel="stylesheet" href="/javascript/scrollup-master/dist/css/themes/pill.css">-->

      <!--<link id="scrollUpTheme" rel="stylesheet" href="/javascript/scrollup-master/dist/css/themes/link.css">-->

      <!--<link id="scrollUpTheme" rel="stylesheet" href="/javascript/scrollup-master/dist/css/themes/tab.css">-->

      <link id="scrollUpTheme" rel="stylesheet" href="/javascript/scrollup-master/dist/css/themes/image.css">

      <script type="text/javascript" src="/javascript/scrollup-master/dist/jquery.scrollUp.js"></script>            

To configure the ScrollUp Master, you have the following options:

$(function () {

  $.scrollUp({

        scrollName: 'scrollUp',      // Element ID

        scrollDistance: 300,         // Distance from top/bottom before showing element (px)

        scrollFrom: 'top',           // 'top' or 'bottom'

        scrollSpeed: 300,            // Speed back to top (ms)

        easingType: 'linear',        // Scroll to top easing (see http://easings.net/)

        animation: 'fade',           // Fade, slide, none

        animationSpeed: 200,         // Animation speed (ms)

        scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object

        scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number

        scrollText: false,        // Text for element, can contain HTML

        scrollTitle: false,          // Set a custom <a> title if required.

        scrollImg: false,            // Set true to use image

        activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'

        zIndex: 2147483647           // Z-Index for the overlay

    });

});

You do not have to learn to use all the options. You can play around with them to see the difference and how it works. A good way to start is by changing the scrollDistance and the scrollSpeed, which will control how far you have to scroll and the speed back to the top.

As you see, I have several CSS includes. That is because Scrollup Master can show the marker in four different ways. To see the other ways, just activate the CSS in question, adjust the configuration, and you are good to go.

To get a full description of the configuration, go to the ScrollUp Master web page, where you also can see some good examples.

One thing to notice is the use of another plug-in called jQuery Easing, which provides easing capabilities to the ScrollUp Master, so here is a very good example of a plug-in that uses another plug-in to provide nice features to your pages.

The ScrollUp Master is to me a category 4 plug-in. It has limited usage and is very simple to implement and use. Once you have decided the way the data should look, you can create an external JavaScript file and just include that in all your pages. Then, every time your users enter the page and scroll down, the very nice feature will appear.

StickyTableHeaders by Jonas Mosbech

I bet you have a lot of users who love Excel. One nice feature in Excel is that you can “freeze” the header so that, when you scroll down, it stays visible on the top of the screen. If your users have seen this in action, I bet they will ask you, “Could you please freeze the header when we look at Jan’s list of records?” If you say, “Well, this is a web page, not Excel, and things like that are not possible in a web page,” you are wrong because StickyTableHeaders will let you do just that.

The plug-in itself has a lot of different configuration options, and that makes it a category 2 plug-in, but you can also install it with a minimum of setup and it will work right away.

So when I once again use the list of records and call it example 2, the code I have added is the following:

1)

      <!-- StickyTableHeaders -->

      <script type="text/javascript" src="/javascript/sticky_table_headers_master/js/jquery.stickytableheaders.js"></script>     

2)
<table class="mytable-table" id="mytable-table-id">              

3)
$('#mytable-table-id').stickyTableHeaders();

A link to the StickyTableHeaders JavaScript file, an ID to the table, and a call to plug-in inside the .ready function of jQuery, and voilà! You now have fixed what the users want to see.

Have a look here: StickyTableHeaders example

Very simple and very easy to implement as a basic function to your pages that use table lists.

Of course, you can set up and configure the plug-in in many different ways, so I encourage you to go to the StickyTableHeaders Github web page and check out the examples and functions there. Then use my example as a playground.

I have also left the examples provided in the download inside the code for this article:

http://agnethe.dk//download/jQuery_Plugin_part_2/code_with_examples.zip

It’s a Wrap!

That completes part 2 of the plug-in series. I hope that I have opened your eyes just a little bit to the big world of jQuery plug-ins. There are tons out there, and I have not to this day had a problem that could not be solved by jQuery, a plug-in, and a little tweaking, so please let the fantasy loose. If you need a little more inspiration, have a look at these beauties too:

Hovers.css is a collection of hover effects ready to use and impress your users.

Loud links adds sound to your links.

Till next time…