CODEWITHSUNDEEP
jquerycallback
John T
John T

Reputation: 1078

How to add callback to a function

I have the following function:

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    return result;
}

This function returns dimensions of an element on my page. However, my call to this runs faster than the function can operate and 'dimensions' isn't set correctly. My call is:

dimensions = $('#backgroundCroppingDiv').getRealDimensions();
myWidth = dimensions.width; // myWidth INCORRECT BECAUSE FNC HASN'T FINISHED

I want to implement a 'callback' function so that myWidth doesn't get set until the 'getRealDimensions' function has finished and calculated the dimensions.

I tried the following:

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer, callback) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    if (typeof(callback) == 'function') {
    callback(result);
    }
    //return result;
}

And then calling it with this:

dimensions = $('#backgroundCroppingDiv').getRealDimensions( function() {
    myWidth = dimensions.width;
});

But to no avail...

Does anyone know how to achieve the functionality that I need?

Thanks :-)

Upvotes: 0

Views: 94

Answers (3)

John T
John T

Reputation: 1078

Managed to suss it thanks to the two answers posted. I cobbled this together and it seems to work.

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer, callback) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    if (typeof(callback) == 'function') {
    callback(result);
    }
    //return result;
}

And I then call it with:

$('#backgroundCroppingDiv').getRealDimensions( null, function(dimensions) {
    myWidth = dimensions.width;
});

A big thanks for all the help.

Upvotes: 0

Banana
Banana

Reputation: 7473

change to:

$.fn.getRealDimensions = function (outer,dimensions) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    dimensions=result;
}

and call the callback using .done() :

var dimensions;
$('#backgroundCroppingDiv').getRealDimensions(outer,dimensions).done(function() {
    myWidth = dimensions.width;
});

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You are passing result as parameter to callback function you need to accept it. Here's example as per your code.

$('#backgroundCroppingDiv').getRealDimensions( function(dimensions ) {
    myWidth = dimensions.width;
});

Upvotes: 1

Related Questions