Rouge
Rouge

Reputation: 4239

Jquery position snippet issue

I am trying to understand someone else's codes...he has the following:

    var positionAt = horizontalPosition + ' ' + verticalPosition;
    var positionOffset = String(horizontalOffset + ' ' + verticalOffset);

   //i don't understand the codes below. I don't think Jquery position method support at and of attribues....

   $tooltipElement.position({at: positionAt, of: $element, my: 'left top', offset: positionOffset});

                $element.hover(function(){
                            $instance = $(this).css({'cursor': 'pointer'});
                            $('#tooltip-' + $instance.attr('id') ).fadeIn('fast');
                }, function(){
                            $instance = $(this).css({'cursor': 'auto'});
                            $('#tooltip-' + $instance.attr('id') ).fadeOut('fast');
                });

I am not sure what the position method with At, of and my attributes for. Can anyone help me about it? Thanks a lot.

Upvotes: 0

Views: 38

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382454

He's using the UI/Position plugin, in which the position function takes my, at and of parameters :

my :
Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

at : Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

of : Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"

Upvotes: 1

Related Questions