Drag-through checkboxes (libless)





3
Date Submitted Wed. May. 6th, 2009 3:40 PM
Revision 1 of 1
Scripter Fordiman
Tags checkbox | drag | JavaScript | libless
Comments 0 comments
Essentially, lets your users click a whole line of checkboxes by clicking the first and dragging down the line.

This is a crop-in script. That is to say, include it on your page, and you need do nothing else. Even primitive event handlers (element.onchange, for example) are supported, with no action on your part.

A demo of it in action is on my hosting:
http://fordi.org/test/checks.php

This is the libless version; that is to say, it is independent of and doesn't interfere with any Javascript libraries, such as jQuery, Prototype, MooTools, etc.
(function () {
        //Minimalist cross-browser support
        if (window.addEventListener) {
                function observe(o,e,f) {
                        return o.addEventListener(e,function (e) {
                                return f.apply(e.target, [e]);
                        },false);
                }
                function triggerChange(o) {
                        var evt = document.createEvent('HTMLEvents');
                        evt.initEvent('change',false,true);
                        o.dispatchEvent(evt);
                }
                function attr(o,n) { return o.getAttribute(n); }
        } else if (window.attachEvent) {
                function observe(o,e,f) {
                        return o.attachEvent('on'+e,function () {
                                var e = window.event;
                                e.originalTarget = e.srcElement;
                                return f.apply(e.target, [e]);
                        });
                }
                function triggerChange(o) {
                        o.fireEvent('onchange');
                }
        } else {
                return;
        }
       
        //Actual program starts here
        var
                name=null,
                value=null,
                current=null,
                orig=null,
                to=null;       
        function md(e) {
                to = setTimeout(function () {
                        mh(e);
                }, 50);
                if (e.originalTarget.name=='') return;
                orig = e.originalTarget;
                name = orig.name;
                var radio = orig.type.toLowerCase() == 'radio';  
                if (radio)
                        value = true;
                else           
                        value = !this.checked;
                this.checked = value;      
        }
        function mh(e) {
                if (name===null) return;
                to=null;
                var _$ = e.originalTarget;
                if (_$.name!==name) return;
                if (current!==this) {      
                        current = this;
                        _$.checked = value;
                        triggerChange(_$);
                        _$.focus();
                }              
        }
        function ml() {
                if (name===null) return;                       
                        current = null;
        }
        function up(e) {
                if (to!==null) {
                        clearTimeout(to);
                        to=null;
                }
                if (name===null) return;               
                name = null;
                if (e.originalTarget===orig) {
                        var radio = orig.type.toLowerCase() == 'radio';
                        if (radio)
                                orig.checked = true;
                        else
                                orig.checked = !value;
                }
                name=null;
                value=null;
                current=null;
                orig=null;
                to=null;       
               
        }
        observe(window,'load',function () {
                observe(document.body, 'mouseup', up);
                var checks = document.body.getElementsByTagName('input');
                for (var i=0; i<checks.length; i++)
                        if (/^(?:radio|checkbox)$/i.test(checks[i].type) && checks[i].name!=='') {
                                observe(checks[i], 'mousedown', md);
                                observe(checks[i], 'mouseover', mh);
                                observe(checks[i], 'mouseout', ml);
                        }
        });
})();

Bryan Elliott

www.codemonkeybryan.com

Comments

There are currently no comments for this snippet.

Voting

Votes Down