Progress timeline test

by totszwai

HTML

<br/>
<br/>
<br/>
<table cellpadding="0" style="width:100%;">
    <tr>
        <td></td>
        <td>
            <div class="progressBarWrapper">
                <table valign="center" class="progressBarTable">
                    <tr>
                        <td style="border:none" class="progressBarBarValue noBorder">
                            <div class="progressBarContainer24">
                                <div style="width:49%; background-color:#4576B0;" class="progressBarActual24" /></div>
                        </td>
                    </tr>
                </table>
                <div class="progressBarOverlay24" style="color:#000000;">49%</div>
            </div>
            <div class="minProgressBarWidth">
                <div/></div>
        </td>
        <td>
            <div style="border: 1px #000 solid; width:32px; height:32px;" />
        </td>
    </tr>
    <tr>
        <td class="progressTL-L">
            <div id="progressTL-L-anchor">_</div>
        </td>
        <td>
            <div class="progressBarWrapper">
                <table class="progressTLTable" valign="center" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td class="progressTL-M">
                                <div class="progressTLMiddleLine" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progressTLArrowUp" style="left:49%; border:1px solid;"></div>
                                <div class="progressTLTextBox">
                                    <table cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>30 days left</td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                ...

CSS

.progressBarTable {
    border-collapse: collapse;
    width: 100%;
}
.progressBarTable tr {
    background:inherit !important;
}
table tr td.noBorder {
    border-style: none !important;
    white-space: nowrap;
}
tr td.progressBarBarValue {
    height: 12px !important;
    width: 100%;
    padding-right:5px!important;
}
tr td span.progressBarPercentValue {
    width:30px;
    display:block;
    text-align:right;
}
tr td span.progressBarTextValue {
    display:block;
    text-align:right;
}
/* container of the actual bar, draws the border to 100% */
 .progressBarContainer {
    width: 100%;
    height:12px;
    border-style:solid;
    border-width:1px;
    padding: 1px 1px;
    border-color:#9FAAB7;
    background-color:#FFFFFF;
}
.progressBarContainer24 {
    width: 100%;
    height:32px;
    border-style:solid;
    border-width:1px;
    padding: 1px 1px;
    border-color:#9FAAB7;
    background-color:#FFFFFF;
}
.proficiencyBarContainer {
    width: 80px;
    height:12px;
    border-style:solid;
    border-width:1px;
    padding: 1px 1px;
    border-color:#9FAAB7;
    background-color:#FFFFFF;
}
/* color section of the filled percentage , this sit inside progressBarContainer */
 .progressBarActual {
    height:12px;
}
.progressBarActual24 {
    height:32px;
}
/* use it for overlaying percentage value in the middle of the bar */
 .progressBarOverlay {
    position:absolute;
    top:3px;
    left:40%;
    font-size: 8pt;
}
.progressBarOverlay24 {
    position:absolute;
    top:6px;
    left:40%;
    font-size: 14px;
}
.progressBarOverlayLeft {
    position:absolute;
    top:0px;
    left:0px;
}
.progressBarOverlayRight {
    position:absolute;
    top:0px;
    right:0px;
}
.progressBarWrapper {
    position:relative;
}
/* other class to control the behavior of the progress bar etc */
 .minProgressBarWidth {
    width: 120px;
}
.minProgressBarWithTextWidth {
    width: 200px;
}
.minProgressBarChartWidth {
    width: 90px;
}

.progressTLTable {
    border-collapse:...

JavaScript

$(document).ready(function () {
        progressTimelineValidate();
        $(window).bind("resize", progressTimelineValidate);
    });


    function progressTimelineValidate() {
        allTimeline = $('.progressTLTable');
        for (i = 0; i < allTimeline.length; i++) {

            var tl = $(allTimeline[i]);
            var indicator = tl.children().find('div.progressTLArrowUp');
            var box = tl.children().find('div.progressTLTextBox');

            var boxWidth;
            var indicatorPos;
            // earlier IE don't support this feature
            if (!$.support.cssFloat) { // we are in IE
                boxWidth = box[0].clientWidth;
                indicatorPos = indicator[0].style.pixelLeft;
            } else {
                boxWidth = box.width();
                indicatorPos = parseInt(indicator.css('left').replace(/[px]/g, ''));
            }
            var anchorRightPos = parseInt($("div#progressTL-R-anchor").position().left);
            var upperBound = anchorRightPos - boxWidth * 2;

            /*
            console.log('   indicator:' + indicatorPos);
            console.log('right anchor:' + anchorRightPos);
            console.log(' upper bound:' + upperBound);
            */

            // workaround for the position:relative, once you set it to relative,
            // the left property becomes the position of where the element is at
            var inlinestyle = {};
            $.each(indicator.attr('style').split(';'), function () {
                namevalue = this.split(':');
                inlinestyle[namevalue[0].toLowerCase()] = namevalue[1];
            }); // end workaround

            // retrive the percentage value
            var p = parseInt(inlinestyle.left.replace(/[%]/g, ''));

            if (p > 50) {
                if (indicatorPos > upperBound) {
                    box.css('left', '');
                    box.css('float', 'right');
                    box.css('right', 0);
                }...