jQuery custom functions

Question

Why the value of oldHeight is not overridden ? It still has oldHeight to 80 not what i have passed as argument. Even if i pass argument newHeight, it will also not override it. But according to the documentation, it will automatically updated. Here's the code:

( function($) {
$.fn.bad = function(callback) {
    var options;
    var settings = $.extend({
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    return this.each( function() {
        var that$ = $(this);
        that$.bind("mouseenter", function() {
            $(this).animate({ "height" : settings.newHeight+"px" });
        }).bind("mouseleave", function() {
            $(this).animate({ "height" : settings.oldHeight+"px" });
        });
    });
}
})(jQuery);
$(".box").bad({"oldHeight":"400"});

And this ===> Fiddle

It is overriding, isn't it? the box is getting bigger on the fiddle — painotpi
– painotpi, Commented Feb 27, 2013 at 10:43
hey, i have assigned 400 when the mouseleave but it is limited to default option. — Talha Akbar
– Talha Akbar, Commented Feb 27, 2013 at 10:44

Merec · Accepted Answer · 2013-02-27 10:45:28Z

1

You initialized "options" with null with var options; and extended your settings with an empty value.

( function($) {
    $.fn.bad = function(options) {
            var settings = $.extend({
                "oldHeight":"80",
                "newHeight":"200"
            }, options);

    ...

this works.

answered Feb 27, 2013 at 10:45

Merec

2,7711 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Talha Akbar Over a year ago

Thanks, i just started. I didn't noticed that i have already callback as parameter. Just was following the documentation and got confused. I didn't even noticed that i have to assign that callback variable to $.extend({}) method.

painotpi · Accepted Answer · 2013-02-27 10:50:59Z

1

Try ths,

var settings = {};
var settings = $.extend(settings, {
    "oldHeight":"80",
    "newHeight":"200"
}, options);

Your function needs to accept the options not the callback (if there is no callback being used).

So your code will be,

(function($) {
$.fn.bad = function(options) {
    var settings = {};
    var settings = $.extend(settings, {
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    ...

Test

answered Feb 27, 2013 at 10:50

painotpi

7,0122 gold badges40 silver badges72 bronze badges

3 Comments

Talha Akbar Over a year ago

I just named it callback. However, naming options is not mandatory. jsfiddle.net/cGSNn/5

painotpi Over a year ago

Yes, it's not mandatory, but makes more sense semantically :)

Talha Akbar Over a year ago

well, ok. +1 for the effort.

Collectives™ on Stack Overflow

jQuery custom functions

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related