Search jQuery

jQuery Forum

Screen name:
manns41078

manns41078's Profile

1 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

tablesorter causes loss in div scroll overflow-y
[6Replies]
- 12-Feb-2014 06:42 PM
- Forum: Using jQuery Plugins
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. }
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. ?>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend