VA FrontEnd Challenge

by Mike Gleeson

HTML

<div>  
  <table>
    <thead>
      <tr class="persist-header">
        <th>Submission ID</th>
        <th>Form Name</th>
        <th>Type</th>
        <th>Record Created/Updated</th>
        <th>Submission Date</th>
        <th>IP Address</th>
        <th>Status</th>
        <th>Details</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>FFS-003580</td>
        <td>Test Form</td>
        <td>Contact</td>
        <td><a>http://www.test.com/abc11</a></td>
        <td>23/09/2015 9:52 AM</td>
        <td>99.231.41.163</td>
        <td>CREATED</td>
        <td></td>
        <td><input class="add" type="button" value="+"/><input class="remove" type="button" value="X"/><input class="more" type="button" value=">"/></td>
      </tr>
      <tr>
        <td>FFS-003579</td>
        <td>Test Form</td>
        <td>Account</td>
        <td><a>http://www.test.com/abc12</a></td>
        <td>23/09/2015 9:52 AM</td>
        <td>99.231.41.163</td>
        <td>CREATED</td>
        <td></td>
        <td><input class="add" type="button" value="+"/><input class="remove" type="button" value="X"/><input class="more" type="button" value=">"/></td>
      </tr>
      <tr>
        <td>FFS-003578</td>
        <td>Test Form</td>
        <td>Contact</td>
        <td><a>http://www.test.com/abc13</a></td>
        <td>23/09/2015 9:52 AM</td>
        <td>99.231.41.163</td>
        <td>CREATED</td>
        <td></td>
        <td><input class="add" type="button" value="+"/><input class="remove" type="button" value="X"/><input class="more" type="button" value=">"/></td>
      </tr>
          <tr>
        <td>FFS-003577</td>
        <td>Test Form</td>
        <td>Account</td>
        <td><a>http://www.test.com/abc14</a></td>
        <td>23/09/2015 9:52 AM</td>
        <td>99.231.41.163</td>
        <td>ERROR</td>
        <td>Field missing: First Name</td>
        <td><input class="add" type="button" value="+"/><input class="remove" type="button" value="X"/><input...

CSS

table {
     border-spacing:0;
     border-bottom: 12px solid #1F497D;
     border-top: 12px solid #1F497D; 
     font-family: Arial;
     border-collapse: separate !important;
     border-radius: 0.5em;
}

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

thead
{
   background-color: #1F497D;
   color: #FFF;
   font-family:Arial;
   font-size: 0.8em;
   padding: 10px;
}

th {
  padding: 2em;
}

tr:nth-child(even) {
  background: #DDD;
}

tr:nth-child(odd) {
  background: #FFF;
}

td 
{
  padding: 20px 10px 20px 10px;
}

.persist-header
{
    background-color: #1F497D !important;
}

.add {
    color: #FFF;
    font-size: 38px;
    border: none;
    display: inline-block;
    background-color: green;
    padding: 0px 10px 0px 10px;
    border-radius: 20px;
        margin-right: 10px;
}

.remove
{
    color: #FFF;
    font-size: 38px;
    border: none;
    display: inline-block;
    background-color: red;
    padding: 0px 10px 0px 10px;
    border-radius: 20px;
        margin-right: 10px;
}

.more {
    color: #FFF;
    font-size: 38px;
    border: none;
    display: inline-block;
    background-color: #1F497D;
    padding: 0px 10px 0px 10px;
    margin-right: 10px;
    border-radius: 20px;
}

a
{
  text-decoration: underline;
  color: blue;
}

JavaScript

function UpdateTableHeaders() {
   $(".header").each(function() {
   
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
       
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");
         
   });
   
   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
   
});