Source Code

for file ~/controls/DataFade.js

// DateFade.js
// Javascript Behaviour for the DataFade Control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// ----- 
// 08.08.2005 created by Matthias Hertel
// 16.09.2006 context on event-methods is now set to the bound object.
// 27.09.2006 datatypes support
// 27.09.2006 fade.* renamed to datafade.*
// 29.09.2006 precission support added
// 23.06.2007 simplified, now inherits from jcl.DataOutputBehavior.
// 18.12.2007 Simplifications and documentation.
// 06.05.2015 Removing IE only currentStyle usage.
// 15.02.2016 Removing fading with a timer by using CSS3 treansition.

jcl.DataFadeBehavior = {
  /// <summary>Implementation of a JavaScript Behavior
  /// for a data output control that signals new values by showing a fading yellow
  /// background color.</summary>

  inheritFrom: jcl.DataOutputBehavior, /// <summary>Inherit from DataOutput.</summary>

  highcolor: "#FFFF00", /// <summary>The highlight color. The usually used yellow is the defaut value.</summary>
  _orgColor: null,


  init: function () {
    /// <summary>Initialze the JavaScript control.</summary>
    jcl.DataOutputBehavior.init.call(this);
    this._orgColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
  }, // init


  setData: function (val) {
    /// <summary>Overwrite the setData function to add a fading effect when the value has changed.</summary>
    var s = this.innerText;
    jcl.DataOutputBehavior.setData.call(this, val);
    this.style.transition = "all 0";
    this.style.backgroundColor = this.highcolor;
    window.setTimeout(this._fade.bind(this), 50);
  }, // setData

  _fade: function () {
    /// <summary>Implementation of the fade effect by using CSS Transition.</summary>
    this.style.transition = "all 1s";
    this.style.backgroundColor = this._orgColor;
  } // _fade

}; // jcl.DataFadeBehavior
This page is part of the http://www.mathertel.de/ web site.
For updates and discussions see http://ajaxaspects.blogspot.com/.