Monday, March 8, 2010

Check class

In case if you have to use pure Javascript:
    var hasClass = function(element,className) {
        return (function() {
            var classes = element.className.split(' ');
            for(var i in classes) {
                if(classes[i] == className) {
                    return true;
                }
            }
            return false;
        })();
    }

Tuesday, March 2, 2010

CSS attribute selectors


[rel=value] — attribute equals to value

<h1 rel="value">Attribute Equals</h1>

h1[rel=value] { color: red; }

[rel*=value] — attribute contains value anywhere

<h1 rel="xxxvaluexxx">Attribute Contains</h1>

h1[rel*=value] { color: red; }

[rel^=value] — attribute starts with value

<h1 rel="value-link yep">Attribute Begins</h1>

h1[rel^=value] { color: red; }

[rel$=value] — attribute ends with value

<h1 rel="friend value">Attribute Ends</h1>

h1[rel$=value] { color: red; }

[rel~=value] — attribute contains value in space-delimited list

<h1 rel="friend value sandwich">Attribute Space Separated</h1>

h1[rel~=value] { color: red; }

[rel|=value] — attribute contains value in dash-delimited list

<h1 rel="friend-value-sandwich">Attribute Dash Separated</h1>

h1[rel|=value] { color: red; }

Table checkboxes selection

To select or unselect checkboxes in a table I use the follow code
(function() {
    // checkboxes in the table
    var cbs = document.getElementsByName('checkboxes');
    // header checkbox
    var all = document.getElementById('header_checkbox');
    all.onclick = function() {
        for(var i=0;i<cbs.length;i++) {
            cbs[i].checked = this.checked;
        }
    }
    var cbClick = function() {
        all.checked = (function() {
            for(var i=0;i<cbs.length;i++) {
                if(cbs[i].checked != true) {
                    return false;
                }
            }
            return true;
        })();
    }
    for(var i=0;i<cbs.length;i++) {
        cbs[i].addEventListener('click', cbClick, true);
    }
})();