How does the origin argument of the scale effect in jquery-ui work?

JavaScript
1

How does the origin argument of the scale effect in jquery-ui work? I’ve been using the effect with the show function.

$("#home_announcements_hover").show("scale",{percent: 100, direction: 'vertical', origin: ['center','top']},500);

See: http://docs.jquery.com/UI/Effects/Scale

I can’t find anything in the documentation that explains what options I can use there. I’ve just been trying different options until I get it to work. Still haven’t found a pattern to it.

Thanks.

2

I know it’s almost a month later, but I am just digging into the same and found you can call it like this:

$(“#home_announcements_hover”).show(“scale”,{percent: 100, direction: ‘vertical’, origin: [‘bottom’,‘left’]},500);

$(“#home_announcements_hover”).show(“scale”,{percent: 100, direction: ‘vertical’, origin: [‘top’,‘right’]},500);

etc. Hope that helps

3

Um, yeah, that’s what I was doing.

So, in the origin property, is it [‘vertical position’,‘horizontal position’], or something else? Also, what are the valid values?

4

The documentation (linked above) seems to indicate that your assumption is correct.

Default:[‘middle’,‘center’]

The page doesn’t say, so let’s dig in to the code itself, in jquery.effects.scale.js

The origin properties are retrieved at line 98, and are used at [url=“http://dev.jqueryui.com/browser/tags/1.8/ui/jquery.effects.scale.js#L104”]line 104 to get the baseline x,y values


var origin = o.options.origin; // The origin of the sizing
...
var baseline = $.effects.getBaseline(origin, original);

So let’s now check out jquery.effects.core.js

Here we find at line 325 the getBaseline method, where at line [url=“http://dev.jqueryui.com/browser/tags/1.8/ui/jquery.effects.core.js#328”]line 328 we discover the values that are accepted:


switch (origin[0]) {
	case 'top': y = 0; break;
	case 'middle': y = 0.5; break;
	case 'bottom': y = 1; break;
	default: y = origin[0] / original.height;
};
switch (origin[1]) {
	case 'left': x = 0; break;
	case 'center': x = 0.5; break;
	case 'right': x = 1; break;
	default: x = origin[1] / original.width;
};

Maybe the documentation needs to be updated?

5

Thanks, that’s what I was looking for. :smiley: