Grow your CSS skills. Land your dream job.

help with writing jquery plugin

  • # July 19, 2013 at 3:25 am

    Hi,

    I was working with jquery for last 3 months.. I am well acquainted working with functionality but never tried to write a plug in… just started experimenting with above functionality.. coded as below..

    $.fn.calculateDistance = function(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX – (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY – (elem.offset().top+(elem.height()/2)), 2)));
    };

    $(document).ready(function(){

    var mX, mY, distance, $distance = $(‘#distance span’), $element = $(‘#element’);
    $(document).mousemove(function(e) {
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);
    $distance.text(distance);

    });

    });

    doing so gives me an error

    **calculateDistance is not defined**

    where am I going wrong?

    # July 19, 2013 at 3:55 am

    Check out this article: http://css-plus.com/2010/04/how-to-create-a-simple-jquery-plugin/

    In your supplied code you’re referencing `calculateDistance` like it’s a normal javascript function:

    distance = calculateDistance($element, mX, mY);

    However, you’re defining it as a jQuery function:

    $.fn.calculateDistance = function(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX – (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY – (elem.offset().top+(elem.height()/2)), 2)));
    };

    Try defining it like this:

    var calculateDistance = function(elem, mouseX, mouseY) {
    return Math.fl….

    # July 19, 2013 at 4:56 am

    Try something like this:

    $.fn.calculateDistance = function(mouseX, mouseY) {
    // ‘this’ refers to the jQuery object the function is called on, you don’t need to pass the element
    return this; // always return ‘this’ for chaining, unless you need to return some value
    };
    // call the function directly on tje jQuery object
    distance = $element.calculateDistance(mX, mY);

    # July 19, 2013 at 5:17 am

    @jamy_Za … thank you for sharing the useful link and making me understand where I have gone wrong….

    # July 19, 2013 at 5:17 am

    No Problem. Note: I wouldn’t suggest littering jQuery with random methods such as `calculateDistance`. Rather use your own functions for that like I mentioned earlier, unless this is for learning of course.

    # July 19, 2013 at 5:18 am

    @crocodillon …. thank you for the solution

    # July 19, 2013 at 5:25 am

    @jamy_za… you mean I should start writing functions as specified in your mentioned link as below..? correct..?

    this will keep my code clean, grouped, manageable and readable.. right…?

    (function($){
    jQuery.fn.extend({

    //Options is added within the brackets after function
    // This informs the plugin that options will be used
    redBorder: function(options) {

    //Defaults options are set
    var defaults = {
    border: “3px solid red”
    };
    var options = $.extend(defaults, options);

    return this.each(function() {

    jQuery(this).css(“border”, options.border);

    });

    }

    });
    })(jQuery);

    correct me if I understood wrong..

    # July 19, 2013 at 6:01 am

    I feel that’s a better way of writing a jQuery plugin.

    However, what I was saying is: Something like `calculateDistance`, like you’re using it, shouldn’t be a jQuery method or plugin. Adding a jQuery method or plugin shouldn’t be done for calculations, rather to manipulate the DOM or jQuery DOM object itself. A good example of this is how [jQueryUI](http://jqueryui.com/) extends the jQuery object. It makes objects draggable, fade in/out,
    toggleClass and animate, etc.

    So basically, in general:

    function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX – (elOffset.left+(elem.width()/2)), 2) + Math.pow(mouseY – (elOffset.top+(elem.height()/2)), 2)));
    };

    Would be a better idea than this:

    $.fn.calculateDistance = function calculateDistance(elem, mouseX, mouseY) {
    return Mat…

    # July 19, 2013 at 6:58 am

    @jamy_za… yep.. got it… I got it what you meant… thank you for guiding me.. this is an important note for someone like me who just started learning jquery the right way…

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".