cfleschhut

/* Chapter 14: Enforcing Function Context */

// http://ejohn.org/apps/learn/#86
Function.prototype.bind = function() {
    var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
    return function() {
        return fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    };
};
// function bind(context, name) {

cfleschhut

/* adapted from Ext Core radioClass */

function hasClass(el, cls) {
	return new RegExp("(^|\\s)" + cls + "(\\s|$)").test(el.className);
}
function addClass(el, cls) {
	if (!hasClass(el, cls)) {
		el.className += el.className ? " " + cls : cls;
	}
}

cfleschhut

/*
Chapter 3: Literals and Constructors
*/

// Object Constructor Catch
var o = new Object();
console.log(o.constructor.name);
var o = new Object(1);
console.log(o.constructor.name);
var o = new Object("str");

cfleschhut

// object movement
function init() {
	var obj = document.getElementById("move");
	obj.timerID = setInterval(function() {
		moveObject(obj, 500, 0, 25);
	}, 50);
}
function moveObject(target, destinationLeft, destinationTop, maxSpeed) {
	var currentLeft = parseInt(target.style.left);
	var currentTop = parseInt(target.style.top);

cfleschhut

/* Demo: http://jsfiddle.net/HdMMj/ */

function fadeUp(element, red, green, blue) {
  if (element.fade) clearTimeout(element.fade);
  element.style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")";
  if (red == 255 && green == 255 && blue == 255) return;
  var newred = red + Math.ceil((255 - red)/10);
  var newgreen = green + Math.ceil((255 - green)/10);
  var newblue = blue + Math.ceil((255 - blue)/10);
  element.fade = setTimeout(function() {

cfleschhut

.default {
  width: 100px; height: 100px; background: orange;
  text-align: center; line-height: 100px;
  position: absolute; top: 50px; left: 50px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
}

/* Gradients (linear/radial) */

cfleschhut

String.augmentedProperties = [];

if (!String.prototype.camelize) {
  String.prototype.camelize = function() {
    return this.replace(/(\s)([a-zA-Z])/g, function(str, p1, p2) {
      return p2.toUpperCase();
    });
  };
  String.augmentedProperties.push("camelize");
}

cfleschhut

// adjust image selector in fn-call
// and run this from the (firebug, etc.) console
(function(imgObj) {
  var imgsrc = imgObj.src;
  var canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d");
  canvas.width = imgObj.width;
  canvas.height = imgObj.height;
  var newimg = new Image();
  newimg.src = imgsrc;

cfleschhut

// Getting an Object’s enumerable properties (ES5)
var obj = {};
Object.defineProperty(obj, "foo", { value: 2, enumerable: true });
Object.defineProperty(obj, "bar", { value: 3, enumerable: true });
Object.defineProperty(obj, "baz", { value: 4, enumerable: false });
Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
});

cfleschhut

body { background: url(http://www.themaninblue.com/experiment/Cubescape/images/grid.gif); }
#box {
    position: absolute;
}
.top {
    width: 20px; height: 20px; background: hsl(40, 85%, 70%);
    -moz-transform: rotate(45deg) skew(-15deg, -15deg);
    -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {