Text Overflow Ellipsis Scroll

Scrolling overflowed text on mouseover.

by kthornbloom

HTML

<div class="styles el-scroll">abcdefghijklmnopqrstuvwxyz now i know my abc's, next time won't you sing with me? abcdefghijklmnopqrstuvwxyz now i know my abc's, next time won't you sing with me?</div>
<div class="styles el-scroll">abcdefghijklmnopqrstuvwxyz now i know my abc's, next time won't you sing with me?</div>
<div class="styles el-scroll">abcdefghijklmnopqrstuvwxyz now i know my abc's.</div>
<div class="styles el-scroll">short</div>

CSS

body {
    padding:30px;
}
.styles {
    max-width:200px;
    box-sizing:border-box;
    background:#eee;
    border-radius:4px;
    padding:10px;
    margin:0 0 10px 0;
}
.el-scroll {
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}
.el-scroll-stage {
    overflow:hidden;
}
.el-scroll span {
    position:relative;
    left:0;
    top:0;
}
.el-scroll-ellipsis {
    position:absolute;
    right:5px;
    bottom:10px;
}

JavaScript

$('.el-scroll').each(function () {
    $(this).wrapInner('<span></span>').wrapInner('<div class="el-scroll-stage"></div>');
    var contentWidth = $('span', this).width(),
        maxWidth = $(this).width();
    if (contentWidth > maxWidth) {
        $(this).append('<div class="el-scroll-ellipsis">...</div>');
        $(this).css('padding-right', '20px');
    }
});

$('.el-scroll-stage').mouseover(function () {
    var contentWidth = $('span', this).width(),
        maxWidth = $(this).width(),
        difference = contentWidth - maxWidth,
        posLeft = parseInt($('span', this).css('left'), 10) * -1,
        that = this
    if (contentWidth > maxWidth && posLeft == "-0") {
        $('span', this).stop().animate({
            'left': (contentWidth - maxWidth) * -1 + 'px'
        }, (difference * 1000) / 100, "linear", function() {
            $('.el-scroll-ellipsis',that).css('opacity','0');
        });
    } else {
        $('span', this).stop().animate({
            'left': (contentWidth - maxWidth) * -1 + 'px'
        }, ((difference - posLeft) * 1000) / 100);
    }

}).mouseout(function () {
    $('span', this).stop().animate({
        'left': '0px'
    }, 1000, function(){
        $('.el-scroll-ellipsis',that).css('opacity','0');
    });
    
});