javascript - Table moves to j-query specified position on button click - and then moves back -

i need 4x4 buttons, , since new html etc, decided use easy, deprecated table. due me using premade online-found filebrowser, had change jquery-file newer version, fit filebrowser (it won't open old one). entire stylesheet changed, that's not real problem. when press button open filebrowser, table moves specified me in js-file. when close filebrowser, takes half second change back.
why doesn't js (jquery code) positioning apply beginning new jquery?

<table id="tablediv"> <tbody>  <tr>     <td id="buttonfield" style="width:25%;"><button type="button" id="button1"class="button">1</button></td>     <td style="width:25%;"><button onclick="test()" type="button" id="button2"class="button">2</button></td>     <td style="width:25%;"><button type="button" id="button3"class="button">3</button></td>     <td style="width:25%;"><button  type="button" id="button4"class="button">4</button></td>       </tr>     <tr>        <td id="buttonfield2" style="width:25%;"><button type="button" id="button1"class="button">5</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">6</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">7</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">8</button></td>   </tr>          <tr>      <td id="buttonfield3" style="width:25%;"><button type="button" id="button1"class="button">9</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">10</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">11</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">12</button></td>   </tr>    <tr>        <td id="buttonfield4" style="width:25%;"><button type="button" id="button1"class="button">13</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">14</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">15</button></td>      <td style="width:25%;"><button type="button" id="button1"class="button">16</button></td>   </tr> 

css:

#tablediv {     width:100%;     height:80%; } #button1, #button2, #button3, #button4 {     width:100%;     height:100%;  } table {     width:100%; } 

js:

totalwidth =$('body').width(); totalheight=$('body').height();  menulength=(totalwidth*0.03);  $("#tablediv").css("padding-top", menulength+(menulength*0.50)); $("#buttonfield").css("height", menulength+menulength); $("#buttonfield2").css("height", menulength+menulength); $("#buttonfield3").css("height", menulength+menulength); $("#buttonfield4").css("height", menulength+menulength);  

this button does:

$("#button4").click(function() {     $.mobile.changepage("filebrowser.html"); }); 

i changed jquery jquery.js (jquery javascript library v1.9.1)

<link type="text/css" href="jquery.mobile-1.3.0.min.css" rel="stylesheet" />  <script src="jquery-1.9.1.min.js" type="text/javascript"></script>   <script src="jquery.mobile-1.3.0.min.js" type="text/javascript"></script>   

original layout old jquery file. (how supposed look)

layout new jquery

now, second press button (let's button 1) open filebrowser - whole layout moves this. when close filebrowser, gets picture2.

what problem? rather want solve this, trying make 4x4 divs (like first layout), because i'm not best @ html-guis yet.

first of all, welcome wonderful world of web development!

now, id attribute of html element should unique per page. td elements' id attributes not unique. should try avoid inline styling, , use css-file as can.

i've made example jsfiddle use jquery number of rows , columns in table, , setting height , padding of buttons. way can add or remove buttons please, , jquery code make sure buttons evenly spread.

note: works long there equal number of cells in each row.

link jsfiddle: http://jsfiddle.net/erichfosse/qqhh2/6/

code:

html:

<table id="tablediv"> <tbody>     <tr>         <td><button type="button" class="button">1</button></td>         <td><button type="button" class="button">2</button></td>         <td><button type="button" class="button">3</button></td>         <td><button type="button" class="button">4</button></td>     </tr>      <tr>          <td><button type="button" class="button">5</button></td>          <td><button type="button" class="button">6</button></td>          <td><button type="button" class="button">7</button></td>          <td><button type="button" class="button">8</button></td>     </tr>      <tr>         <td><button type="button" class="button">9</button></td>         <td><button type="button" class="button">10</button></td>         <td><button type="button" class="button">11</button></td>         <td><button type="button" class="button">12</button></td>     </tr>      <tr>         <td><button type="button" class="button">13</button></td>         <td><button type="button" class="button">14</button></td>         <td><button type="button" class="button">15</button></td>         <td><button type="button" class="button">16</button></td>     </tr> </tbody> 

css:

#tablediv {     width: 100%; } 

javascript:

var totalwidth = $('body').width(); var totalheight = $('body').height();  var rows = $('tr').size(); var columns = $('td').size()/$('tr').size();  var distancetonextbutton = 8; // adjust needs var leftoververticalspace = 23; // increase number subtracted make room more stuff var buttonheight = (totalheight/rows) - leftoververticalspace;  var buttonwidth = (totalwidth/columns) - distancetonextbutton; var buttonverticalpadding = (buttonheight/2) - 8; var buttonhorizontalpadding = (buttonwidth/2) - 8;  $(".ui-btn-inner").css("padding-top", buttonverticalpadding); $(".ui-btn-inner").css("padding-right", buttonhorizontalpadding/2); $(".ui-btn-inner").css("padding-bottom", buttonverticalpadding); $(".ui-btn-inner").css("padding-left", buttonhorizontalpadding/2); $(".ui-btn").css("height", buttonheight); $(".ui-btn").css("width", buttonwidth);