Thoughts/resources for making a jQuery plugin

I thought I would share a couple resources for people looking to write a jQuery plugin but aren’t super confident in their JavaScript skills yet.

Writing a jQuery plugin was fairly simple. At first it seemed very difficult, but that was because I was looking at JavaScript wrong. I didn’t really know the language well and what it was capable of. This is mostly because I was used to just hacking around with vanilla JS and jQuery without knowing the “right” way to do things. I still might not be doing things the 100% “right” way but I’ve come a long way from what my code originally looked like.

First, get familiar with JavaScript. This might be terrible to say but honestly most of what I know about JavaScript is stuff I carried over from my Java knowledge in college. I knew enough to hack around and make things work. JavaScript and Java are so different and each language has its own set of strengths and places where it’d be useful. I’d highly recommend JavaScript: The Definitive Guide (6th edition) for learning the ins and outs of JS. You’ll probably be surprised at how much you didn’t know about JS.

If you can’t buy that book, check out Eloquent JavaScript. It’s a very good resource on JS. Do the examples, they’re very helpful.

Second, demystify jQuery and gain a deeper understanding of what’s going on with it by watching Paul Irish’s “10 Things I Learned From the jQuery Source”. Watching this really made a lot of things “click” in my head and gave me a better understanding of what is happening when you use jQuery.

Third, I’d recommend reading some stuff by Addy Osmani on design patterns. He gives some best practices on how to make a jQuery plugin. It seemed a little over my head at first, but I promise it’ll make sense if you stay with it and let all the new knowledge you took in gel together.

With these tools in your toolbox, you can’t fail. Go forth and make cool things for the web.

My first jQuery plugin – check it out!

Well, I finally got around to it. I’ve been talking about making a jQuery plugin for months now but I finally put my head down and did it. I took the scrolling progress meter that we used for the 2013 SUNY Oswego Annual Report, and made it a plugin.

Still have some work to do. There’s some functionality I’d like to add and I just noticed it doesn’t work properly in IE8 (big surprise), but I’ll get that ironed out soon.

Simple Sticky Footer Using jQuery

I was recently working on a project that required a sticky footer. I needed the footer to always be aligned flush with the bottom of the screen. This was no problem when there was enough content to push the footer against the bottom edge. But what happens when there isn’t enough content? You end up with a floating footer and that’s no fun.

I immediately Googled the problem and found a bunch of various jQuery and CSS solutions. When I tried them though, none of them seemed to do exactly what I wanted them to do. Plus my code was structured a little differently than the examples. I decided to just try to come up with my own solution using jQuery. I’ve had enough of dealing with IE’s quirks, IE understands JQuery so it seemed like the easiest solution.

In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:

<div id="page"></div>
<footer id="colophon"></footer>

Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.

body {
    margin: 0;
    padding: 0;
    }

The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.

I brought in jQuery and inserted the code.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});
</script>

In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv. [html] <!-- Add conditional for IE7 + 8 support --> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> [/html]

See the demo

Worked like a charm for my purposes. Feel free to modify it for your own use. If you have any questions or comments, feel free to leave a comment! 🙂