Split scroll view

by janetyc

HTML

<div id="container">

<div id="left">
    <div class="component">Text</div>
    <div class="component">Image</div>
    <div class="component">Video</div>
    <hr/>
    <div class="component">Input</div>
    <div class="component">Button</div>
    <div class="component">Radio button</div>
    <div class="component">Check box</div>
    <hr/>
    <div class="component">List view</div>
    <div class="component">Grid view</div>
    <div class="component">Map view</div>
    <div class="component">View</div>
    
    <div class="component">Item</div>
    <hr/>    
    <div class="component">Tab bar</div>
    <div class="component">Search bar</div>
    <div class="component">Navigation bar</div>
    <hr/>
    <div class="component">Other</div>
</div>
<div id="right">
    <canvas id="canvas"></canvas>
    
</div>
</div>

CSS

#container{
    display: block;
    margin: 30px;
    
}
#left{
    display: block;
    float:left;
    margin-right: 10px;
    background: #eeeeee;
    height: 370px;
    width: 140px;
    padding: 10px;
    overflow: auto;
}
#right{
    display: block;
    float: left;
    margin-left: 10px;
}
.component {
    display:block;
    background: #cccccc;
    border: 1px #555555 solid;
    padding: 10px;
}
.component:hover{
    background: #888888;
    color: #eeeeee;
}
#canvas{
    float: left;
    background: #efefef;
    width: 200px;
    height: 390px;
}

JavaScript

$(function() {
    var canvas =document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    
 });