Buy.Me.A.Beer

Like any coder, I highly appreciate a nice drink every now and then. If you like jQuery.PointAt, please consider buying me a beer, or even a very nice bottle of whiskey! I highly appreciate all gifts, but feel free to use the plugin even if you can't send me a beer right now. :)


Disclaimer: Just to make it clear, you're not buying a beer from me, you're buying a beer for me. I am of legal drinking age, and quite a bit older too. Money gifted this way might be used for something else than beer, like cat food for my Devon Rex called Fidel.


Select a drink:


jQuery.PointAt1.2

a simple jQuery plugin for pointing at stuff

API.Documentation

The.Options

  • target: no default

    Id of the target element towards which you want your image to point. Has no default, since I'm not a fan of guessing element names. You can also set this to an array of element names, in which case the element to be used is specified with the option changeTargetTo. Accepts a string, or an array of strings. Strings must contain an element name with a preceding hash sign: "#example".

  • rotateFunction: jqrotate

    The name of the function to be used for rotation. This function must accept the angle as an integer, and not require any other parameters. Accepts a function name.

  • changeTargetTo: "low"

    If you've given an array of targets, you can control towards which element your pointer is pointing to with this variable. For example, if you set this variable to 270, the pointer will always point towards the target that is closest to this angle, e.g. left. Accepts an angle as a number, high (equal to 360), or low (equal to 0).

  • hookScroll: true

    Whether the plugin should be hooked to rotate the image when the page is scrolled. Accepts true or false.

  • hookDrag: true

    Whether the plugin should be hooked to rotate the image when an element is dragged. Accepts true or false.

  • draggable: null

    Specifies the element to which the hookDrag setting applies. This only needs to be set if the element in something other than the actual element the plugin is hooked to. Accepts element name as a string with a preceding hash sign: "#example".

  • pointAtInit: true

    Specifies whether the image should be pointed towards the target when the plugin is initialized. Accepts true or false.

  • defaultDirection: "up"

    The initial direction of the image being rotated. The arrow image I'm using in the demos is pointing up in the image, so the default is fine in the demos. If your image is pointing down, you can set this option accordingly. Accepts "up", "down", "right", "left", and any number as a plain integer, e.g. 90 for the same effect as "right".

  • angleLessThan: null

    When the angle of the image being rotated is less than the value set here in degrees, the function defined in angleLessThanFunc will be executed. Accepts an integer.

  • angleGreaterThan: null

    When the angle of the image being rotated is greater than the value set here in degrees, the function defined in angleGreaterThanFunc will be executed. Accepts an integer.

  • angleLessThanFunc: null

    The function to execute when the angle of the image being rotated is less than specified in angleLessThan. Accepts a function.

  • angleGreaterThanFunc: null

    The function to execute when the angle of the image being rotated is greater than specified in angleGreaterThan. Accepts a function.

  • getAngleFrom: null

    The id of the element the angle to the target should be calculated from. Should be used for example when you're hiding the image being rotated, since angle can't be calculated form hidden elements. Defaults to the element the plugin is attached to. Accepts element name as a string with a preceding hash sign: "#example".

  • passAngleTo: null

    If you'd like the angle to be passed to an element as its being changed, you can set the id of that element here. Useful for debugging or if you just want to show the angle. If the element specified is an input, the angle will set as the element's value. For every other element the angle is set as that element's html. Accepts element name as a string with a preceding hash sign: "#example".

  • xCorrection: 0

    If you need to adjust the position of the exact point in the target element to which the angle is calculated to, the adjustment on the x-axle can be set here in pixels. Accepts a positive or negative integer.

  • yCorrection: 0

    If you need to adjust the position of the exact point in the target element to which the angle is calculated to, the adjustment on the y-axle can be set here in pixels. Accepts a positive or negative integer.

  • pause: false

    The pointer images rotation can be paused by settings this to true. Accepts true or false.

The.Methods

  • $("#element").pointat("init");

    Chainable. The default method, doesn't need to be called explicitly. Returns this.

  • $("#element").pointat("getAngle");

    Can be used to get the current angle of the image being rotated. Returns an integer.
    Note: Due to the nature of this method it cannot be used with multiple elements at once, and cannot be chained. Doing so will only return the first element's current angle.

  • $("#element").pointat("updateRotation");

    Chainable. Can be used to manually update the rotation as needed. Doesn't take any arguments, but instead calculates the angle automatically. Returns this.

  • $("#element").pointat("pause");

    Chainable. Can be used to pause the rotation. Note that even when the rotation is paused, the angle will still get updated. Thus this can be used inside the angle dependent functions. Returns this.

  • $("#element").pointat("resume");

    Chainable. Can be used to resume the rotation after $("#element").pointat("pause");. Note that even when the rotation is paused, the angle will still get updated. Thus this can be used inside the angle dependent functions. Returns this.

  • $("#element").pointat("destroy");

    Chainable. Can be used to destroy the plugin from an element. Returns this.
    Note: One data is saved on the body of the page: $("body").data("pointatcount"). This is a simple integer stored to properly hook several listeners to the scroll event, and it's not affected by the destroy method. If you must get rid of all data related to jQuery.pointat, you should destroy each instance of the plugin, and then call $("body").removeData('pointatcount');. If you remove this data while you still have plugins initialized, and then attempt to initialize a new instance of the plugin, you will run into problems.

The.Events

  • changedTarget

    This even fires when changing targets in case you've given several targets as an array. Passes event, newTarget, currentTarget to the event handler.

  • beforeRotate

    This event fires after the new angle has been calculated, but the element has not been rotated yet. Passes event, oldAngle, newAngle to the event handler.

  • afterRotate

    This event fires after the element has been rotated. Passes event, oldAngle, newAngle to the event handler.

    An example of using the events:

    						
    $("#arrow").bind("afterRotate",
    	function(event, oldAngle, newAngle) {
    		 //do something
    	}
    );
    						



comments powered by Disqus