How to trigger something within a resize event with a jQuery plugin -

i'm trying further jquery learning making tiny little basic plugin inject html, apply css element (can changed via passing options call) , displaying screen width , height on resize.

there still elements such css don't work me yet. 1 thing don't know @ moment how can pass in event listener resize within plugin?

my plugin far:

$.fn.windowsize = function( options ) {     // outline settings     var settings = $.extend({         color: "#000000",         backgroundcolor: "yellow",         position: "fixed",         top: 0,         left: 0     }, options );      // screen sizing vars     var the_width = $(window).width();     var the_height = $(window).height();        // measure html     var measure = '<div id="measurements">' +         '<span>width:</span><span id="width">risize find out</span>' +         '<span>height:</span><span id="height">risize find out</span>' +         '</div>';      var measure_display = $("#measurements");      // inject measure elem     this.prepend(measure);      // use default css     return measure_display.css({         color: settings.color,         backgroundcolor: settings.backgroundcolor,         position: settings.position,         top: settings.top,         left: settings.left     });      // sets html display widths     $(window).resize(function() {         $('#width').text(the_width);         $('#height').text(the_height);     }); }; 

live, partially working example.

*update

essentially there part of plugin values triggered on window resize , rather user needing write outside of plugin want within plugin , wanting know if possible.

you need pass function parameter options object, this:

$(window).resize(settings.resizehandler); 

then use this:

$('body').windowsize({     resizehandler: function () {         console.log("window resize");     } });