<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row" style="background-color: #ededed; "> <div class="col-md-12"> <img src='https://s3.amazonaws.com/portfolio-eduluz1976/logo_blake.png'> <div class="pull-right"> <a class="btn btn-default btn-success fa-2x">Finish <i class="fa fa-arrow-circle-right"></i></a> </div> </div> </div> <div class="row"> <div class="col-md-3 col-applicant" style="height:650px"> <legend>Primary applicant</legend> <img src="https://s3-sa-east-1.amazonaws.com/resources-projetos/icons/avatar/businessman.png" class="img-circle" style="width:128px; height:128px; "><br> John Doe <div style="text-align: left"> <ul class="list-group"> <li class="list-group-item list-group-item-success">Lived <ul> <li class="list-group-item block-lived-germany" >Germany</li> <li class="list-group-item block-lived-england" >England</li> <li class="list-group-item block-lived-usa" >USA</li> </ul> </li> <li class="list-group-item list-group-item-info">Worked <ul> <li class="list-group-item block-worked-sap" >SAP</li> <li class="list-group-item block-worked-microsoft" >Microsoft</li> <li class="list-group-item block-worked-unemployed" >Unemployed</li> </ul> </li> <li class="list-group-item list-group-item-warning">Studied</li> <li class="list-group-item list-group-item-danger">Traveled</li> </ul> </div> </div> <div> <h3 onclick="wasShowed=false;">Timeline</h3> <div id="hours"> <div class="title" >Year</div> <div class="title" my-col="col1">Lived</div> <div class="title" my-col="col2">Worked</div> <div class="title" my-col="col3">Studied</div> <div class="title" my-col="col4">Traveled</div> <div class="title-year my-started" style="height:80px">2017</div> <div class="hour block-lived-germany" my-col="col1">Apr</div> <div class="hour block-worked-sap" my-col="col2">Apr</div> <div class="hour" my-col="col3">Apr</div> <div class="hour" my-col="col4">Apr</div> <div class="hour block-lived-germany" my-col="col1">Mar</div> <div class="hour block-worked-sap" my-col="col2">Mar</div> <div class="hour" my-col="col3">Mar</div> <div class="hour" my-col="col4">Mar</div> <div class="hour block-lived-germany" my-col="col1">Feb</div> <div class="hour block-worked-sap" my-col="col2">Feb</div> <div class="hour" my-col="col3">Feb</div> <div class="hour" my-col="col4">Feb</div> <div class="hour block-lived-germany" my-col="col1">Jan</div> <div class="hour block-worked-sap" my-col="col2">Jan</div> <div class="hour" my-col="col3">Jan</div> <div class="hour block-traveled-a1" my-col="col4">Jan</div> <div class="title-year my-started">2016</div> <div class="hour block-lived-germany" my-col="col1">Dec</div> <div class="hour block-worked-microsoft" my-col="col2">Dec</div> <div class="hour" my-col="col3">Dec</div> <div class="hour block-traveled-a1" my-col="col4">Dec</div> <div class="hour block-lived-germany" my-col="col1">Nov</div> <div class="hour block-worked-microsoft" my-col="col2">Nov</div> <div class="hour" my-col="col3">Nov</div> <div class="hour" my-col="col4">Nov</div> <div class="hour block-lived-germany" my-col="col1">Oct</div> <div class="hour block-worked-microsoft" my-col="col2">Oct</div> <div class="hour" my-col="col3">Oct</div> <div class="hour" my-col="col4">Oct</div> <div class="hour block-lived-germany" my-col="col1">Sep</div> <div class="hour block-worked-microsoft" my-col="col2">Sep</div> <div class="hour" my-col="col3">Sep</div> <div class="hour" my-col="col4">Sep</div> <div class="hour block-lived-england" my-col="col1">Aug</div> <div class="hour block-worked-microsoft" my-col="col2">Aug</div> <div class="hour" my-col="col3">Aug</div> <div class="hour" my-col="col4">Aug</div> <div class="hour block-lived-england" my-col="col1">Jul</div> <div class="hour block-worked-microsoft" my-col="col2">Jul</div> <div class="hour" my-col="col3">Jul</div> <div class="hour" my-col="col4">Jul</div> <div class="hour block-lived-england" my-col="col1">Jun</div> <div class="hour block-worked-microsoft" my-col="col2">Jun</div> <div class="hour block-studied-mba" my-col="col3">Jun</div> <div class="hour" my-col="col4">Jun</div> <div class="hour block-lived-england" my-col="col1">May</div> <div class="hour block-worked-microsoft" my-col="col2">May</div> <div class="hour block-studied-mba" my-col="col3">May</div> <div class="hour block-traveled-a2" my-col="col4">May</div> <div class="hour block-lived-england" my-col="col1">Apr</div> <div class="hour block-worked-microsoft" my-col="col2">Apr</div> <div class="hour block-studied-mba" my-col="col3">Apr</div> <div class="hour" my-col="col4">Apr</div> <div class="hour block-lived-england" my-col="col1">Mar</div> <div class="hour block-worked-microsoft" my-col="col2">Mar</div> <div class="hour block-studied-mba" my-col="col3">Mar</div> <div class="hour" my-col="col4">Mar</div> <div class="hour block-lived-england" my-col="col1">Feb</div> <div class="hour block-worked-microsoft" my-col="col2">Feb</div> <div class="hour block-studied-mba" my-col="col3">Feb</div> <div class="hour" my-col="col4">Feb</div> <div class="hour block-lived-england" my-col="col1">Jan</div> <div class="hour block-worked-microsoft" my-col="col2">Jan</div> <div class="hour block-studied-mba" my-col="col3">Jan</div> <div class="hour" my-col="col4">Jan</div> <div class="title-year my-started">2015</div> <div class="hour block-lived-england" my-col="col1">Dec</div> <div class="hour block-worked-microsoft" my-col="col2">Dec</div> <div class="hour block-studied-mba" my-col="col3">Dec</div> <div class="hour" my-col="col4">Dec</div> <div class="hour block-lived-usa" my-col="col1">Nov</div> <div class="hour block-worked-microsoft" my-col="col2">Nov</div> <div class="hour block-studied-mba" my-col="col3">Nov</div> <div class="hour" my-col="col4">Nov</div> <div class="hour block-lived-usa" my-col="col1">Oct</div> <div class="hour block-worked-microsoft" my-col="col2">Oct</div> <div class="hour block-studied-mba" my-col="col3">Oct</div> <div class="hour" my-col="col4">Oct</div> <div class="hour block-lived-usa" my-col="col1">Sep</div> <div class="hour block-worked-microsoft" my-col="col2">Sep</div> <div class="hour block-studied-mba" my-col="col3">Sep</div> <div class="hour" my-col="col4">Sep</div> <div class="hour block-lived-usa" my-col="col1">Aug</div> <div class="hour block-worked-unemployed" my-col="col2">Aug</div> <div class="hour block-studied-mba" my-col="col3">Aug</div> <div class="hour" my-col="col4">Aug</div> <div class="hour block-lived-usa" my-col="col1">Jul</div> <div class="hour block-worked-unemployed" my-col="col2">Jul</div> <div class="hour block-studied-mba" my-col="col3">Jul</div> <div class="hour" my-col="col4">Jul</div> <div class="hour block-lived-usa" my-col="col1">Jun</div> <div class="hour block-worked-unemployed" my-col="col2">Jun</div> <div class="hour block-studied-mba" my-col="col3">Jun</div> <div class="hour" my-col="col4">Jun</div> <div class="hour block-lived-usa" my-col="col1">May</div> <div class="hour block-worked-unemployed" my-col="col2">May</div> <div class="hour" my-col="col3">May</div> <div class="hour" my-col="col4">May</div> <div class="hour block-lived-usa" my-col="col1">Apr</div> <div class="hour block-worked-unemployed" my-col="col2">Apr</div> <div class="hour" my-col="col3">Apr</div> <div class="hour" my-col="col4">Apr</div> <div class="hour block-lived-usa" my-col="col1">Mar</div> <div class="hour block-worked-unemployed" my-col="col2">Mar</div> <div class="hour" my-col="col3">Mar</div> <div class="hour" my-col="col4">Mar</div> <div class="hour block-lived-usa" my-col="col1">Feb</div> <div class="hour block-worked-unemployed" my-col="col2">Feb</div> <div class="hour" my-col="col3">Feb</div> <div class="hour" my-col="col4">Feb</div> <div class="hour block-lived-usa" my-col="col1">Jan</div> <div class="hour block-worked-unemployed" my-col="col2">Jan</div> <div class="hour" my-col="col3">Jan</div> <div class="hour" my-col="col4">Jan</div> <div class="title-year my-started">2014</div> <div class="hour block-lived-usa" my-col="col1">Dec</div> <div class="hour block-worked-unemployed" my-col="col2">Dec</div> <div class="hour" my-col="col3">Dec</div> <div class="hour" my-col="col4">Dec</div> <div class="hour block-lived-usa" my-col="col1">Nov</div> <div class="hour" my-col="col2">Nov</div> <div class="hour" my-col="col3">Nov</div> <div class="hour" my-col="col4">Nov</div> <div class="hour block-lived-usa" my-col="col1">Oct</div> <div class="hour" my-col="col2">Oct</div> <div class="hour" my-col="col3">Oct</div> <div class="hour" my-col="col4">Oct</div> <div class="hour block-lived-usa" my-col="col1">Sep</div> <div class="hour" my-col="col2">Sep</div> <div class="hour" my-col="col3">Sep</div> <div class="hour" my-col="col4">Sep</div> <div class="hour block-lived-usa" my-col="col1">Aug</div> <div class="hour" my-col="col2">Aug</div> <div class="hour" my-col="col3">Aug</div> <div class="hour" my-col="col4">Aug</div> <div class="hour block-lived-usa" my-col="col1">Jul</div> <div class="hour" my-col="col2">Jul</div> <div class="hour" my-col="col3">Jul</div> <div class="hour" my-col="col4">Jul</div> <div class="hour block-lived-usa" my-col="col1">Jun</div> <div class="hour" my-col="col2">Jun</div> <div class="hour" my-col="col3">Jun</div> <div class="hour" my-col="col4">Jun</div> <div class="hour block-lived-usa" my-col="col1">May</div> <div class="hour" my-col="col2">May</div> <div class="hour" my-col="col3">May</div> <div class="hour" my-col="col4">May</div> <div class="hour block-lived-usa" my-col="col1">Apr</div> <div class="hour" my-col="col2">Apr</div> <div class="hour" my-col="col3">Apr</div> <div class="hour" my-col="col4">Apr</div> <div class="hour" my-col="col1">Mar</div> <div class="hour" my-col="col2">Mar</div> <div class="hour" my-col="col3">Mar</div> <div class="hour" my-col="col4">Mar</div> <div class="hour" my-col="col1">Feb</div> <div class="hour" my-col="col2">Feb</div> <div class="hour" my-col="col3">Feb</div> <div class="hour" my-col="col4">Feb</div> <div class="hour" my-col="col1">Jan</div> <div class="hour" my-col="col2">Jan</div> <div class="hour" my-col="col3">Jan</div> <div class="hour" my-col="col4">Jan</div> </div> </div> </div> <!-- Modal --> <div id="add_study_panel" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header login-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"> Add Study record</h4> </div> <div class="modal-body"> <div class="form-group"> <label class="control-label col-md-12" for="textinput ">School name</label> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm col-md-12" value=""> <label class="control-label col-md-12" for="textinput ">Credential name</label> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm col-md-12" value=""> <label class="control-label col-md-12" for="textinput ">Credential level</label> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Bachelor</option> <option value="2">Diploma</option> <option value="">Master degree</option> </select> </div> </div> <div class="modal-footer"> <a class="btn btn-link" data-dismiss="modal">Cancel</a> <a class="btn btn-primary" data-dismiss="modal">Save</a> </div> </div> </div> </div> </div>

.block-lived-germany { background-color: #d0c0f0; } .block-lived-england { background-color: #f0d0d0; } .block-lived-usa { background-color: #c0f0d0; } .block-worked-sap { background-color: #40f080; } .block-worked-microsoft { background-color: #a0a0f0; } .block-worked-unemployed { background-color: #ccc; } .block-studied-mba { background-color: #f88; } .block-traveled-a1 { background-color: #66f; } .block-traveled-a2 { background-color: #f6f; } #hours { width: 615px; float: left; } .hour { height: 20px; width: 120px; border: solid 1px black; text-align: center; float: left; font-size: 11px; } .hour-highlighted { background-color: darkgray; color: white; } .title { height: 20px; width: 120px; border: solid 1px black; text-align: center; float: left; } .title-year { height: 240px; width: 120px; border: solid 1px black; text-align: center; float: left; } .my-started { clear: both } fieldset { margin-top: 10px; } .form-group { text-align: left; } .col-applicant { border-right: solid 1px #888; text-align:center; font-size: small; } .control-label { font-size: smaller; } INPUT { font-size: smaller; } label { margin-top: 20px; }

var dragging; var yOnMousedown; var currentCol = ""; var wasShowed = false; $(document).ready(function(){ $('.hour').mousedown( function(e) { e.preventDefault(); $(this).addClass( 'hour-highlighted' ); dragging = true; yOnMousedown = e.pageY; currentCol = $(this).attr('my-col'); } ); $(document).mouseup( function(e) { e.preventDefault(); dragging = false; if (!wasShowed) { $('#add_study_panel').modal(); } wasShowed = true; } ); $(document).mousemove( function(e) { if( dragging ) { e.preventDefault(); $('.hour').each( function() { var top = $(this).offset().top; var bottom = top + $(this).height(); if( bottom > yOnMousedown && e.pageY > top && (currentCol == $(this).attr('my-col'))) $(this).addClass( 'hour-highlighted' ); else $(this).removeClass( 'hour-highlighted' ); } ); } } ); });