List CSS Testing

by Will Stott

HTML

<script src="https://dl.dropbox.com/u/4366411/Sites/oEmbed/jquery.oembed.min.js"></script>
<script src="http://will-s.nn.pe/tools/excanvas.compiled.js"></script>
<div class="listcont">
    <div class="list header">
        <div class="eqspan"><canvas height="24" width="420" class="eq"></canvas></div>
        <div class="title">Staggering On Rooftops EP </div>
    </div>
    <div class="list item"> <div class="item-bg"> Roads </div></div>
    <div class="list item"> You'll Be </div>
    <div class="list item"> We're in the Dark </div>
    <div class="list item"> Black and Blue </div>
    <div class="list item"> Masqeurade </div>
</div>

CSS

body {
    font-family:sans-serif;
}

a {
    color: black;
    text-decoration:none;
}

.list {
    font-size:13px;
    margin-top: -1px;
    margin-left: 10px;
    padding-left: 10px;
    border-style:solid;
    border-width:1px;
    border-color:#666666;
    
    background-image: -ms-linear-gradient(top, #E8E8E8 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(top, #E8E8E8 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, #E8E8E8 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E8E8E8), color-stop(1, #FFFFFF));
    background-image: -webkit-linear-gradient(top, #E8E8E8 0%, #FFFFFF 100%);
    background-image: linear-gradient(to bottom, #E8E8E8 0%, #FFFFFF 100%);
    
}

.item {
   padding-top:4px;
   width: 400px;
   height: 20px;
}

.header {
   width: 410px;
   height: 24px;
    font-size:14px;
    font-weight:bold;
    margin-top: 10px;
    margin-left: 5px;
    border-bottom-width:2px;
}

.item:hover {
    background-image: -ms-linear-gradient(top, #E8E8E8 20%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(top, #E8E8E8 20%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, #E8E8E8 20%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.2, #E8E8E8), color-stop(1, #FFFFFF));
    background-image: -webkit-linear-gradient(top, #E8E8E8 20%, #FFFFFF 100%);
    background-image: linear-gradient(to bottom, #E8E8E8 20%, #FFFFFF 100%);
    
    border-right-width:2px;
    border-left-width:2px;
    width:399px;
    padding-left:9px;
}

.eq {
    float:right;
    /*background-color: rgba(0,0,255,0.5);*/
}

.eqspan {
    float:right;
    width:2px;
    height:100%;
    /*background-color:red;*/
}

.title {
    float:left;
    margin-top:4px;
}

JavaScript

var eqCanvas, eqCTX;

$('.item').mousedown(function(e){
    //Find the canvas element relative to the list item clicked.
    eqCanvas = $(this).context.parentElement.children[0].children[0].children[0];
    //Reset the last canvas to have been initialized.
    console.log(eqCTX);
    if (eqCTX!=undefined) {console.log(true);eqCTX.clearRect(0,0,420,24);}
    //Get the context of the new canvas
    eqCTX = eqCanvas.getContext("2d");
    //Write the song name on the canvas (testing)
    eqCTX.fillStyle = "blue";
    eqCTX.font = "bold 16px Arial";
    eqCTX.fillText($(this).context.innerText, 0, 10);
});