beautiful tabs and refresh waiter

by J. Jones

HTML

<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;
}

body {
	font-family: 'Lato', Arial, sans-serif;
	color: #7c8d87;
	background-color:#f8f8f8;
}

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: -ms-linear-gradient(top, #fff, #ddd);
  background-image: -o-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}

#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: -ms-linear-gradient(top, #fff, #ddd);
  background-image: -o-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-transform: skew(10deg);
  -moz-transform:...

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();
		}
	});
}