animateObjectFromTo

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"]);
  animateObjectFromTo( 
    myDiv, 
    { top:currentTop, left:currentLeft }, 
    { top:0, left:currentLeft }, 
    250 
  );

    /////////////////////////////////////////////////////////////////////////////////////////
// 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;
      
      animate();

      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;
          console.log('top is now: ' + parseFloat(oCurrentStyle["top"]) + deltaYPerFrame + "px")
          setTimeout( function() { animate(); }, deltaTimePerFrame );
        }
      }

Badass Javascript Date Validator.Useful for Rails.

Haven't posted for a while. I should remember to post cool routines like the one below after I write them as they are useful to many.

I have seen quite a lot of good examples of folks using (and expanding upon) routines I wrote for some of the Gadgets that ship with Vista (to be found in library.js if you have a Vista Box) and for some of AOL's (apparently deprecated) Mac OSX Widgets.

Functions like showOrHide, getLocalizedString, getSpinner (emulates Vista-like spinner image) I have seen in use all over the place.

Here is a somewhat badass Date Validator routine I wrote today that takes in either a string date value or an <INPUT> Element Object and validates the date to be formatted as DD-MM-YYYY.

I wrote it for use by a Ruby on Rails application, but it's pretty handy as a general library function.

Using this (simple) Regex:
var DATE_REGEX  = /^(\d{2})-(\d{2})-(\d{4})$/

////////////////////////////////////////////////////////////////////////////////
//                                                                            //
// validateDate([object|string] oHTMLInputElement) - Validates a date value   //
// ===============================================                            // 
//   You can pass in the id to an <input> Element, an actual                  //
//   oHTMLInputElement or an actual date value in the form of a string        //
//                                                                            //
////////////////////////////////////////////////////////////////////////////////
function validateDate(oHTMLInputElementOrDateValue) {
  var theDateValueToValidate = "";
  var theValidatedDateValue = false;
  var bIsInputElement = false;
  if (typeof(oHTMLInputElementOrDateValue)=="string")  {
    var oHTMLInputElement = document.getElementById(oHTMLInputElementOrDateValue);
    if (oHTMLInputElement && typeof(oHTMLInputElement=="object") && (oHTMLInputElement.tagName=="INPUT")) {
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;
    } else {
      // Presumably they just passed in a date string
      theDateValueToValidate = oHTMLInputElementOrDateValue;
      bIsInputElement = false;
    }
  } else {
    // They have passed in an Object
    if (typeof(oHTMLInputElementOrDateValue=="object") && (oHTMLInputElementOrDateValue.tagName=="INPUT")) {
      var oHTMLInputElement = oHTMLInputElementOrDateValue;
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;
    }
  }
  // If we have a date value to actually validate, let's get started
  if (theDateValueToValidate != "") {
    var theDateValue = theDateValueToValidate.replace(/\//g,"-");  // Ruby-side only accepts hyphens
    if (DATE_REGEX.test(theDateValue)) {
      theValidatedDateValue = theDateValue;
    } else {
      if (theDateValue.indexOf('-') > -1) {
        var theMonth = theDateValue.split('-')[0];
        var theDay   = theDateValue.split('-')[1];
        var theYear  = theDateValue.split('-')[2];
        theMonth = parseInt(theMonth).PadWithZero();            // If they've entered a single digit for either Day or Month, pad with zero accordingly
        theDay   = parseInt(theDay).PadWithZero();
        if (theYear.length==2) { theYear = "20" + theYear; }    // If they've entered a two-digit year, assume it's in the 21st century
        theDateValue = theMonth + "-" + theDay + "-" + theYear; // Rebuild the date. Hopefully this will work
        if (DATE_REGEX.test(theDateValue)) {
          theValidatedDateValue = theDateValue;
        }
      }
      // If we get to this point and none of our efforts have worked to format the date as "required", throw an error (if they are using an INPUT element)
      if (!theValidatedDateValue && bIsInputElement) {
        alert("ERROR: Date must be formatted as follows:\n\n\tDD-MM-YYYY\n\nPlease correct before continuing");
        oHTMLInputElement.focus();
      }
    }
  }
  if (bIsInputElement && theValidatedDateValue) {
    oHTMLInputElement.value = theValidatedDateValue;
  }
  return theValidatedDateValue;
}

Hope you find this one useful as well.

Shannon Norrell

Now on GitHub as well