Javascript animateObjectFromTo

by on Jul.04, 2012, under Javascript, Objects, Software Development

This method will animate an object from a given left, top to another left, top over a specified number of milliseconds at a specified frame rate.

This is an example of how it might be called:

  var myDiv = document.getElementById('myDiv),
      currentPosition = window.getComputedStyle(myDiv,null),
      currentLeft     = parseFloat(currentPosition["left"]),
      currentTop      = parseFloat(currentPosition["top"]);
    { top:currentTop, left:currentLeft }, 
    { top:0, left:currentLeft }, 

Notice how the method uses an inner function for the animation heavy lifting.

//  animateObjectFromTo([object|string] oHTMLElement, json From, json To, int totalTimeInMilliseconds, OPTIONAL int framesPerSecond)
//   Sets up an animation that interpolates frame animation from a beginning top, left coordinate
//   to an ending top, left coordinate over a number of milliseconds at a specified frame rate
//      totalTimeInMilliseconds - default is 1 second
//      framesPerSecond - default is 30
    animateObjectFromTo : function(oHTMLElement, from, to, totalTimeInMilliseconds, framesPerSecond) {
      if (typeof(oHTMLElement)=="string")  {  
        oHTMLElement = document.getElementById(oHTMLElement); 
      totalTimeInMilliseconds = totalTimeInMilliseconds || 1000;
      framesPerSecond = framesPerSecond || 30;
      var currentFrame      = 0,
          numberOfFrames    = parseInt(totalTimeInMilliseconds / framesPerSecond),
          deltaTimePerFrame = totalTimeInMilliseconds/numberOfFrames,
          deltaXPerFrame    = (to.left - from.left)/numberOfFrames || 0,
          deltaYPerFrame    = (to.top - from.top)/numberOfFrames || 0;

      function animate() {
        if (currentFrame<numberOfFrames) {
          var oCurrentStyle = document.defaultView.getComputedStyle(oHTMLElement, null);
          oHTMLElement.style.left = parseFloat(oCurrentStyle["left"]) + deltaXPerFrame + "px";
          oHTMLElement.style.top  = parseFloat(oCurrentStyle["top"]) + deltaYPerFrame + "px";
          currentFrame += 1;
          setTimeout( function() { animate(); }, deltaTimePerFrame );

shannon norrell

Leave a Comment more...

Determine if an Object is empty in Javascript

by on Apr.22, 2011, under Javascript, Objects

There are times when you need to determine if an object actually contains anything.
Distinguishing {} from { foo:bar } cannot be done by checking for .length, as an Object does not provide that.

Therefore, the only way to determine if there is anything in the Object is to basically do a for-each loop on the Object itself. Now, depending on the Javascript library you are (probably) using, there will be lots of *stuff* inside the Object that was inherited from the prototype chain. Since we are looking for actual stuff, we utilize the rarely used hasOwnProperty method to determine if the *stuff* in the Object was inherited or actually a part of theObject itself.

Now, you could add this to the prototype of Object itself (for instance Object.prototype.isEmpty = function() { blah};, but I consider that bad practice as – particularly with the Object Object, from which every other type of *thing* in Javascript inherits, the prototype wil be added to all other types of Objects in Javascript as well (for instance String would then have an isEmpty method).

This is all fine and dandy if you want to “robustify” this to support all data types, but trust me, it’s much cleaner and nicer to the DOM
to do it the way I illustrate below.

// objectIsEmpty( object) - determines if an Object is empty
// ======================
//   You could add this to the prototype chain of Object as .isEmpty(), 
//   but that would be wasteful. Better to keep it as a standalone function
function objectIsEmpty( oObject ) {
  var eachProperty = null;
  for (eachProperty in oObject) {
    if (oObject.hasOwnProperty(eachProperty)) {
      return false;
  return true;

Shannon Norrell

Leave a Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!


A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org