tablesorter causes loss in div scroll overflow-y

tablesorter causes loss in div scroll overflow-y

Hi folks. I just started using jquery.tablesorter and it will help us a lot with our db stats page. One problem I'm running into is that when we use tablesorter we lose the overflow-y:scroll and height:55% styles to our divs. I've tried inline styling as well as having the style in the header with the !important tag. Neither seems to work. If anyone knows of a way to get this to work I'd really appreciate the knowledge. I'm not a very good web dev and I just can't figure it out. Thanks!!

  1. <?PHP
  2. #Log in
  3. //<link rel="stylesheet" href="http://www.wordspionagedb.com/stats/tablesorter/themes/blue/style.css" type="text/css" media="print, projection, screen" />
  4. //<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
  6. $header = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  7. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
  8. $header .= '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  9. <head>
  10. <title>Wordspionage Stats</title>
  11. <script type="text/javascript" src="http://www.wordspionagedb.com/stats/tablesorter/jquery-latest.js"></script>
  12. <script type="text/javascript" src="http://www.wordspionagedb.com/stats/tablesorter/jquery.tablesorter.js"></script>
  13. <script type="text/javascript">
  14. $(function() {
  15. $("#user_table").tablesorter();
  17. });
  18. </script>';
  20. $header .= '<style>
  21. p , body
  22. {
  23. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  24. }
  26. #main
  27. {
  28. overflow-y:scroll !important; 
  29. height:55% !important;
  30. }
  31.     
  32. #user_table , #totals , #head_table , #totals_au
  33. {
  34. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  35. border-collapse:collapse;
  36. }
  38. #user_table td, #user_table th , #head_table th
  39. {
  40. font-size:1em;
  41. border:2px solid black;
  42. padding:3px 7px 2px 7px;
  43. text-align:center;
  44. }
  46. #totals th , #totals td
  47. {
  48. font-size:1em;
  49. border:0px solid black;
  50. padding:3px 7px 2px 7px;
  51. text-align:left;
  52. }
  54. #total_au , #totals_au th , #totals_au td
  55. {
  56. font-size:1em;
  57. padding:3px 7px 2px 7px;
  58. text-align:center;
  59. }
  61. #user_table th , #head_table th
  62. {
  63. font-size:1.1em;
  64. padding-top:5px;
  65. padding-bottom:4px;
  66. background-color:#404040 ;
  67. color:#ffffff;
  68. }
  70. #container{width:auto;height:auto;position:relative;}

  72. .column_n {
  73. width: 40%;
  75. float: left;
  76. position:relative;
  77. }

  79. </style>';
  81. $header .= '</head>
  82. <body>';
  84. echo $header;
  85. echo '<div id="main">';
  86. echo '<table id="user_table" class="tablesorter"><thead><tr><th>Codename</th><th>Level</th><th>Skill Points</th><th>Last Login</th><th>Active Games</th><th>Games Played</th>
  87. <th>Won</th><th>WS Balance</th><th>Purchases</th><th>Value</th><th>Best Game Score</th><th>Best Word Score</th><th>Best Move Score</th><th>MW Played</th></tr></thead><tbody>';
  89. $mostActiveCount = 0;
  90. $mostActiveName = '';
  91. $mostWonCount = 0;
  92. $mostWonName = '';
  93. $mostSpentCount = 0;
  94. $mostSpentName = '';
  95. $mostXPCount = 0;
  96. $mostXPName = '';
  97. $totalSales = 0;
  99. date_default_timezone_set('America/New_York');
  100. $serverTime = time();
  101. $numUsers = 0;
  103. while($numUsers < 10)
  104. {
  105. $showRow = 1;
  107. $activeGames = rand(1,20);
  108. $numUsers++;
  112. $level = 'Recruit';
  115. $lastTime = date('M-d  H:i' , 1392246813);
  116. $timeTest = 1392246813;
  119. $totalGames = rand(50,100);

  122. $totalPurchaseCount = 10;
  125. $value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
  126. $totalSales = $totalSales + $value;

  128. $codeName = 'Sean'.rand(1,100);
  129. if ($totalGames > $mostActiveCount)
  130. {
  131. $mostActiveCount = $totalGames;
  132. $mostActiveName = $codeName;
  133. }
  135. $wins = rand(10,80);
  137. if ($wins > $mostWonCount)
  138. {
  139. $mostWonCount = $wins;
  140. $mostWonName = $codeName;
  141. }
  142. if ($value > $mostSpentCount)
  143. {
  144. $mostSpentCount = $value;
  145. $mostSpentName = $codeName;
  146. }
  148. $xp = rand(100,1000);
  149. if ($xp > $mostXPCount)
  150. {
  151. $mostXPCount = $xp;
  152. $mostXPName = $codeName;
  153. }
  155. if (($serverTime - $timeTest > 1209600) AND $activeGames == 0 AND $totalPurchaseCount == 0)
  156. {
  158. }
  159. else
  160. {
  162. //table data
  163. $table = '';
  164. $table = '<tr>';
  165. $table .= '<td>'.$codeName.'</td>';
  166. $table .= '<td>'.$level.'</td>';
  167. $table .= '<td>'.number_format($xp , 0 , '.' , ',').'</td>';
  168. $table .= '<td>'.$lastTime.'</td>';
  169. $table .= '<td>'.$activeGames.'</td>';
  170. $table .= '<td>'.$totalGames.'</td>';
  171. $table .= '<td>'.$wins.'</td>';
  172. $table .= '<td>'.number_format(rand(100,2000), 0 , '.' , ',').'</td>';
  173. $table .= '<td>'.$totalPurchaseCount.'</td>';
  174. $table .= '<td>$'.number_format($value , 2 , '.' , ',').'</td>';
  175. $table .= '<td>'.rand(100,1000).'</td>';
  176. $table .= '<td>'.rand(100,1000).'</td>';
  177. $table .= '<td>'.rand(100,1000).'</td>';
  178. $table .= '<td>'.rand(100,1000).'</td>';
  179. $table .= '</tr>';
  180. echo $table;
  181. }
  182. }
  184. echo '</tbody></table>';
  185. echo '</div>';
  187. date_default_timezone_set('UTC');

  190. $activeGames = 1000;

  193. $completedGames = 5550;

  196. $pendingGames = 200;
  198. $usersDaily = 600;
  199. $value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
  200. $avgDailyValue = number_format(($value/$usersDaily) , 2 , '.' , ',');
  202. $usersWeekly = 2000;
  203. $value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
  204. $avgWeeklyValue = number_format(($value/$usersWeekly) , 2 , '.' , ',');
  206. $usersMonthly = 4000;
  207. $value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
  208. $avgMonthlyValue = number_format(($value/$usersMonthly) , 2 , '.' , ',');
  209. $adFreeCount = 750;
  211. echo '<hr>';
  212. echo '<div id="totalDiv" style="overflow-y:scroll; height:40%;">';
  213. echo '<table id="totals">';
  214. echo '<tr>
  215. <td>Total Paid</td><td> '.$adFreeCount.'</td>';
  216. echo '<td style="padding-left:150px;">Most active player </td><td> ' . $mostActiveName . ' with ' . $mostActiveCount . ' games played</td>';
  217. echo '</tr>
  218. <tr>';
  220. echo '<td>Number of active games </td><td> ' . $activeGames . '</td>';
  221. echo '<td style="padding-left:150px;">Player with the most wins </td><td> ' . $mostWonName . ' with ' . $mostWonCount . ' wins</td>';
  222. echo '</tr>
  223. <tr>';
  225. echo '<td>Number of completed games </td><td> ' . $completedGames. '</td>';
  226. echo '<td style="padding-left:150px;">Player with the most Skill Points </td><td> ' . $mostXPName . ' with ' . number_format($mostXPCount , 0 , '.' , ',') . ' Skill Points - Recruit</td>';
  227. echo '</tr>
  228. <tr>';
  231. echo '<td>Number of pending games </td><td> ' . $pendingGames . '</td>';
  232. echo '<td style="padding-left:150px;">Player with the highest amount spent </td><td> ' . $mostSpentName . ' with $' . $mostSpentCount . '</td>';
  233. echo '</tr></table>';
  238. echo '<div id="container">';
  239. echo '<div id = "col1" class="column_n">';
  240. echo '</br><table id="totals"><tr><th>User Type</th><th>Count</th><th>Average Gross</th><th>Average Net</th></tr>';
  242. echo '<tr><td>Daily Active</td><td style="text-align:center;"> ' . $usersDaily . '</td><td style="text-align:center;">$'.$avgDailyValue.'</td><td style="text-align:center;"> $'. number_format($avgDailyValue * 0.7 , 2 , '.' , ',') .'</td>';
  243. echo '</tr>
  244. <tr>';
  245. echo '<td>Weekly Active</td><td style="text-align:center;"> ' . $usersWeekly . '</td><td style="text-align:center;">$'.$avgWeeklyValue.'</td><td style="text-align:center;"> $'. number_format($avgWeeklyValue * 0.7 , 2 , '.' , ',') .'</td>';
  246. echo '</tr>
  247. <tr>';
  248. echo '<td>Monthly Active</td><td style="text-align:center;"> ' . $usersMonthly . '</td><td style="text-align:center;">$'.$avgMonthlyValue.'</td><td style="text-align:center;"> $'. number_format($avgMonthlyValue * 0.7 , 2 , '.' , ',') .'</td>';
  249. echo '</tr>
  250. <tr>';
  251. echo '<td>Total Users</td><td style="text-align:center;"> ' . $numUsers . '</td><td style="text-align:center;">$'.number_format(($totalSales/$numUsers) , 2 , '.' , ',').'</td><td style="text-align:center;"> $'. number_format($totalSales * 0.7 , 2 , '.' , ',') .'</td>';
  252. echo '</tr>';
  253. echo '<tr><th>Total Sales</th><th style="text-align:center;">Gross</th><th style="text-align:center;">Net</th></tr>';
  254. echo '<tr><td></td><td style="text-align:center;"> $'.$totalSales.'</td><td style="text-align:center;"> $'. number_format($totalSales * 0.7 , 2 , '.' , ',') .'</td></tr></table>';
  255. echo '</div>';

  258. $num_ios = 10;
  260. $num_android = 20;

  262. $num_other = 30;

  264. $num_ios_qr = 40;

  266. $num_android_qr = 50;
  268. $num_other_qr = 60;

  271. echo '<div id ="col2" class="column_n">';
  272. echo '</br><table id="totals">';
  273. echo '<tr><th colspan="3" style="text-align:center;">Hits To Store Link</th></tr>';
  274. echo '<tr><th>OS</th><th>In-App (Ad-Free)</th><th>QR Code</th></tr>';
  275. echo '<tr>';
  276. echo '<td>Andriod</td>';
  277. echo '<td style="text-align:center;">' . $num_android . '</td>';
  278. echo '<td style="text-align:center;">' . $num_android_qr . '</td>';
  279. echo '</tr>';
  280. echo '<tr>';
  281. echo '<td>iOS</td>';
  282. echo '<td style="text-align:center;">' . $num_ios . '</td>';
  283. echo '<td style="text-align:center;">' . $num_ios_qr . '</td>';
  284. echo '</tr>';
  285. echo '<tr>';
  286. echo '<td>Other</td>';
  287. echo '<td style="text-align:center;">' . $num_other . '</td>';
  288. echo '<td style="text-align:center;">' . $num_other_qr . '</td>';
  289. echo '</tr>';
  290. echo '<tr>';
  291. echo '<td>Total</td>';
  292. $sum = $num_android + $num_ios + $num_other;
  293. echo '<td style="text-align:center;">' . $sum . '</td>';
  294. $sum = $num_android_qr + $num_ios_qr + $num_other_qr; 
  295. echo '<td style="text-align:center;">' . $sum . '</td>';
  296. echo '</tr>';
  297. echo '</table>';
  298. echo '</div>';
  299. echo '</div>';
  300. echo '</body></html>';
  301. ?>