Updates from April, 2010 Toggle Comment Threads | Keyboard Shortcuts

  • Mohammad Jangda 1:50 pm on February 25, 2011 Permalink | Reply
    Tags: , , script, timer   

    JavaScript Countdown Timer 

    I was in search of a JavaScript countdown timer (mainly because I’m too lazy to build it out myself — and because I’m sure millions before me have done the same), but Google wasn’t doing me much good. Most scripts would modify the DOM, directly but not make it easy to programmatically intercept the remaining time.

    So, I picked one of the cleanest scripts and cleaned it up a bit. 


    /**
 * A sweet js countdown timer with a custom callback that gives you a JSON object!
 * Heavily modified code originally found on http://www.ricocheting.com/code/javascript/html-generator/countdown-timer
 *
 * @param string|Date String representation of when to countdown to. Date objects probably work too
 * @param callback Function triggered when the interval has passed
 * @param int Number of milliseconds for the timeout. Defaults to 1000 (1 second)
 *
 * @return object Returns a JSON object with properties: days, hours, minutes, seconds
 */
timer = function(endDate, callback, interval) {
    endDate = new Date(endDate);
    interval = interval || 1000;

    var currentDate = new Date()
        , millisecondDiff = endDate.getTime() - currentDate.getTime() // get difference in milliseconds
        , timeRemaining = {
            days: 0
            , hours: 0
            , minutes: 0
            , seconds: 0
        }
        ;

    if(millisecondDiff > 0) {
        millisecondDiff = Math.floor( millisecondDiff/1000 ); // kill the "milliseconds" so just secs

		timeRemaining.days = Math.floor( millisecondDiff/86400 ); // days
		millisecondDiff = millisecondDiff % 86400;

		timeRemaining.hours = Math.floor( millisecondDiff/3600 ); // hours
		millisecondDiff = millisecondDiff % 3600;

		timeRemaining.minutes = Math.floor( millisecondDiff/60 ); // minutes
		millisecondDiff = millisecondDiff % 60;

		timeRemaining.seconds = Math.floor(millisecondDiff); // seconds

        setTimeout(function() {
            timer(endDate, callback);
        }, interval);
    }
    
    callback(timeRemaining);
}

    It’s easy to use! You specify an end date (as a string, though Date object’s should work as well) and pass in a callback that gets triggered at a set interval. The callback receives a JSON object with properties for days, hours, minutes and seconds. You can pass in a custom interval if you want the callback triggered at a different period. Examples below.


    timer('2011-12-31', function(timeRemaining) {
	console.log('Timer 1:', timeRemaining);
});

// This will run every minute, instead of every second
timer('2012-12-31', function(timeRemaining) {
	console.log('Timer 2:', timeRemaining);
}, 60000);

    Interested? See it in action: http://jsfiddle.net/mjangda/vGv7J/1/

     

  • Mohammad Jangda 1:01 pm on February 16, 2011 Permalink | Reply
    Tags: , , , javascript errors,   

    JavaScript Tip: Bust and Disable console.log 

    Here’s a quick and dirty follow-up to my original Save me from console.log errors. The main improvement to this version is that it includes a way to disable console.log (and related functions), for example, in production environments.

    While console.log is awesome, you really don’t want your dirty inner workings littering up the Console (or visible to the user — though, you could make an argument that this is a great way to debug errors in live environments) once your app is deployed.

    Note: Firebug can get unhappy sometimes if you try to mess with its console object. But, in theory, this approach should work.


    var DEBUG_MODE = true; // Set this value to false for production

if(typeof(console) === 'undefined') {
    console = {}
}

if(!DEBUG_MODE || typeof(console.log) === 'undefined') {
    // FYI: Firebug might get cranky...
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}

     

  • Mohammad Jangda 1:01 pm on December 10, 2010 Permalink | Reply
    Tags: , js, prototype   

    [[Prototype]] vs prototype (Peter van der Zee on JSMentors) 

    Here’s a great explanation (by Peter van der Zee) of the key differences between [[Prototype]] and prototype in JavaScript. It finally makes sense now!

    Note: to understand this explanation it would help to know what prototype is/does and how it works.

    So we have [[Prototype]] and prototype. You can see prototype as the parent object to which [[Prototype]] (so __proto__) refers to on instances of the constructor. Hah, I’m sure that’s not confusing. So let me give an example :)

    var A = function(){};
    var a = new A();
    log(a instanceof A); // true
    log(A.prototype); // object
    log(a.prototype); // undefined
    log(a.__proto__); // object, in browsers that support the mapping
    log(a.__proto__=== A.prototype); // true.

    “A” has a prototype property (A.prototype). If you add new properties to that object, they will automagically be available on “a”. “a” has a [[Prototype]] internal property. It refers to A.prototype. It is an essential part of the prototypal chain because it actually determines the next part of the chain. If you change a.[[Prototype]], changes to A.prototype will no longer be reflected on “a”. In fact, all not “own” properties of a will no longer be accessible and are replaced by a new set of properties.

    via [JSMentors] Object creation.

     

  • Mohammad Jangda 3:36 pm on April 29, 2010 Permalink | Reply
    Tags: , , , , ,   

    JavaScript Tip: Save me from console.log errors 

    It’s bound to happen. You build yourself a sweet webapp with some sweet javascript action and you unleash it to the world only to get angry emails yelling, “IT DOESn’T WoRK! FIX iT okAy?” And it’s the darndest problem because it’s happening to both IE and Firefox users (Chrome and Safari users have been silent) and you can’t replicate it.

    And then you spend hours trying to figure out the problem to no avail, leaving you scratching that magnificent head of yours with luscious, flowing hair. You just can’t replicate the problem. But then, after hours and days of staring intently at the screen, you find it. It’s a rogue console.log call that you forgot to comment out. And then you spend the remainder of the week chastising yourself for being stupid.

    It happens. (To be fair, it’s not your fault that your users don’t have Firebug or IE Developer Tools installed. Blame it on Mozilla/Microsoft.)

    But there’s an easy solution. Just copy the following javascript somewhere in your project, and rest easy:


    if(typeof(console) === 'undefined') {
    var console = {}
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}

     

    • Chris Marisic 3:38 pm on March 8, 2011 Permalink | Reply

      Nice article, I just came across this bug affecting orbit jquery slider and posted your article to them https://github.com/zurb/orbit/issues/6 :)

    • Jatinder Assi 3:52 pm on September 27, 2011 Permalink | Reply

      Actually the if stmt will always gets executed in IE 8, even when the developer tools window is open, thus resulting in the console object to be always a nul object.

      Instead here is the solution that I used after modifying your code:

      try
      {
      console.log('test');
      }
      catch(err){
      var console = {};
      console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
      }

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel