Access html elements in the same table row using jQuery

   <table>  
     <tr>  
       <td>Mary</td>  
       <td><div id="parentTimer"></div></td>  
       <td id="td">  
         <button id="btnStart" type="button" onclick="handleStart(event, this);">Start</button>  
         <input id="inputValue" value="Test" />  
       </td>  
     </tr>  
   </table>  

   <script>  
     function handleStart(event, sender)  
     {  
       var $row = $(sender).parents('tr');  
       var desc = $row.find('#inputValue').val();  
       var div = $row.find('#parentTimer');  
       div.html('started');  
       alert(desc);  
     }  
   </script>  

Seamless HTML page transition

With more and more complex HTML + CSS3 + jQuery page design these days, it is very easy to have clunky webpages which take a while to load, with components like jQuery tab controls display partially before they are formatted. A way to get around that is to display web pages after they are fully rendered.

 CSS:  
 <style>  
   html { visibility:hidden; } /*html is initially hidden*/  
   /*fade in effect*/  
   body {  
     opacity: 1;   
     transition: 1s opacity;  
   }  
   body.fade-out {  
     opacity: 0;  
     transition: none;  
   }  
 </style>  
 JavaScript  
 <script>  
 $(document).ready(function() {  
  /*show html after page load*/  
  document.getElementsByTagName("html")[0].style.visibility = "visible";  
 });  
 </script>