Search jQuery

jQuery Forum

tablesorter causes loss in div scroll overflow-y

in Using jQuery Plugins • 9 years ago

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!!

<?PHP
#Log in
//<link rel="stylesheet" href="http://www.wordspionagedb.com/stats/tablesorter/themes/blue/style.css" type="text/css" media="print, projection, screen" />
//<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
$header = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
$header .= '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>Wordspionage Stats</title>
<script type="text/javascript" src="http://www.wordspionagedb.com/stats/tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.wordspionagedb.com/stats/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function() {
$("#user_table").tablesorter();
});
</script>';
$header .= '<style>
p , body
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#main
{
overflow-y:scroll !important;
height:55% !important;
}
#user_table , #totals , #head_table , #totals_au
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
}
#user_table td, #user_table th , #head_table th
{
font-size:1em;
border:2px solid black;
padding:3px 7px 2px 7px;
text-align:center;
}
#totals th , #totals td
{
font-size:1em;
border:0px solid black;
padding:3px 7px 2px 7px;
text-align:left;
}
#total_au , #totals_au th , #totals_au td
{
font-size:1em;
padding:3px 7px 2px 7px;
text-align:center;
}
#user_table th , #head_table th
{
font-size:1.1em;
padding-top:5px;
padding-bottom:4px;
background-color:#404040 ;
color:#ffffff;
}
#container{width:auto;height:auto;position:relative;}
.column_n {
width: 40%;
float: left;
position:relative;
}
</style>';
$header .= '</head>
<body>';
echo $header;
echo '<div id="main">';
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>
<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>';
$mostActiveCount = 0;
$mostActiveName = '';
$mostWonCount = 0;
$mostWonName = '';
$mostSpentCount = 0;
$mostSpentName = '';
$mostXPCount = 0;
$mostXPName = '';
$totalSales = 0;
date_default_timezone_set('America/New_York');
$serverTime = time();
$numUsers = 0;
while($numUsers < 10)
{
$showRow = 1;
$activeGames = rand(1,20);
$numUsers++;
$level = 'Recruit';
$lastTime = date('M-d H:i' , 1392246813);
$timeTest = 1392246813;
$totalGames = rand(50,100);
$totalPurchaseCount = 10;
$value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
$totalSales = $totalSales + $value;
$codeName = 'Sean'.rand(1,100);
if ($totalGames > $mostActiveCount)
{
$mostActiveCount = $totalGames;
$mostActiveName = $codeName;
}
$wins = rand(10,80);
if ($wins > $mostWonCount)
{
$mostWonCount = $wins;
$mostWonName = $codeName;
}
if ($value > $mostSpentCount)
{
$mostSpentCount = $value;
$mostSpentName = $codeName;
}
$xp = rand(100,1000);
if ($xp > $mostXPCount)
{
$mostXPCount = $xp;
$mostXPName = $codeName;
}
if (($serverTime - $timeTest > 1209600) AND $activeGames == 0 AND $totalPurchaseCount == 0)
{
}
else
{
//table data
$table = '';
$table = '<tr>';
$table .= '<td>'.$codeName.'</td>';
$table .= '<td>'.$level.'</td>';
$table .= '<td>'.number_format($xp , 0 , '.' , ',').'</td>';
$table .= '<td>'.$lastTime.'</td>';
$table .= '<td>'.$activeGames.'</td>';
$table .= '<td>'.$totalGames.'</td>';
$table .= '<td>'.$wins.'</td>';
$table .= '<td>'.number_format(rand(100,2000), 0 , '.' , ',').'</td>';
$table .= '<td>'.$totalPurchaseCount.'</td>';
$table .= '<td>$'.number_format($value , 2 , '.' , ',').'</td>';
$table .= '<td>'.rand(100,1000).'</td>';
$table .= '<td>'.rand(100,1000).'</td>';
$table .= '<td>'.rand(100,1000).'</td>';
$table .= '<td>'.rand(100,1000).'</td>';
$table .= '</tr>';
echo $table;
}
}
echo '</tbody></table>';
echo '</div>';
date_default_timezone_set('UTC');
$activeGames = 1000;
$completedGames = 5550;
$pendingGames = 200;
$usersDaily = 600;
$value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
$avgDailyValue = number_format(($value/$usersDaily) , 2 , '.' , ',');
$usersWeekly = 2000;
$value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
$avgWeeklyValue = number_format(($value/$usersWeekly) , 2 , '.' , ',');
$usersMonthly = 4000;
$value = 1 * 0.99 + 2 * 2.99 + 3 * 5.99 + 4 * 1.99;
$avgMonthlyValue = number_format(($value/$usersMonthly) , 2 , '.' , ',');
$adFreeCount = 750;
echo '<hr>';
echo '<div id="totalDiv" style="overflow-y:scroll; height:40%;">';
echo '<table id="totals">';
echo '<tr>
<td>Total Paid</td><td> '.$adFreeCount.'</td>';
echo '<td style="padding-left:150px;">Most active player </td><td> ' . $mostActiveName . ' with ' . $mostActiveCount . ' games played</td>';
echo '</tr>
<tr>';
echo '<td>Number of active games </td><td> ' . $activeGames . '</td>';
echo '<td style="padding-left:150px;">Player with the most wins </td><td> ' . $mostWonName . ' with ' . $mostWonCount . ' wins</td>';
echo '</tr>
<tr>';
echo '<td>Number of completed games </td><td> ' . $completedGames. '</td>';
echo '<td style="padding-left:150px;">Player with the most Skill Points </td><td> ' . $mostXPName . ' with ' . number_format($mostXPCount , 0 , '.' , ',') . ' Skill Points - Recruit</td>';
echo '</tr>
<tr>';
echo '<td>Number of pending games </td><td> ' . $pendingGames . '</td>';
echo '<td style="padding-left:150px;">Player with the highest amount spent </td><td> ' . $mostSpentName . ' with $' . $mostSpentCount . '</td>';
echo '</tr></table>';
echo '<div id="container">';
echo '<div id = "col1" class="column_n">';
echo '</br><table id="totals"><tr><th>User Type</th><th>Count</th><th>Average Gross</th><th>Average Net</th></tr>';
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>';
echo '</tr>
<tr>';
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>';
echo '</tr>
<tr>';
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>';
echo '</tr>
<tr>';
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>';
echo '</tr>';
echo '<tr><th>Total Sales</th><th style="text-align:center;">Gross</th><th style="text-align:center;">Net</th></tr>';
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>';
echo '</div>';
$num_ios = 10;
$num_android = 20;
$num_other = 30;
$num_ios_qr = 40;
$num_android_qr = 50;
$num_other_qr = 60;
echo '<div id ="col2" class="column_n">';
echo '</br><table id="totals">';
echo '<tr><th colspan="3" style="text-align:center;">Hits To Store Link</th></tr>';
echo '<tr><th>OS</th><th>In-App (Ad-Free)</th><th>QR Code</th></tr>';
echo '<tr>';
echo '<td>Andriod</td>';
echo '<td style="text-align:center;">' . $num_android . '</td>';
echo '<td style="text-align:center;">' . $num_android_qr . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>iOS</td>';
echo '<td style="text-align:center;">' . $num_ios . '</td>';
echo '<td style="text-align:center;">' . $num_ios_qr . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Other</td>';
echo '<td style="text-align:center;">' . $num_other . '</td>';
echo '<td style="text-align:center;">' . $num_other_qr . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Total</td>';
$sum = $num_android + $num_ios + $num_other;
echo '<td style="text-align:center;">' . $sum . '</td>';
$sum = $num_android_qr + $num_ios_qr + $num_other_qr;
echo '<td style="text-align:center;">' . $sum . '</td>';
echo '</tr>';
echo '</table>';
echo '</div>';
echo '</div>';
echo '</body></html>';
?>

Replies(6)

jakecigar

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

It would be easier to investigate the DOM with a live link. Can you share one?

JΛ̊KE

manns41078

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

Sure, good idea

http://wordspionagedb.com/dbstats_ts_help.php

jakecigar

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

To view this page, you must log in to area “stats” on www.wordspionagedb.com:80.

Name and Password?

JΛ̊KE

manns41078

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

Sorry about that, I had my js files in the protected directory. You should be good to go now. Note that my styles in the php file overrides the tablesorter styles for the header, so it might not look like you can click on the headers to sort, but you should be able to do so. Please let me know if there are any more problems.

Thanks!!

jakecigar

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

55% of whatever equals whatever. Your html and body height are not specified.

html,body{height:100%}

sets the html and body to whatever the window size is. Then 55% of that is a real number, not just whatever.

JΛ̊KE

manns41078

Re: tablesorter causes loss in div scroll overflow-y

9 years ago

You rock!

I wonder why that wasn't required before adding js to the page... anyway many html quirks will likely remain a mystery to me. Thanks a ton for your help!!

Top Reply

Response title

Attachments

jQuery Forum

tablesorter causes loss in div scroll overflow-y

Replies(6)

Re: tablesorter causes loss in div scroll overflow-y

Re: tablesorter causes loss in div scroll overflow-y

Re: tablesorter causes loss in div scroll overflow-y

Re: tablesorter causes loss in div scroll overflow-y

Re: tablesorter causes loss in div scroll overflow-y

Re: tablesorter causes loss in div scroll overflow-y

Statistics

Tags

Actions