02
Sat, Nov
2 New Articles

jQuery Plug-ins, Part 2 - Plug-ins You Never Knew You Couldn’t Live Without

Mobile Languages
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

 

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…

Jan Jorgensen

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.

 

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$

Book Reviews

Resource Center

  • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

  • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

  • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

  • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

  • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

  • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

  • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

  • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

  • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

  • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

  • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

  • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: