notice when class changes

by J. Jones

HTML

<button id='foo' onclick='clearConsole();'>clear console</button>
<div id="console">console log type thing</div>
<p>
    <hr/>    
    <h1 class="notify" id='theh1' >I am a heading
   </h1>

    <input class="notify" id="na" value="Niebieski" type="button"/>

    <input class="notify" id="ba" value="Pogrubie" type="button"/>

<br/>

    <input class="notify" id="nr" value="Usuń Niebeski" type="button"/>

    <input class="notify" id="br" value="Usuń Pogrubienie" type="button"/>

CSS

input {width:100px;}

.niebieski{ color: blue;}

.pogrubienie{ font-weight: bold; }

JavaScript

// Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    };
})();

// document ready function
$(function(){
    $(".notify").bind('cssClassChanged', function(){ 
        log("class changed: " + $(this).text());
        //do stuff here
    });
});
$('#na').click(function() {
    $('h1').addClass("niebieski");
});


$('#ba').click(function() {
    $('h1').addClass("pogrubienie");
});

$('#nr').click(function() {
    $('h1').removeClass("niebieski");
});

$('#br').click(function() {
    $('h1').removeClass("pogrubienie");
});


/*   debugging stuff not involved */
function clearConsole() {
    $('#console').html(" ");
}
function log(msg) {
    var oldmsg = $('#console').html();
    var newmsg = msg + "<br>" + oldmsg;
    $('#console').html(newmsg);
}
function dump(object) {
    var output = object + "<br>";
    var keys = [];
    for (var key in object) {
        if (key.length > 0) keys.push(key);
    }
    keys.sort();
    for (var i = 0; i < keys.length; i++) {
        var property = keys[i];
        try {
            var val = object[property];
            var vals = '' + val;
            if (val !== null && val !== undefined && vals.length > 0) output += "key:" + property + ': value:' + object[property] + ';<br>';
        } catch (err) { // deprecated members will cause this
            //output += property + ': ' + err.message;
        }
    }
    return output;
}