jQuery plugin getting undefined values

Question

I am learning how to make my own jQuery plugins and I'm running into an issue I am not sure why I am seeing. Here is my plugin:

(function($){
    $.fn.clipping = function() {
        console.log("Offset Width: " + this.offsetWidth);
        console.log("Scroll Width: " + this.scrollWidth);

        if(this.offsetWidth > this.scrollWidth) {

        } else {

        }
    };
})( jQuery );

Then on document load I have this:

$("#tiles").clipping();

In the console I get this:

Offset Width: undefined
Scroll Width: undefined

Why is this happening? Do I need to do something to make sure it is looking at the exact element by ID that I want it to?

Karl-André Gagnon · Accepted Answer · 2018-02-26 20:34:41Z

1

Inside you plugin, this is a jQuery object. You should use .prop to get DOM properties:

this.prop('offsetWidth');
this.prop('scrollWidth');

A good practice for plugins is to loop the initial jQuery object while returning it to allow chaining. Inside the loop, this will be the DOM element.

(function($){
    $.fn.clipping = function() {
        return this.each(function(){
            console.log("Offset Width: " + this.offsetWidth);
            console.log("Scroll Width: " + this.scrollWidth);

            if(this.offsetWidth > this.scrollWidth) {

            } else {

            }
        });
    };
})( jQuery );

And your plugin will work with object containing many DOM elements.

answered Feb 26, 2018 at 20:34

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

Collectives™ on Stack Overflow

jQuery plugin getting undefined values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related