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:
- The ones that I cannot figure out how to set up or cannot even understand or see the use of
- The ones that have a lot of functions and I can understand and see the use of
- The ones that have limited functions, which I can easily understand and use straight off
- 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…
More 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.
TRY 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.
Forms 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.
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:
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.
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:
LATEST COMMENTS
MC Press Online