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);

    $(document).ready(function() {
        $('#selectall').click(function() {
        	$(":checkbox", $('#checkboxlist')).attr('checked', $(this).is(':checked'));
        });
    });

And with that, on and off go the other checkboxes.

Marvelous!

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'
    });
});

What I needed to do was have a list of items. Each item would have a different type, colours, range and so on. When I selected an item from a select list I wanted the other optional lists to update. Now, I’ve seen this done with Ajax to completely rebuild the html of the select lists, but I didn’t want to go down that route. Instead, I decided to use a bit of PHP and a bit of Javascript.

First of all I had to decide how I wanted to store my items. I could have gone down the headache of a database, but I wanted to keep this simple. So in steps the always-simply ini file. Zend Framework makes it really easy to parse this particular format, which is great news!

The ini file looks something like:

[_default]

name   = "_default"
type   = ""
range  = "home; garden; garage; kitchen"
colour = "white; silver; black; red; blue; yellow; green"

[fridge : _default]

name   = "Fridges and freezers"
type   = "double; chest; mini"

[fork : _default]

name   = "Forks"
type   = "big; small"
range  = "kitchen; garden"
colour = "silver; black"

[trash : _default]

name   = "Trash cans"

As you can see, I extend one base item type, changing only what I need to.

Now I have my ini file, I need to convert that to Json. The easiest way to do this is simply to load the whole ini file into a nicely formatted array and convert that array to the Json format. The PHP to do that is actually quite simple, and looks something like this:

<?php

require 'Zend/Config/Ini.php';
require 'Zend/Json.php';

$config = new Zend_Config_Ini(dirname(__FILE__) . '/items.ini', null);

$items = array();
foreach ($config as $key => $val) {
    if ($key{0} != '_') {
        foreach ($val as $k => $v) {
            $items[$key][$k] = (strstr($v, ';')) ? array_map('trim', explode(';', $v)) : $v;
        }
    }
}
$json = Zend_Json::encode($items);

Again, the Zend Framework comes to the rescue and does all the hard work for me. All I have to do is process the ini file, making arrays out of lists (the strings separated with semi-colons) and ignoring anything that starts with an underscore.

That file ends up giving me a Json string and a PHP array, both of which can be used in the form. In this HTML I have quickly put in the select lists, but I’m sure you could do something programmatically, or in a template, or something… this is just for show, after all.

<?php include('json.php'); ?>
<html>
<head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
        var items = '<?php echo $json; ?>'.evalJSON(true);
        var optlist = ['type', 'range', 'colour'];

        Event.observe(window, 'load', function() {
            Event.observe('item', 'change', function() {
                var itype = $F('item');
                optlist.each(function(o) {
                    $(o).options.length = 1;
                    if (itype) {
                        if (items[itype][o].length > 0) {
                            for (i = 0; i < items[itype][o].length; i++) {
                                $(o).options[$(o).options.length] = new Option(items[itype][o][i]);
                            }
                            $(o).enable();
                        } else {
                            $(o).disable();
                        }
                    } else {
                        $(o).disable();
                    }
                });
            });
        });

    </script>
</head>
<body>

<form action="" method="post">

Item<br />
<select name="item" id="item">
<option value="">Select an item</option>
<?php

    foreach ($items as $type => $details) {
        echo '<option value="', $type, '">', $details['name'], "</option>\n";
    }

?>
</select><br />

Type<br />
<select name="type" id="type" disabled="disabled">
    <option value="">Please select</option>
</select><br />

Range<br />
<select name="range" id="range" disabled="disabled">
    <option value="">Please select</option>
</select><br />

Colour<br />
<select name="colour" id="colour" disabled="disabled">
    <option value="">Please select</option>
</select><br />

<p><input type="submit" /></p>

</form>

</body>
</html>

The main part of that is, of course, the javascript. Using Prototype I’m easily able to convert the Json string from the PHP file back in to an object, and then set an event observer on the items select list to register a change in value. All that’s left to do is loop over the other form elements (which, to make things easy, I hard-coded in to the optlist variable, but again, this could be dynamic) and set the correct values, enabling or disabling the form elements where needed.

The above code can be found running at:

http://dev.amnuts.com/chained/

I decided to integrate the code directly in to Prototype, also dropping the following in to ‘observe’ and ’stopObserving’:

if (name == 'mousewheel' &&
    (element.addEventListener))
    name = 'DOMMouseScroll';

Then using the same XHTML as before, which was:

<div id="slider">
    <div id="slider-bar">
        <div id="slider-handle"><p id="percent"></p></div>
    </div>
</div>

all you have to do is drop an event on the div#slider for the mouse wheel. That little bit of javscript looks like:

Event.observe('slider', 'mousewheel', function(e) {
    slide.setValueBy((Event.wheel(e)/10));
});

Now when you scroll the mouse wheel the slider will change by a value of 10. This value comes from the ‘Event.wheel(e) / 10′ part. The mouse wheel method returns either 1 or -1, and the slider goes from 0 to 1. Obviously, if you want the mouse wheel to move the slider by only a value or 1, then divide the delta by 100; ‘Event.wheel(e) / 100′.

As before, you can see it in action at http://dev.amnuts.com/slider/.

I hadn’t seen anything like this around (not saying it hasn’t been done, just that I hadn’t seen it!), so after a bit of playing I found out it was actually very easy to create. And this is how I did it…

All it really does is use a handy little trick with transparent PNG images and background-image positions. You can find details of what I mean in this handy article by Dave Stone, over at Bare Naked App.

So basically I have my slider gripper (or handle), which has a transparent background:

And the slider track, which has an opaque white background but is transparent where I want the colour to show through (thumbnail shown, but links through to full size image):

And then I have the background image, which is essentially double the size of the track and has one half in off-white and one in green (thumbnail shown, but links through to full size image):

The XHTML used for the slider looks like this:

<div id="slider">
    <div id="slider-bar">
        <div id="slider-handle"><p id="percent"></p></div>
    </div>
</div>

The CSS looks like this:

#slider, #slider-bar, #slider-handle {
    border: 0;
    padding: 0;
    margin: 0;
}
#slider {
    width: 300px;
    height:42px;
    background: url(img/bg.gif) no-repeat -300px;
    margin-left: 42px;
}
#slider-bar {
    width:300px;
    height:42px;
    background: url(img/track.png) no-repeat;
}
#slider-handle {
    width:42px;
    height:42px;
    cursor:move;
    background: url(img/gripper.png) no-repeat;
}
#percent {
    font-size: 75%;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    padding-top: 1.1em;
}

And finally, the Javascript looks like this:

<script type="text/javascript">
// <![CDATA[
var hWidth, bWidth;

function setBgPos(v) {
    var off = v * hWidth;
    var pos = -bWidth + (v * bWidth);
    $('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
}

function setSlideOutput(v) {
    $('percent').innerHTML = Math.round(v * 100) + '%';
}

Event.observe(window, 'load', function() {
    hWidth = $('slider-handle').getWidth();
    bWidth = $('slider-bar').getWidth();
    var slide = new Control.Slider('slider-handle', 'slider-bar', {
        sliderValue: 0.25,
        onSlide:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
            },
        onChange:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
            }
    });
    setBgPos(slide.value);
    setSlideOutput(slide.value);
});
// ]]>
</script>

You may notice the offset value, off. I’m using this because in my experiment the slider handle doesn’t fully cover the bar (nor did I want it to), so I cannot have the background image colour go fully across the track. I had to incrementally offset it depending on the position and size of the handle.

And that’s it! Pretty darned easy, but looks really neat. You can see it in action at http://dev.amnuts.com/slider/.

This javascript will do that and you don’t even need any additional libraries!

It works by having an extra property in the html tags called ’show’. This will tell the javascript what image you want to show when the link is clicked on. You also have an image with the id ’swap’ so that the javascript knows what is the image to be replaced.

The javascript looks like this:

<script type="text/javascript">
   simg = {
       init: function() {
           if (document.getElementById) {
               allAnchors = document.getElementsByTagName('a');
               if (allAnchors.length) {
                   for (var i = 0; i < allAnchors.length; i++) {
                       if (allAnchors[i].getAttributeNode('show') && allAnchors[i].getAttributeNode('show').value != '') {
                           allAnchors[i].onclick = simg.showImage;
                       }
                   }
               }
           }
       },
       showImage: function() {
           var mainImage = document.getElementById('swap');
           mainImage.src = this.getAttributeNode('show').value;
           return false;
       },
       addEvent: function(element, eventType, doFunction, useCapture) {
           if (element.addEventListener) {
               element.addEventListener(eventType, doFunction, useCapture);
               return true;
           } else if (element.attachEvent) {
               var r = element.attachEvent('on' + eventType, doFunction);
               return r;
           } else {
               element['on' + eventType] = doFunction;
           }
       }
   }
   simg.addEvent(window, 'load', simg.init, false);
</script>

What you’ll want to do is set your links to whatever page or script you would normally use if you didn’t have javascript image swapping. That way if people don’t have javascript or an old browser then they will still get a functioning site.

Some example HTML:

<html>
<head>
    <script type="text/javascript" src="swap.js"></script>
</head>
<body>

<img src="default.jpg" id="swap" style="margin-bottom:2em;" />
<a href="index.php?file=img1.jpg" show="img1.jpg"><img src="img1_thumb.jpg" />
<a href="index.php?file=img2.jpg" show="img2.jpg"><img src="img2_thumb.jpg" />
<a href="index.php?file=img2.jpg" show="img3.jpg"><img src="img3_thumb.jpg" />

</body>
</html>

Nice a clean, but with image swapping and no additional libraries! Nice.