JavaScript

Validator

JS Lint

Minify

http://jscompress.com/

Sample Code

JavaScript Source
JavaScript Motion Tween

Encryption

SHA

jQuery

Interface Samples
Image Reflection

Sliding Labels

[http://www.csskarma.com/blog/sliding-labels-v2/]

The CSS

/*
 Sliding labels is open source code by Tim Wright of CSSKarma.com
 Use as you see fit, I'd like it if you kept this in the code, but
 basically share it and don't be a jerk.
 
 Support:
 http://www.csskarma.com/blog/sliding-labels
*/ 
 
.slider                    { clear:both;position:relative;margin:0 0 10px; }
label                      { cursor:pointer;display:block; }
input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }
input[type="text"]:focus   { border:3px solid #0099F2; }
input[name="zip"]          { width:150px; }
 
/* submit button */
input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }

The Javascript

/*
 Sliding labels is open source code by Tim Wright of CSSKarma.com
 Use as you see fit, I'd like it if you kept this in the code, but
 basically share it and don't be a jerk.
 
 Support:
 http://www.csskarma.com/blog/sliding-labels-v2
 
 Version: 2
*/
 
$(function(){
$(' .slider label').each(function(){
    var labelColor = '#999';
    var restingPosition = '5px';
 
    // style the label with JS for progressive enhancement
    $(this).css({
        'color' : labelColor,
             'position' : 'absolute',
             'top' : '6px',
            'left' : restingPosition,
            'display' : 'inline',
                    'z-index' : '99'
    });
 
    var inputval = $(this).next().val();
 
    // grab the label width, then add 5 pixels to it
    var labelwidth = $(this).width();
    var labelmove = labelwidth + 5 +'px';
 
    // onload, check if a field is filled out, if so, move the label out of the way
    if(inputval !== ''){
        $(this).stop().animate({ 'left':'-'+labelmove }, 1);
    }        
 
    // if the input is empty on focus move the label to the left
    // if it's empty on blur, move it back
    $('input, textarea').focus(function(){
        var label = $(this).prev('label');
        var width = $(label).width();
        var adjust = width + 5 + 'px';
        var value = $(this).val();
 
        if(value == ''){
            label.stop().animate({ 'left':'-'+adjust }, 'fast');
        } else {
            label.css({ 'left':'-'+adjust });
        }
    }).blur(function(){
        var label = $(this).prev('label');
        var value = $(this).val();
 
        if(value == ''){
            label.stop().animate({ 'left':restingPosition }, 'fast');
        }    
 
    });
}); // End "each" statement
}); // End loaded jQuery

The HTML

<div id="comment-wrap"  class="slider">
    <label for="comment">Comment</label>
    <textarea cols="53" rows="10" id="comment"></textarea>
</div><!--/#comment-wrap-->

XML

Parsing XML
Performing XSL Transformations

Vidoes

Speed Up Your JavaScript