prevent tabs to be seen while window reloading - php

Question

I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.
My Javascript is as follows :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
My HTML code is as follows :
<div id="menu">
<ul>
<li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>
<li>Activation Response Generator </li>
<li>Decode Support Key</li>
<li>Decode Recovery Key</li>
</ul>
<div id="tab-1" >
<div id ="main">
<div align=center>
<table style="padding-top:20px;"> <tr>
<td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " /> </td>
<br/>
</div>
<?php session_start();$user = $_SESSION['usr'];?>
</br>
<tr>
<td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> <u> HAVE A GREAT DAY </u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> Logout </b> </font></td>
</tr>
</div>
</div>
<div id="tab-2">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-3">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-4">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
</div>

Answer 1

Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.
CodePen
.overlay {
position: fixed; /* or absolute if inside a div */
width: 100%; height: 100%;
background: white;
}
At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.
$(document).ready(function(){ $('.overlay').fadeOut(); });
You can also spice it up, and put a loading message inside the overlay.
<div class="overlay">
<h1>Loading</h1>
</div>
.overlay h1 {
position: absolute;
top: 45%; /* nearly the center, good enough for a second of visibility */
text-align: center;
width: 100%;
}