A jQuery plugin for the masses

Every wonder how to hit the ground running with a jQuery plugin? Here is the absolute complete basics for you (and me) to copy and paste…

First we need to define our Class. I’ll call mine Boom.


var Boom = function(element, options){
	this.init('boom', element, options);
};

So now we have something to focus our plugin at we can add a prototype method to it. This makes the ‘new Boom’ code super slick and gives us a better control over the ‘this’ variable because we can whack it inside a function…


Boom.prototype = {

	init:function(type, element, options)
	{
		// do stuff on create

		// makes it available almost anywhere as this.$element
		this.$element = $(element);

		// then maybe do something with the options
	},

	another_one:function()
	{
		// do some other clever stuff.
	}

};

And finally we need to connect it up to the jQuery bit…


$.fn.boom = function (options) {

	// return this makes it chainable
	return this.each(function ()
	{
		new Boom(this, options);
	});
};

$.fn.boom.Constructor = Boom;

Very basic, but worth having here for future use. You can now call it like so…


$('li.bang').boom();

Animating Fade Of Twitter Bootstrap Buttons

I came across a curious issue today. You can’t select a period of time over which to fade out and fade in Twitter Bootstrap buttons.

If you apply jQuery fadeTo() or animate() they fade out and they fade in, but they do it in their own time.

This may be related to a css transition which is applied in the bootstrap css, I haven’t had a chance to look, but the workaround for me is to put the button in a span and fade the span in and out instead.

   Button Text

css transform rotation and parent element dimensions

When you use css3 to rotate an element with it’s new transform property, you may find yourself fighting to keep it inside it’s parent.

To clarify, usually rotating an element will first put it into it’s usual position and then literally rotate it around it’s own centre, not caring if it now overlaps elements around it (well I suppose that’s the point sometimes?!?)

I’m using css transform to rotate, in combination with a little javascript to allow images to be rotated (and then saved) as part of PagePlay‘s super simple user interface.

So I initially start out with something like…

--div-------------------------
| ccw                     cw |
| --img--------------------- |
| |                        | |
| |                        | |
| |                        | |
| -------------------------- |
-----------------------------

When you click ccw (counter clockwise) or cw (clockwise) js switched classes on the img and it rotates. Initially, that would give me something like….

       ----------------
       |              |
--div-------------------------
| ccw  |              |   cw |
|      |              i      |
|      |              m      |
|      |              g      |
|      |              |      |
|      |              |      |
-----------------------------
       |              |
       ----------------

(loving the crude graphics? Thought so)

So what I wanted was for the parent div to sit around the image. The problem here is that the div parent doesn’t (and shouldn’t) care about the rotation of it’s child, so we need to make the div larger when it’s rotated. To do this I used a little bit of jQuery and maths to calculate the required additional space…

I don’t know whether the image is going to be taller or wider first, so we need to check that first and come up with a pixel margin to use later…

var img = $('rotator');
var img_w = img.width();
var img_h = img.height();
var the_margin = (img_w > img_h ? (img_w-img_h)/2 : 0);

The img width minus image height divided by 2 is the amount space above and below the standard space the image takes up that it will also need when rotated. If the image is taller than it is wide, we will already have enough space (you could do better by making the div smaller on rotation in this case).

So when we rotate we look at whether the image is rotated or not (rev tells me that here) and then based on that we add or remove the margin we calculated above to the top and bottom of the image to push it’s parent div away from it and make it large enough to accommodate the image.

img.css({marginTop:(rev ? 0 : marg),marginBottom:(rev ? 0 : marg)});

You could certainly do better with dealing with image which are portrait, but then maybe I’ll come back to that another time.

Fancybox left and right key problem

When you use fancybox, it automatically adds listeners which stop any other use of the Esc, Left and Right keys on your keyboard. The just don’t work in forms etc inside Fancybox.

This isn’t such an issue with the escape key, but not being able to use the left and right, for example in text inputs, is a pain.

The changes below add an additional option to Fancybox called useNextPrev which you can set to false to stop Fancybox adding listeners to these keys. I haven’t included the escape key as I think it’s far less of an issue. Continue reading →

More powerful jQuery getScript with cache control

If you love getScript as a shortcut method in jQuery but you hate not being able to control whether the script calls from the browsers cache or not then you can override the build in function with a new one which is backwards compatable, so it won’t break any of your old code, and allows you to choose true or false to caching.

Read the original post by Jamie Thompson


(function($){
$.getScript = function(url, callback, cache){
	$.ajax({
			type: "GET",
			url: url,
			success: callback,
			dataType: "script",
			cache: cache
	});
};
})(jQuery)

[carousel keywords=”jquery” tag=”fetchit-21″]