Question

I’m trying to build my first jquery plugin but i get the following error:

screenBlockis not a funnction

My code is:

$(document).ready(function fiddletest()
{
    $.screenBlock({
       opacity: "0.4",
       zindex: "22",
       clickXXX: function(event){  alert('click'); }
    });

});

(function($){
$.fn.screenBlock = function(settings){

        // settings
        var config = {
            'opacity': 0.8,
            'z-index': 10
        };

        if ( settings ){$.extend(config, settings);}

        // Generate new selector
        var selector = 'sB_'+$.md5(appid+title+link+content)+'';

        // write screenBlocker DIV in body
        $('body').prepend('<div id="'+selector+'" style="background-color:#000000; opacity:'+config.opacity+';  margin:0px;  padding:0px;  position:fixed; display:none; left:0px;  top:0px;  width:100%;  height:100%; z-index:'+config.z-index+';"><div>');

        // Fade In
        $('#'+selector).fadeIn();

        // click on screenBlocker DIV,
        $('#'+selector).click(function (e)
        {
           // remove screenBlocker DIV
           $('#'+selector).remove();

           // destroy click
           $('#'+selector).unbind('click');

           // call function clickXXX
           // ... but how?

        });

        return selector;
    };
})(jQuery);

example
http://jsfiddle.net/ywHh8/4/

Answer 1

There are (at least) two problems here.

First, you’re calling screenBlock()in your first ready handler, which runs before you define that method in your second ready handler. You’ll have to invert the two code blocks.

Second, you’re calling the screenBlock() method on $ itself, but you define it in the $.fn namespace, which means it should be called on a jQuery object:

$.screenBlock = function() {
    // This can be called with $.screenBlock().
};

$.fn.screenBlock = function() {
    // This can be called with $("selector").screenBlock().
};