Question

this is my first atempt of creating a jquery plugin so I thought id start simple but even that is troubling…

heres my code.

(function($){
$.fn.elapsed = function(options) {
    var defaults = { seconds: true, minutes: true, hours: true, days: true };
    var options = $.extend(defaults, options);
    var ob = $(this);
    var secs = 0, mins = 0, hours = 0, days = 0;
    function elapsed_time( secs, mins, hours, days ){
        if( secs == 59 ) { mins++; secs = 0; }
        if( mins == 59 ) { hours++; mins = 0; }
        if( hours == 23 ) { days++; hours = 0; }
        ob.html( ( days === true ? days + ':' : false ) + ( hours === true ? hours + ':' : false ) + ( mins === true ? mins + ':' : false ) + ( secs === true ? secs + ':' : false ) );
        window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
    }
    elapsed_time( secs, mins, hours, days );    
};
})(jQuery);

nothing at all seems to happen… can any tell me where im going wrong?

Answer 1

You’re using the same variable names for your display which I think is unintentional, this:

ob.html( ( days === true ? days + ':' : false ) + 
         ( hours === true ? hours + ':' : false ) + 
         ( mins === true ? mins + ':' : false ) + 
         ( secs === true ? secs + ':' : false ) );

Should be more like this:

ob.html( ( options.days ? days + ':' : '') + 
         ( options.hours ? hours + ':' : '') + 
         ( options.minutes ? mins + ':' : '' ) + 
         ( options.seconds ? secs : '') );

In these conditionals you want to display the separator if showing that interval, not display false or 0 if not (I think this is your intent anyway). Since secs starts at 0 here, it was not changing at all, since 0 is falsey.

---

Also, your intervals should changeover when they hit rather than just before, so for minutes/hours that’s 60 and days 24, like this:

if( secs == 60 ) { mins++; secs = 0; }
if( mins == 60 ) { hours++; mins = 0; }
if( hours == 24 ) { days++; hours = 0; }

….and last this is already a jQuery object inside a plugin, so you can just do:

var ob = this;

overall, looking like this:

(function($){
$.fn.elapsed = function(options) {
    var defaults = { seconds: true, minutes: true, hours: true, days: true };
    var options = $.extend(defaults, options);
    var ob = this;
    var secs = 0, mins = 0, hours = 0, days = 0;
    function elapsed_time( secs, mins, hours, days ){
        if( secs == 60 ) { mins++; secs = 0; }
        if( mins == 60 ) { hours++; mins = 0; }
        if( hours == 24 ) { days++; hours = 0; }
        ob.html( ( options.days ? days + ':' : '') + 
                 ( options.hours ? hours + ':' : '') + 
                 ( options.minutes ? mins + ':' : '' ) + 
                 ( options.seconds ? secs : '') );
        window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
    }
    elapsed_time( secs, mins, hours, days );    
};
})(jQuery);

You can test it out here.