How to Include a jQuery Plug-in
In order to use a plug-in on your own site the first thing you need to do is include the plug-in itself along with whatever files it requires. Only after they are loaded can you actually run the plug-in.
Every jQuery plug-in obviously requires jQuery itself, some plug-ins might require other plug-ins or files but the technique for including them is exactly the same, just remember to change the paths to the scripts.
JavaScript-files should, contrary to stylesheets, be included in the body-element. More specifically at the very bottom, right before the closing body-tag.
After including the needed files the last bit on your page should look something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.plug-in.js"></script>
</body>
</html>
Now that the files are included on you page you can start using the plug-in. How the plug-in is implemented naturally differs from plug-in to plug-in, but in either case you're going to want to run the initializing code after the inclusion of the needed files.
You may have heard of running JavaScript "onload", more commonly <body onload="do_stuff()">, however, when including all your JS at the bottom of the page the document will already be loaded so there's no need to apply an onload event to anything.
Simply add another script-element, without a src-attribute, after the two script-elements already there, and run your code from it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.plug-in.js"></script>
<script type="text/javascript">
$('#my-element').plugIn();
</script>
</body>
</html>
If there's a lot of code being used on several pages it makes sense to move it to its own JS-file and included that rather than having it inline like that.
If you're not familiar with jQuery you may want to check out How jQuery Works from jQuery.com as well.
Hope that wasn't too confusing!
Random jQuery Plug-ins
Form Hints
Using this plug-in you can add a descriptive hint to any form-control you may have on your site.
Add a hint by giving the form-control a title-attri...Code Block Toolbar
If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example...
Max Length Form Controls
Gives form-controls with a 'maxlength-XXX'-class a max-length and prohibits user from entering more than set amount. It also displays number of charac...
