JS works in browser, but not on JSFiddle

Question

Hello I have a problem with this code:

 $("#col3, #col4").betterMouseover(500, function() {
     var color;
     if ($(this).attr('id') == "col3") { color = "#44a0ff"; }
     else { color = "red"; }
     $("#better").css({backgroundColor:""+color+""});
});


(function($) {
        $.fn.betterMouseover = function (accidentTime, funkcia) {
            if (accidentTime == undefined || accidentTime == null) { accidentTime = 250; }
            if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
                funkcia = function() { 
                    console.log("no callback action specified for betterMouseover()"); 
                }; 
            }
            return this.each(function() {
                var jeOut;
                $(this).mouseenter(function() { 
                    var totok = this; 
                    jeOut = false;
                    setTimeout(function(){
                        if (!jeOut) { $(totok).betterMouseoverHandler(funkcia); }
                    }, accidentTime);
                }).mouseleave(function() { 
                    jeOut = true;
                });
            });
        }
        $.fn.betterMouseoverHandler = function (fx) {
            fx.call(this);
        }
}(jQuery));

JSFiddle link

Code works in browser, but not on JSFiddle. It's small jquery plugin maden by me, I get error on line 9 saying something Object object has no method betterMouseover. Are there some restrictions in JSFiddle so I am not able to run jquery plugins ?

Answer 1

Check this revised JSFiddle.

You're trying to bind the new plugin event handler before you defined the event handler. Move the event handler to the top of the script panel like so:

Script Panel:

/* Define New Handler */
(function($) {
    $.fn.betterMouseover = function (accidentTime, funkcia) {
        if (accidentTime == undefined || accidentTime == null) { 
            accidentTime = 250; 
        }
        if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
            funkcia = function() { 
                console.log("no callback action specified for betterMouseover()"); 
            }; 
        }
        return this.each(function() {
            var jeOut;
            $(this).mouseenter(function() { 
            var totok = this; 
                jeOut = false;
                setTimeout(function(){
                    if (!jeOut) { 
                        $(totok).betterMouseoverHandler(funkcia);
                    }
                }, accidentTime);
            }).mouseleave(function() { 
                jeOut = true;
            });
        });
    }
    $.fn.betterMouseoverHandler = function (fx) {
        fx.call(this);
    }
}(jQuery));

/* Bind New Handler */
$("#col1, #col2").mouseenter(function() {
   var color;
   if ($(this).attr('id') == "col1") { 
       color = "#44a0ff"; 
   } else { 
       color = "red";
   }
   $("#original").css({backgroundColor:""+color+""});
});


$("#col3, #col4").betterMouseover(500, function() {
     var color;
     if ($(this).attr('id') == "col3") { 
         color = "#44a0ff"; 
     } else { 
         color = "red"; 
     }
     $("#better").css({backgroundColor:""+color+""});
});