Skip to content

Instantly share code, notes, and snippets.

@prashantdawar

prashantdawar/index.html

Created August 22, 2016 16:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prashantdawar/82b34bea9ae24cf07be381637cec7cd9 to your computer and use it in GitHub Desktop.
Save prashantdawar/82b34bea9ae24cf07be381637cec7cd9 to your computer and use it in GitHub Desktop.
Download ZIP
Material Table With Floating Button
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Material Table</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/tablestyle.css">
</head>
<body>
<div class="t-container">
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Nickname</th>
<th>Age</th>
<th class="mdl-data-table__cell--non-numeric">Living?</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John Lennon</td>
<td class="mdl-data-table__cell--non-numeric">The smart one</td>
<td>40</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
<td class="mdl-data-table__cell--non-numeric">The cute one</td>
<td>73</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">George Harrison</td>
<td class="mdl-data-table__cell--non-numeric">The shy one</td>
<td>58</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
<td class="mdl-data-table__cell--non-numeric">The funny one</td>
<td>74</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
</tbody>
</table>
<!-- Colored FAB button -->
<button id="item-add" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons" id="add-item">add</i>
</button>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Raw
script.js
$(document).ready(function(){
//=============== [ code to be edited ]
var btnItemAdd = $('.t-container > button');
// Selects first child in header row.
// Abbr: c_h_t_header --- Child header in table header
var c_h_t_header = $('.t-container > table > thead > tr > th:nth-child(1)');
// [ end of code to be edited ] ===============/
btnItemAdd.css('left',c_h_t_header.width());
btnItemAdd.delay( 800 ).fadeIn( 400 );
});
Raw
style.css
.t-container{
position: relative;
display: inline-block;
}
.t-container > button{
top: 27px;
position: absolute;
z-index: 1;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment