Demand Timeline

In this example below you will see how to do a Demand Timeline with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nataliarsand, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nataliarsand ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
<head>
	<link href="styles/table.css" type="text/css" rel="stylesheet"/>
	<link href="styles/normalize.css" type="text/css" rel="stylesheet"/>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	</head>
	<body>

		<section class="the_timeline">
		  <table cellpadding="0" cellspacing="0" class="header">
		    <tbody>
		    <tr>
		      <th></th>
		      <th>13</th>
		      <th>20</th>
		      <th>27</th>
		      <th>3</th>
		      <th>10</th>
		      <th>17</th>
		      <th>25</th>
		    </tr>
		    </tbody>
		  </table>

		  <div class="timeline_body">
			
			<!-- NEW ROLE LINE -->
		    <div class="role" style="top: 0%;">
			
		      <!-- TIMELINE STRUCTURE -->
		      <table cellpadding="0" cellspacing="0" class="bg">
		        <tbody>
		          <tr>
		            <td class="role_info">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td>
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td>
		              <div class="role_space">&nbsp;</div>
		            </td>
		          </tr>
		        </tbody>
		      </table>

		      <!-- TIMELINE ASSIGNMENTS -->
		      <table class="fg">
		        <tbody>
		          <tr>
		            <td class="cell">
		              <div class="role_card">
		                <div class="request">DEV</div>
		                <div class="grade">Sr. Con</div>
		              </div>
		            </td>
		            <td class="cell assignment" colspan="3" style="border-left: none;">
		              <div class="open_role dev">
		                <div class="open_role_in">
		                  <div class="arrow-left"></div>
		                  <a href="#">Natalia Arsand</a>
		                </div>
		              </div>
		            </td>
		            <td class="cell">&nbsp;</td>
		            <td class="cell">&nbsp;</td>
		            <td class="cell">&nbsp;</td>
		            <td class="cell">&nbsp;</td>
		          </tr>
		          </tbody> 
		      </table>
		    </div>
			<!-- END ROLE LINE -->

			
			<!-- NEW ROLE LINE 2 -->
		    <div class="role" style="top: 22%;">
		      <!-- TIMELINE STRUCTURE -->
		      <table cellpadding="0" cellspacing="0" class="bg">
		        <tbody>
		          <tr>
		            <td class="role_info">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td>
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		          </tr>
		        </tbody>
		      </table>

		      <!-- TIMELINE ASSIGNMENTS -->
		      <table class="fg">
		        <tbody>
		          <tr>
		            <td class="cell">
		              <div class="role_card">
		                <div class="request">DEV</div>
		                <div class="grade">Sr. Con</div>
		              </div>
		            </td>
		
		            <td class="cell">&nbsp;</td>
           			<td class="cell">&nbsp;</td>
		            <td class="cell assignment" colspan="3" style="border-left: none;">
		              <div class="open_role dev">
		                <div class="open_role_in">
		                  <a href="#">Natalia Arsand</a>
		                </div>
		              </div>
		            </td>
		            <td class="cell">&nbsp;</td>
		            <td class="cell">&nbsp;</td>
		          </tr>
		          </tbody> 
		      </table>
		    </div>
			<!-- END ROLE LINE 2 -->
			
			<!-- NEW ROLE LINE 3 -->
		    <div class="role" style="top: 44%;">
		      <!-- TIMELINE STRUCTURE -->
		      <table cellpadding="0" cellspacing="0" class="bg">
		        <tbody>
		          <tr>
		            <td class="role_info">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td>
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		            <td class="assignment">
		              <div class="role_space">&nbsp;</div>
		            </td>
		          </tr>
		        </tbody>
		      </table>

		      <!-- TIMELINE ASSIGNMENTS -->
		      <table class="fg">
		        <tbody>
		          <tr>
		            <td class="cell">
		              <div class="role_card">
		                <div class="request">DEV</div>
		                <div class="grade">Sr. Con</div>
		              </div>
		            </td>
		
		            <td class="cell">&nbsp;</td>
           			<td class="cell">&nbsp;</td>
		            <td class="cell assignment" colspan="5" style="border-left: none;">
		              <div class="open_role dev r-arrow">
		                <div class="open_role_in">
						  <div class="arrow-right"></div>
		                  <a href="#">Natalia Arsand</a>
		                </div>
		              </div>
		            </td>
		          </tr>
		          </tbody> 
		      </table>
		    </div>
			<!-- END ROLE LINE 3 -->
			
		  </section>

</body>
</html>

/*Downloaded from https://www.codeseek.co/nataliarsand/demand-timeline-doEjB */
    html,
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

body {
  background: #FFF;
  overflow-x: hidden;
  margin: 10px !important;
  text-align: left;
  font-family: "opensans-regular", "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
  color: #333;
  font-size: 13px;
  /* for IE6/7 */
  *font-size:small;
  /* for IE Quirks Mode */
  *font:x-small;
}

strong {
  font-weight: bold;
  font-family: "opensans-bold", "Open Sans", Arial;
}

em {
  font-family: "opensans-italic", "Open Sans", Arial;
  font-style: italic;
}

ul, li {
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

img {
  border: none;
}

.clearfix {
  clear: both;
}




section.the_timeline {
  position: relative;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

table.header {
  width: 100%;
  table-layout: fixed;
  color: #555;
  background-color: #FFF;
}

table.header tr th:first-child {
  width: 8%;
}

.timeline_body {
  position: absolute;
  top: 25px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  /* border-bottom: 1px solid #ddd; */
  /* border-right: 1px solid #ddd; */
  overflow: hidden;
  height: 240px;
}

.role {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 25%;

  &.one { /*element-style */
    top: 0%;
    height: 25%;
  }
}

table.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  margin: 0px 0;
}


table.bg td {
  border-left: 1px solid #333;
}

table.bg td:nth-child(2) {
  border-left: none;
}

table.bg td:last-child {
  /*border-right: 1px solid #333;*/
}

table.bg td.role_info {
  border-left: none;
  width: 8%;
}

table.bg td .role_space {
  background: #EFEFEF;
  position: relative;
  height: 100%;
  padding: 0;
}

table.bg td.assignment .role_space {
  background: #1EA1B9;
}

table.fg {
  position: relative;
  table-layout: fixed;
  width: 100%;
}

td.cell {
  vertical-align: top;
  margin: 10px;
  text-align: center;
  padding: 8px 0;
}

td.cell:first-child {
  width: 8%;
}

.role_card {
  background: #1EA1B9;
  padding: 3.5% 0;
  border-right: 8px solid #FFF;
  color: #FFF;
}

.open_role {
  position: relative;
  height: 24px;
  padding: 4px;
  top: 6px;
}

.open_role_in {
  padding: 3px;
  text-align: left;
}

.open_role_in:before {
  font-family: "FontAwesome";
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  content: "\f007";
  background: white;
  border-radius: 60px;
  padding: 2px 4px;
  text-align: center;
  display: inline-block;
  color: #37a654;
}

.open_role a {
  color: #FFF;
  text-decoration: none;
}

.dev {
  color: #FFF;
  background-color: #266773;
  background: -webkit-linear-gradient(right bottom,#308797 0,#308797 25%,#266773 25%,#266773 50%,#308797 50%,#308797 75%,#266773 75%);
  background-size: 6px 6px;
}

.dev .arrow-right, .dev .arrow-left {
  border-color: transparent #266773;
}

.r-arrow {
  margin-right: 8px;
}

.arrow-right, .arrow-left {
  position: absolute;
  border: 0 solid #000;
}

.arrow-left {
  border-width: 16px 6px 16px 0;
  top: 0;
  left: -6px;
}

.arrow-right {
border-width: 15px 0 15px 6px;
top: 0;
right: -6px;
}

table td, table th {
  padding: 8px 0;
}


/*Downloaded from https://www.codeseek.co/nataliarsand/demand-timeline-doEjB */
    

Comments