beautiful tabs and refresh waiter

by J. Jones

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://tympanus.net/Tutorials/StickyTableHeaders/js/jquery.stickyheader.js"></script>
<ul id="tabs">
    <li><a href="#" name="tab1">TEST1</a></li>
    <li><a href="#" name="tab2">TEST2</a></li>
    <li><a href="#" name="tab3">TEST3</a></li>
    <li><a href="#" name="tab4">TEST4</a></li>
</ul>

<div id="content"> 
	<div id="tab1">
		    <h2>Test 1</h2>
			<div class="container">
				<div class="component">
				<table class="overflow-y">
					<thead>
						<tr>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Address</th>
							<th>Email</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>John</th>
							<td>Pill</td>
							<td>ABCDEF</td>
							<td>[email protected]</td>							
						</tr>
						<tr>
							<th>Tom</th>
							<td>Cill</td>
							<td>HIJKL</td>
							<td>[email protected]</td>						
						</tr>
					</tbody>
				</table>	
			</div>
		</div><!-- /container -->
    </div>
    <div id="tab2">
		    <h2>Test 2</h2>
			<div class="container">
				<div class="component">
				<table class="overflow-y">
					<thead>
						<tr>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Address</th>
							<th>Email</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>Poppy</th>
							<td>Bill</td>
							<td>JSKSKS</td>
							<td>[email protected]</td>							
						</tr>
						<tr>
							<th>Monty</th>
							<td>Carlo</td>
							<td>OIPIU</td>
							<td>[email protected]</td>						
						</tr>
					</tbody>
				</table>	
			</div>
		</div><!-- /container -->   
    </div>
</div>
<br><br>

CSS

/* Component styles */
@font-face {
	font-family: 'Blokk';
	font-weight: normal;
	font-style: normal;
}

.component {
	line-height: 1.5em;
	margin: 25px 297px;
	max-width: 2000px;
	overflow: auto;	
}  
#headerDivDash {
    margin: 35px;
    text-align: center;
}
.footer {
	margin: 25px;
    color:#C8C8C8;
    font-weight: bold;
}

#cont{
background-color:#E6E6FA;
height:100%;
}
.ebayL {
float:left;
margin-left:0px;
margin-top:-55px;
}

.component .filler {
	font-family: "Blokk", Arial, sans-serif;
	color: #d3d3d3;
}

table {
	border-collapse: collapse;
	margin-bottom: 3em;
	width: 100%;
	background: #fff;
}

td,th {
	padding: 0.75em 1.5em;
	text-align: left;
}

td.err {
	background-color: #e992b9;
	color: #fff;
	font-size: 0.75em;
	text-align: center;
	line-height: 1;
}

th {
	background-color: #2B3856;
	font-weight: bold;
	color: #fff;
	white-space: nowrap;
}

tbody th {
	background-color: 	#15317E;
}

tbody tr:nth-child(2n-1) {
	background-color: #f5f5f5;
	transition: all .125s ease-in-out;
}

tbody tr:hover {
	background-color: rgba(129, 208, 177, .3);
}

/* For appearance */
.sticky-wrap {
    margin: 5px 0 3em;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    width: 100%;
}

.sticky-wrap .sticky-thead,.sticky-wrap .sticky-col,.sticky-wrap .sticky-intersect
	{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .125s ease-in-out;
	z-index: 50;
	width: auto; /* Prevent table from stretching to full size */
}

.sticky-wrap .sticky-thead {
	box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
	z-index: 100;
	width: 100%; /* Force stretch */
}

.sticky-wrap .sticky-intersect {
	opacity: 1;
	z-index: 150;
}

.sticky-wrap .sticky-intersect th {
	background-color: #666;
	color: #eee;
}

.sticky-wrap td,.sticky-wrap th {
	box-sizing: border-box;
}

/* Not needed for sticky header/column functionality */
td.user-name {
	text-transform: capitalize;
}

.sticky-wrap.overflow-y {
	overflow-y: auto;
	max-height:...

JavaScript

$(document).ready(function() {
    $("#content").find("[id^='tab']").hide(); // Hide all content
    $("#tabs li:first").attr("id","current"); // Activate the first tab
    $("#content #tab1").fadeIn(); // Show first tab's content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return;       
        }
        else{             
          $("#content").find("[id^='tab']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
        }
    });
});


$(document).ready(function(){
	// Create overlay and append to body:
	$('<div id="overlay"/>').css({
		position: 'fixed',
		top: 0,
		left: 0,
		width: '100%',
		height: $(window).height() + 'px',
		opacity:0.4, 
		background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
	}).hide().appendTo('body');

	// Execute refresh with interval:
	setInterval(refresh, 30 * 1000);
});

//Create a refresh function:
function refresh(){
	// SHOW overlay
	$('#overlay').show();
	// Retrieve data:
	$.ajax({
		url: 'test4.jsp',
		type: 'GET',
		success: function(data){
			// onSuccess take only the container content
			var content =  $($.parseHTML(data)).filter("#tab1"); 
			//Replace content inside the div
			$('#tab1').replaceWith(content);
			// HIDE the overlay:
			$('#overlay').hide();
		}
	});
}