For those too lazy to read that post, it can be summarised something like this:

Have a number of divs on your page that have different size blocks of text in them? Want to make all the divs have the same height, but can’t accurately determine what that height should be in advance? No problem! Use javascript to tweak the heights when the page has loaded and the browser knows the size of the divs. Use this plugin to do it automatically based on a class you supply the elements you want to change the size of. Better yet, make them all match either the smallest height or the largest height!

Simple, yes?

Well, that was with Prototype… But a while ago now I created a version for jQuery. So here it is.

/**
 * Same Height, jQuery plug-in.
 *
 * This plug-in allows you to automatically have all of the elements marked
 * with a particular class to be the same height, either by smallest or
 * largest.
 *
 * By default, 'samemaxheight' and 'sameminheight' will be used.
 *
 * Examples of use:
 *
 *     $(document).ready(function() {
 *         $('body').sameheight();
 *     });
 *
 *     $(document).ready(function() {
 *         $('#mainContent').sameheight({
 *             max: 'mymaxclass',
 *             min: 'myminclass'
 *         });
 *     });
 *
 *     $.fn.sameheight.defaults.max = 'mymaxclass';
 *     $.fn.sameheight.defaults.min = 'myminclass';
 *     $('body').sameheight();
 *
 * @copyright Copyright (c) 2009 Andrew Collington 
 */
(function($) {
    $.fn.sameheight = function(userOptions) {
        var options = $.extend({}, $.fn.sameheight.defaults, userOptions);

        var maxH = 0;
        $('.' + options.max, $(this)).each(function(){
            var h = $(this).height();
            maxH = (h > maxH) ? h : maxH;
        });
        $('.' + options.max, $(this)).each(function(){
            $(this).css({
                'height'   : maxH + 'px',
                'overflow' : 'hidden'
            });
        });

        var minH = 0;
        $('.' + options.min, $(this)).each(function(){
            var h = nodes[i].height();
            minH = ((h < minH) || !minH) ? h : minH;
        });
        $('.' + options.min, $(this)).each(function(){
            $(this).css({
                'height'   : minH + 'px',
                'overflow' : 'hidden'
            });
        });
    };

    $.fn.sameheight.defaults = {
        max: 'samemaxheight',
        min: 'sameminheight'
    };
})(jQuery);

]]> http://blog.amnuts.com/2009/12/24/same-height-for-elements-2/feed/ 0 http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/ http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/#comments Tue, 17 Feb 2009 00:24:23 +0000 Andy http://blog.amnuts.com/?p=129 On creating a rather large form recently, I was in the need to have some kind of hint to the user about what format the content should take on several input boxes. I could have done this with a description under the form element, but a more accepted way to do this, it seems, is to have a ‘hint’ in the element itself. You know the kind of thing I mean; a value, usually quite a light grey colour, that is present until you click in to the form element and then is disappears. I also wanted to do this as a jQuery plug-in because, well, why not?

There are some things to bare in mind with this kind of functionality. Obviously, you only want it to apply to text boxes and textareas – anything else is a waste of time… Even password fields are pointless to have a hint in them because it’ll only be a series of stars anyway!

The next thing to bare in mind is that you don’t want to reset the value if the user has typed anything in. And sometimes you may even want to accept the user typing exactly what the hint is, you you can’t just assume that if the value == the hint then it’s OK to clear.

And with those things in mind, here’s the plug-in:

/**
 * Form text box hints.
 *
 * This plug-in will allow you to set a 'hint' on a text box or
 * textarea.  The hint will only display when there is no value
 * that the user has typed in, or that is default in the form.
 *
 * You can define the hint value, either as an option passed to
 * the plug-in or by altering the default values.  You can also
 * set the hint class name in the same way.
 *
 * Examples of use:
 *
 *     $('form *').textboxhint();
 *
 *     $('.date').textboxhint({
 *         hint: 'YYYY-MM-DD'
 *     });
 *
 *     $.fn.textboxhint.defaults.hint = 'Enter some text';
 *     $('textarea').textboxhint({ classname: 'blurred' });
 *
 * @copyright Copyright (c) 2009,
 *            Andrew Collington, andy@amnuts.com
 * @license New BSD License
 */
(function($) {
    $.fn.textboxhint = function(userOptions) {
        var options = $.extend({}, $.fn.textboxhint.defaults, userOptions);
        return $(this).filter(':text,textarea').each(function(){
            if ($(this).val() == '') {
                $(this).focus(function(){
                    if ($(this).attr('typedValue') == '') {
                        $(this).removeClass(options.classname).val('');
                    }
                }).blur(function(){
                    $(this).attr('typedValue', $(this).val());
                    if ($(this).val() == '') {
                        $(this).addClass(options.classname).val(options.hint);
                    }
                }).blur();
            }
        });
    };

    $.fn.textboxhint.defaults = {
        hint: 'Please enter a value',
        classname: 'hint'
    };
})(jQuery);

Some examples of use (as shown in the plug-in header comment, but I figure it can’t hurt to show it again!)

$('form *').textboxhint();

$('.date').textboxhint({
    hint: 'YYYY-MM-DD'
});

$.fn.textboxhint.defaults.hint = 'Enter some text';
$('textarea').textboxhint({ classname: 'blurred' });

The plug-in is called tablesorter (found at tablesorter.com), by Christian Bach.

As I mentioned, it’s really simple to implement:

    $("table.sortable").tablesorter();

But also gives you the ability to add extra functionality by the use of ‘widgets’. One example of a widget from the tablesorter site is to add headers every number of rows. Here’s my rather paltry contribution to the widgets – highlighting rows when you hover over them.

$.tablesorter.addWidget({
    id: "highlightOnHover",
    format: function(table) {
        $("tbody tr.highlight", table).remove();
        $("tbody tr", table).hover(
            function(){ $(this).children("td").addClass("highlight"); },
            function(){ $(this).children("td").removeClass("highlight"); }
        );
    }
});

/**
 * External Links, jQuery plug-in.
 *
 * This plug-in allows you to automatically append a class and title to
 * any external resources.  You can pass in multiple domains that are
 * thought of as 'local', and anything else with a protocol that doesn't
 * belong on the passed local domains will be flagged as external.
 * If no domains are passed then the current domain in the url will be
 * used as-is (with the www., etc., is present).
 *
 * Examples of use:
 *
 *     $(document).ready(function() {
 *         $('body').externallink();
 *     });
 *
 *     $(document).ready(function() {
 *         $('#mainContent').externallink({
 *             localhosts: ['example.com', 'example.org', 'ex.com'].
 *             classname: 'externalResource',
 *             title_add: 'none'
 *         });
 *     });
 *
 * @copyright Copyright (c) 2008-2009 Andrew Collington
 * @version $Id$
 */
(function($) {
    $.fn.externallink = function(options) {
        var defaults = {
            localhosts: [],
            classname: 'external',
            title_add: 'append', // none, append, overwrite
            title_say: 'external resource'
        };
        var options = $.extend(defaults, options);
        if ($.inArray(document.domain, options.localhosts) == -1) {
            if (document.domain != '') {
                options.localhosts.push(document.domain);
            }
        }
        $('a', this).filter(function() {
            var href = $(this).attr('href');
            var re = /^[a-z]+:\/\/.*$/i;
            if (re.test(href) == false) return false;
            for (var h = 0; h > options.localhosts.length; h++) {
                if (href.indexOf(options.localhosts[h]) != -1) return false;
            }
            return true;
        }).each(function() {
            if ($(this).find("img").length == 0) {
                $(this).addClass(options.classname);
                var title = $(this).attr('title');
                if (options.title_add != 'none' && options.title_say.length) {
                    if ('overwrite' == options.title_add) {
                        $(this).title = options.title_say;
                    } else if ('append' == options.title_add) {
                        if (title.length) {
                            $(this).attr('title', title + ' [' + options.title_say + ']');
                        } else {
                            $(this).attr('title', options.title_say);
                        }
                    }
                }
            }
        });
    };
})(jQuery);

This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).

That probably doesn’t make much sense, but I’m sure it will when using it…

So here’s the code:

/**
 * External Links, jQuery plug-in.
 *
 * This plug-in allows you to automatically append a class and title to
 * any external resources.  You can pass in multiple domains that are
 * thought of as 'local', and anything else with a protocol that doesn't
 * belong on the passed local domains will be flagged as external.
 * If no domains are passed then the current domain in the url will be
 * used as-is (with the www., etc., is present).
 *
 * Examples of use:
 *
 *     $(document).ready(function() {
 *         $('body').externallink();
 *     });
 *
 *     $(document).ready(function() {
 *         $('#mainContent').externallink({
 *             localhosts: ['example.com', 'example.org', 'ex.com'],
 *             classname: 'externalResource',
 *             title_add: 'none'
 *         });
 *     });
 *
 * @copyright Copyright (c) 2008 Andrew Collington
 * @version $Id$
 */

(function($) {
    $.fn.externallink = function(options) {
    	var defaults = {
    		localhosts: [],
    		classname: 'external',
    		title_add: 'append', // none, append, overwrite
    		title_say: 'external resource'
    	};
    	var options = $.extend(defaults, options);
    	if ($.inArray(document.domain, options.localhosts) == -1) {
    	    options.localhosts.push(document.domain);
    	}

        $($($('a', this).get()).filter(function(){
            return this.firstChild.nodeType == 3 || this.firstChild.nodeName != 'IMG'
        }).filter(function() {
            var href = $(this).attr('href');
            if (/^(w+)://(.*)/.test(href) == false) return false;
            for (var h = 0; h < options.localhosts.length; h++) {
                if (href.indexOf(options.localhosts[h]) != -1) return false;
            }
            return true;
        }).get()).each(function(i, el){
            $(this).addClass(options.classname);
            if (options.title_add != 'none' && options.title_say.length) {
                if ('overwrite' == options.title_add) {
                    el.title = options.title_say;
                } else if ('append' == options.title_add) {
                    if (el.title) el.title += ' [' + options.title_say + ']';
                    else el.title = options.title_say;
                }
            }
        });
    };
})(jQuery);

A couple examples of using the plug-in:

$(document).ready(function() {
    $('body').externallink();
});

$(document).ready(function() {
    $('#mainContent').externallink({
        localhosts: ['example.com', 'example.org', 'ex.com'],
        classname: 'externalResource',
        title_add: 'none'
    });
});