Long text visualization on table headers

Question

I'm trying to make some html with css pages (I'm new to both) and I want to add styles to a table header with column long names, this names are required to be long, but the column width is fixed, making these columns without css would show them with text wrapping so the row height would show just NOT nice. I'm trying to find a nice way to display the table. What comes to my mind, is "cut" the name of the column veryLongColumName to veryLong... and on hover of the table header, display it as they are originally, how can I do this? do I need to begin learning JavaScript >> jQuery in order to do this? Any sample code I can use?

If you have a better idea about how to display nicely that content it is welcome.

I have no idea how to do this as it seems that there need to be data manipulation (so I need JavaScript or jQuery); how ever, I think that having two div tags with the shortened name and the original name in another and display one or other depending on the mouse hover will do the work but I don't know how to make that happen (is this also jQuery?).

Thanks in advance.

http://jsfiddle.net/byakku/Q5V98/1/

Answer 1

I tried to implement it in plain javascript without any lib/plugin and below is what I have,

Solution using plain javascript (without jQuery) DEMO

The above demo code can be reduced a lot by using jQuery,

Solution using jQuery - DEMO

Using jQuery:

function shortHandTableHeaders(tableID, limit) {

    var ths = $('#' + tableID + ' thead tr th');        
    var content;

    ths.each (function () {
        var $this = $(this);
        content = $this.text();

        if (content.length > limit) {
           $this.data('longheader', content);
           $this.text (shortHandHeaderTxt(content, limit));

           $this.hover (
               function() {
                   $(this).text($this.data('longheader'));
               },
               function () {
                   $(this).text(shortHandHeaderTxt($this.data('longheader'), limit));
               }
           );
         }
    });
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}

Below is the another implementation without jQuery,

function shortHandTableHeaders(tableID, limit) {

    var tableEl = document.getElementById(tableID);
    var thead = tableEl.getElementsByTagName("thead");
    var thtrs = thead[0].getElementsByTagName("tr");
    var ths, content;

    for (var i = 0; i < thtrs.length; i++) {
        ths = thtrs[i].getElementsByTagName("th");

        for (var j = 0; j < ths.length; j++) {
            content = ths[j].innerHTML;

            if (content.length > limit) {
                ths[j].title = content;
                ths[j].innerHTML = shortHandHeaderTxt(content, limit);
                addEventHandler(ths[j], 'mouseover', function() {
                    this.innerHTML = this.title;
                });

                addEventHandler(ths[j], 'mouseout', function() {
                    this.innerHTML = shortHandHeaderTxt(this.title, limit);

                });
            }
        }
    }
}


function addEventHandler(el, eType, handler) {
    if (el.addEventListener) { // W3C, FF  
        el.addEventListener(eType, handler, false);
    } else if (el.attachEvent) { // IE  
        el.attachEvent('on' + eType, function() {
            handler.call(el);
        });
    }
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}