Fillerama Menubar Item

UI interaction concept for grabbing filler text.

by cvalleskey

HTML

<div id="bar"><b></b></div>
<span id="lbl">--</span>

CSS

body {
    background: #333 url(http://cl.ly/Ged4/fillerama-menubar-bg.png) no-repeat;
    padding: 0;
    margin: 0;
}

#bar {
    position: absolute;
    width: 250px;
    height: 26px;
    left: 97px;
    top: 42px;
    cursor: pointer;
}
#bar b {
     background: url(http://cl.ly/Geju/fillerama-menubar-active.png) no-repeat;
    display: block;
    height: 26px;
    width: 0;
}
#lbl {
    font: 12px/20px Lucida Grande, sans-serif;
    position: absolute;
    left: 97px;
    top: 83px;
    display: block;
}

JavaScript

$("#bar").mousemove(function(e) {
    console.log(e);
    var _x = e.offsetX;
    
    if(_x > 0 && _x < 11) {
        $("#bar b").width(11);
        $("#lbl").text("1 word");
    } else if(_x >= 11 && _x < 21) {
        $("#bar b").width(21);
        $("#lbl").text("2 words");
    } else if(_x >= 21 && _x < 31) {
        $("#bar b").width(31);
        $("#lbl").text("3 words");
    } else if(_x >= 31 && _x < 41) {
        $("#bar b").width(41);
        $("#lbl").text("4 words");
    } else if(_x >= 41 && _x < 52) {
        $("#bar b").width(51);
        $("#lbl").text("5 words");
    } else if(_x >= 52 && _x < 67) {
        $("#bar b").width(67);
        $("#lbl").text("1 sentence");
    } else if(_x >= 67 && _x < 82) {
        $("#bar b").width(82);
        $("#lbl").text("2 sentences");
    } else if(_x >= 82 && _x < 97) {
        $("#bar b").width(97);
        $("#lbl").text("3 sentences");
    } else if(_x >= 97 && _x < 112) {
        $("#bar b").width(112);
        $("#lbl").text("4 sentences");
    } else if(_x >= 112 && _x < 128) {
        $("#bar b").width(128);
        $("#lbl").text("5 sentences");
    } else if(_x >= 128 && _x < 148) {
        $("#bar b").width(148);
        $("#lbl").text("1 paragraph");
    } else if(_x >= 148 && _x < 168) {
        $("#bar b").width(168);
        $("#lbl").text("2 paragraphs");
    } else if(_x >= 168 && _x < 188) {
        $("#bar b").width(188);
        $("#lbl").text("3 paragraphs");
    } else if(_x >= 188 && _x < 208) {
        $("#bar b").width(208);
        $("#lbl").text("4 paragraphs");
    } else if(_x >= 208 && _x < 230) {
        $("#bar b").width(228);
        $("#lbl").text("5 paragraphs");
    } else if(_x >= 230 && _x <= 250) {
        $("#bar b").width(250);
        $("#lbl").text("Kitchen sink");
    }
});
            
$("#bar").mouseout(function(e) {
    $("#bar b").width(0);
    $("#lbl").text("--");
});