nbarthelemy.com

This one is kind of a no brainer. I am kind of surprised it wasn't already in Prototype.

Element.addMethods({
  replaceClassName: function(element, className, replacement){
    if (!(element = $(element))) return;
    return element.removeClassName(className).addClassName(replacement);
  }
});

I thought these methods may help someone out there.

Element.addMethods({	
  disableSelection: function(element){
    if (!(element = $(element))) return;
    element.unselectable = 'on';
    if( typeof element.onselectstart != 'undefined' ){
      element.onselectstart = function(){ return false };
    } else if( typeof element.style.MozUserSelect != 'undefined' ){
      element.style.MozUserSelect = 'none';
    } else {
      element.onmousedown = function(){ return false };
    }
    if( !element.style.cursor ) element.style.cursor = 'default';
    return element
  },
  enableSelection: function(element){
    if (!(element = $(element))) return;
    element.unselectable = 'on';
    if( typeof element.onselectstart != 'undefined' ){
      element.onselectstart = null;
    } else if( typeof element.style.MozUserSelect != 'undefined' ){
      element.style.MozUserSelect = 'none';
    } else {
      element.onmousedown = null;
    }
   if( !element.style.cursor ) element.style.cursor = 'default';
   return element;
  }
});

This is probably not purely in the spirit of script.aculo.us, because it uses images to accomplish the effect. It was adapted for script.aculo.us/prototype from this blog post. Tested in Firefox 2, Safari 3 and IE7.

// adds a drop shadow to a given element
Effect.DropShadow = function(element){
	element = $(element);
	
	var i1 = new Element('div', { 'class': 'i1' });
	var i2 = new Element('div', { 'class': 'i2' });
	var i3 = new Element('div', { 'class': 'i3 cf' });
	
	i2.appendChild(i3);
	i1.appendChild(i2);
	
	$A(element.childNodes).each(function(e){ i3.appendChild(e); });
	
	var bfunc = function(className){
		var e = new Element('div', { 'class': className });
		e.appendChild(new Element('div'));
		return e;
	};		
	
	element.addClassName('cp');
	element.appendChild(bfunc('bt'));
	element.appendChild(i1);
	element.appendChild(bfunc('bb'));		
};

Here is the CSS:

/* Drop Shadow Box
   --------------------------------------------------- */
   
.bt { /* Top corners and border */
	height: 4px;
	margin: 0 0 0 5px;
	background: url(drop_shadow_box.png) no-repeat 100% 0;
}

.bt div {
	position: relative;
	left: -5px;
	width: 5px;
	height: 4px;
	background: url(drop_shadow_box.png) no-repeat 0 0;
	font-size: 0;
	line-height: 0;
}

.bb { /* Bottom corners and border */
	height: 4px;
	margin:0 0 0 4px;
	background: url(drop_shadow_box.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left: -4px;
	width: 4px;
	height: 4px;
	background: url(drop_shadow_box.png) no-repeat 0 100%;
	font-size: 0;
	line-height: 0;
}

.i1 { /* Left border */
	padding:0 0 0 4px;
	background: url(drop_shadow_borders.png) repeat-y 0 0;
}

.i2 { /* Right border */
	padding:0 4px 0 0;
	background: url(drop_shadow_borders.png) repeat-y 100% 0;
}

/* Wrapper for the content. Use it to set the background color and insert some 
    padding between the borders and the content. */
.i3 {
	display:block;
	margin: 0;
}

and the images here and here

Usage:

Effect.DropShadow('some_dom_id');
		
		
	

Thought this might help someone out. This adapts Prototype's Element#remove method to conditionally use a "leak-safe" method of removal outlined in this post on the MSDN forums.

/*
   Adapted for Prototype based on:
   http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2847218&SiteID=1
*/

Element.removeWithoutLeakProtection = Element.Methods.remove;
Element.addMethods({
  discard: function(element){
    element = $(element);
    var garbageBin = $('IELeakGarbageBin') || document.body.appendChild(
        new Element('div', { id:'IELeakGarbageBin', style:'display:none;' })
     );
    garbageBin.appendChild(element);
    garbageBin.innerHTML = '';
    return element;
  },
	
  remove: function(element){
    if( Prototype.Browser.IE ){
      return Element.discard(element);
    } else {
      return Element.removeWithoutLeakProtection(element);
    }
  }
});

String.prototype.constantize || (String.prototype.constantize = function(){
   return this.charAt(0).toUpperCase() + this.substring(1).dasherize().camelize();
});

Array.prototype.sum || (Array.prototype.sum = function(iterator){
   var result = 0;
   this.each(function(value, index) {
      value = (iterator || Prototype.K)(value, index);
      try { result += parseInt(value || 0); } catch(e){}
   });
   return result;	
});

Eric Mill has released another version of his excellent Jester javascript library. Jester attempts to mimic the ActiveResource API in Rails through javascript. I have spent a fair amount of time going through the Jester code base, making suggestions and writing example code to be adapted by Eric in the last week, and I must say Eric has done a tremendous job rounding out this library with many highly anticipated features.

On another note, Jester now includes a pruned and packed version of a Date library I put together to use in my applications. I have decided to release it under the MIT License along with Jester. Over the next week I will put together a post to describe it's functionality in detail, but for now you can get the full version of the library in my SVN repository.

While reading an article on digg.com about custom themes for Google Reader. I became curious about where they stored the images for the altered theme, so I began to investigate. I found that all of the images were base64 encoded in the CSS file for the theme. It made me think of some code I wrote in Javascript, some time ago, that would allow a person to load an image file in the browser using a standard file selection widget and would produce a base64 encoded string representing that image. It is extremely easy to do, but I figured I would put the code out there because it took me a while to figure it out.

Data URIs have been around for a while. When I was writing this code I had to to a bit of research to understand the positive or negative impact they would have on the project I was working on.

Please be aware that this code is FIREFOX ONLY. So with out further a due, here is the code:

Image.to_base64 = function(srcURL){
  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas");
  canvas.width = canvas.height = 16;
		
  var image = document.createElementNS("http://www.w3.org/1999/xhtml", "html:img");
  image.src = srcURL;
		
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 16, 16);
		
  return canvas.toDataURL();
};

But wait before you run off and begin to use this code. There are some major limitations to data URIs. At first glance they seem like the panacea, but once you take a look at portability, performance and size they quickly fall short. Check out this Wikipedia definition. It was very helpful.