SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    USA
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

    Code:
    $("#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.
    --David Reagan
    DavidReagan.net

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    USA
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    --David Reagan
    DavidReagan.net

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jerrac View Post
    Um, yeah, that's what I was doing.

    So, in the origin property, is it ['vertical position','horizontal position'], or something else?
    The documentation (linked above) seems to indicate that your assumption is correct.

    Default:['middle','center']

    Quote Originally Posted by Jerrac View Post
    Also, what are the valid values?
    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 line 104 to get the baseline x,y values

    Code javascript:
    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 line 328 we discover the values that are accepted:

    Code javascript:
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    USA
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    So let's now check out jquery.effects.core.js

    Here we find at line 325 the getBaseline method, where at line line 328 we discover the values that are accepted:

    Code javascript:
    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?
    Thanks, that's what I was looking for.
    --David Reagan
    DavidReagan.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •