 Force a table to rezise to fill screen, Force a table to rezise to fill screen |
  |
| Cartoony |
 Apr 20 2024, 02:19 AM
Post
#1
|
|
Group: Members Posts: 5 Joined: 27-September 23 Member No.: 29,062  |
I have the following code which displays a scoreboard. I didn't write the original code, I just rearranged the table & added a few additiona elements
This will be viewed on a phone What I want to to is make the table fit on (or even better, fill) the page I can specify a width of, say, 95% which is fine, but on some phones that means the bottom of the table is off the page & you have to scroll. I'd like to make it have a height of 95% too but when I change width to height at line 100 ot does make the table narrower but it's still off the page Can someone please help me make this table adjust to fit the screen [code] <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <link rel="stylesheet" type="text/css" href="./css/spectatornobordersmassive.css"> <script src="./jquery/jquery-3.5.1.min.js"></script> <!--<script src="./jquery/jquery.mobile-1.3.0.min.js"></script> <script src="./jquery/mobiscroll.custom-2.4.4.min.js"></script> --> <script type="text/javascript"> $(function() { getStatus(); }); function getStatus() { $fileName = "score.json?date=" + new Date().toLocaleString(); //ask for the score.json file generated by updateSpectator.php. Include the date to stop the browser caching an old copy $.getJSON($fileName, function(data) { //check if the batsman numbers are set, if they are lets show them! // if (data.batanumber == null) // { // document.getElementById("batANumber").className = "batsman_letter"; // document.getElementById("batBNumber").className = "batsman_letter"; // document.getElementById("batANumber").innerHTML="A"; // document.getElementById("batBNumber").innerHTML="B"; // } // else { document.getElementById("batANumber").innerHTML=formatDigits(data.batanumber); document.getElementById("batBNumber").innerHTML=formatDigits(data.batbnumber); document.getElementById("batANumber").className = "batsman_digit"; document.getElementById("batBNumber").className = "batsman_digit"; } document.getElementById("batAScore").innerHTML=formatDigits(data.bata); document.getElementById("batBScore").innerHTML=formatDigits(data.batb); document.getElementById("total").innerHTML=formatDigits(data.total); document.getElementById("overs").innerHTML=formatDigits(data.overs); document.getElementById("wickets").innerHTML=formatDigits(data.wickets); document.getElementById("runsreq").innerHTML=formatDigits(data.runsreq); document.getElementById("lastman").innerHTML=formatDigits(data.lastman); document.getElementById("lastwkt").innerHTML=formatDigits(data.lastwkt); document.getElementById("pship").innerHTML=formatDigits(data.pship); //NEW TR re additional data //document.getElementById("runsreq").innerHTML=formatDigits(data.runsreq); //document.getElementById("lastman").innerHTML=formatDigits(data.lastman); //document.getElementById("lastwkt").innerHTML=formatDigits(data.lastwkt); //document.getElementById("pship").innerHTML=formatDigits(data.pship); //END TR re additional data //check to see if duckworth lewis exists, as this affects the layout. // if(data.dltarget == null) // {/ // document.getElementById("target2Heading").className = "noborder"; // document.getElementById("target2Heading").innerHTML=""; // document.getElementById("target2").className = "noborder"; // document.getElementById("target2").innerHTML=""; // document.getElementById("target1").innerHTML=formatDigits(data.target); // document.getElementById("dl").innerHTML=formatDigits(data.dltarget); // } // else { document.getElementById("target2Heading").className = "noborder"; document.getElementById("target2Heading").innerHTML=""; document.getElementById("target2").className = "noborder"; document.getElementById("target2").innerHTML=""; document.getElementById("target1").innerHTML=formatDigits(data.target); document.getElementById("dl").innerHTML=formatDigits(data.dltarget); } }); setTimeout("getStatus()",10000); //rerun the function every 10 seconds (including loading the score.json file) } function formatDigits(digits) { var returnStr=""; //split the value into its digit parts, as we want to strip the dashes digitArray=digits.split(""); for (i=0; i<digitArray.length; i++) { //ignore this digit if it is a dash if (digitArray[i] != "-") { returnStr=returnStr.concat(digitArray[i]); } } // if the input was all dashes, then lets return a 0 if (returnStr==""){ returnStr="0"; } return returnStr; } </script> </head> <body> <center> <table width="95%" id="topRow"> <tr class="rowpad"> <th colspan="6" align="center" valign="middle"><h2 align="center">Total</h2></th> </tr> <tr class="rowpad"> <td colspan="6" align="center" valign="middle" class="digit" id=total ><h2 align="center">-</h2></td> </tr> <tr class="rowpad"> </tr> <tr class="rowpad"> <th colspan="3" align="center" valign="middle"><div align="center"></div></th> <th colspan="3" align="center" valign="middle" id=dlHeading2><div align="center"></div></th> </tr> <tr class="rowpad"> <th colspan="3" align="center" valign="middle"><h2 align="center">Wickets</h2></th> <th colspan="3" align="center" valign="middle" id=dlHeading><h2 align="center">Overs</h2></th> </tr> <tr class="rowpad"> <td colspan="3" align="center" valign="middle" class="digit" id=wickets ><h2 align="center">-</h2></td> <td colspan="3" align="center" valign="middle" class="digit" id=overs><h2 align="center">-</h2></td> </tr> <th colspan="3" align="center" valign="middle"><h2 align="center"> </h2></th> <th colspan="3" align="center" valign="middle"><h2 align="center"> </h2></th> <tr class="rowpad"> <th colspan="3" align="center" valign="middle" id=target1Heading><h2 align="center">Target</h2></th> <th colspan="3" align="center" valign="middle"><h2 align="center">Runs Req</h2></th> </tr> <tr class="rowpad"> <td colspan="3" align="center" valign="middle" class="digit" id=target1><h2 align="center">-</h2></td> <td colspan="3" align="center" valign="middle" class="digit" id=runsreq><h2 align="center">-</h2></td> </tr> <th colspan="3" align="center" valign="middle"><h2 align="center"> </h2></th> <th colspan="3" align="center" valign="middle"><h2 align="center"> </h2></th> <tr class="rowpad"> <th colspan="2" align="right" valign="middle" ><h3 align="center">Bat No</h3></th> <td align="left" valign="top" class="batsman_digit" id=batANumber><h2 align="center">-</h2></td> <th colspan="2" align="right" valign="middle" ><h3 align="center">Bat No</h3></th> <td align="left" valign="top" class="batsman_digit" id=batBNumber><h2 align="center">-</h2></td> </tr> <tr class="rowpad"> <td colspan="3" align="center" valign="middle" class="batscore_digit" id=batAScore><h2 align="center">-</h2></td> <td colspan="3" align="center" valign="middle" class="batscore_digit" id=batBScore><h2 align="center">-</h2></td> </tr> <th width="16%" align="center" valign="middle"><h2 align="center"> </h2></th> <th width="17%" align="center" valign="middle"><h2 align="center"> </h2></th> <th width="17%" align="center" valign="middle"><h2 align="center"> </h2></th> <th width="17%" align="center" valign="middle"><h2 align="center"> </h2></th> <th width="17%" align="center" valign="middle"><h2 align="center"> </h2></th> <th width="16%" align="center" valign="middle"><h2 align="center"> </h2></th> <tr class="rowpad"> <th colspan="2" align="center" valign="middle"><h3 align="center">Last Wkt</h3></th> <th colspan="2" align="center" valign="middle" ><h3 align="center">Pship</h3></th> <th colspan="2" align="center" valign="middle" ><h3 align="center">Last Man</h3></th> </tr> <tr class="rowpad"> <td colspan="2" align="center" valign="middle" class="batscore_digit" id=lastwkt><h2 align="center">-</h2></td> <td colspan="2" align="center" valign="middle" class="batscore_digit" id=pship><h2 align="center">-</h2></td> <td colspan="2" align="center" valign="middle" class="batscore_digit" id=lastman><h2 align="center">-</h2></td> </tr> <tr> <td id=target2Heading> </td> <td class="digit" id=target2> </td> </tr> </table> </center> </body> </html> [code] |
  |
 
|
| Christian J |
Apr 20 2024, 03:25 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,663 Joined: 10-August 06 Member No.: 7 |
QUOTE(Cartoony @ Apr 20 2024, 09:19 AM)  What I want to to is make the table fit on (or even better, fill) the page This will only work if the CODE body {margin: 0; padding: 0;} table {width: 100vw; height: 100vh;} (the "vw" and "vh" units mean viewport percentage width and height, respectively). It may also help to put CODE <!doctype html> at the top of the HTML file, right before the <html> start tag, and CODE <meta name="viewport" content="width=device-width"> in the HEAD section of the page. There may or may not be other issues with the code, I just took a quick glance. Much of the table content seems to be pulled from a database(?) and is thus not visible in the code example, and I don't know what the external JS and CSS files contain. This post has been edited by Christian J: Apr 21 2024, 06:45 AM |
|
|
|
| Jason Knight |
Apr 21 2024, 06:30 AM
Post
#3
|
|
Advanced Member Group: Members Posts: 104 Joined: 25-December 22 Member No.: 28,719 |
I'd have to see the data plugged into that table to truly weigh in, but the simple fact is a lot of tabular data is not practical to show on smaller displays. Period. Do not pass go, do not collect $500 in human-malware relief.
That said, there are so many warning signs all across that code of outdate, outmoded, and even insecure practices. From innerHTML or remote content, to jQuery (sucker-bait that should never have even existed), brute force getting elements every blasted time, static scripting in the <head> where it could fail and isn't cached... But the markup? ouch. Tags and attributes that haven't even EXISTED in HTML for 27 year? Numbered headings inside table cells? Missing opening <tr>? I'd toss that entire mess and start over with code for this century. I'd be willing to help with that if I could see the data and page in question. |
|
|
|
| Cartoony |
Apr 21 2024, 08:50 AM
Post
#4
|
|
Group: Members Posts: 5 Joined: 27-September 23 Member No.: 29,062 |
QUOTE(Jason Knight @ Apr 21 2024, 12:30 PM) I'd have to see the data plugged into that table to truly weigh in, but the simple fact is a lot of tabular data is not practical to show on smaller displays. Period. Do not pass go, do not collect $500 in human-malware relief. That said, there are so many warning signs all across that code of outdate, outmoded, and even insecure practices. From innerHTML or remote content, to jQuery (sucker-bait that should never have even existed), brute force getting elements every blasted time, static scripting in the <head> where it could fail and isn't cached... But the markup? ouch. Tags and attributes that haven't even EXISTED in HTML for 27 year? Numbered headings inside table cells? Missing opening <tr>? I'd toss that entire mess and start over with code for this century. I'd be willing to help with that if I could see the data and page in question. This is a project that was started by others many years ago and coded by amateurs (you can tell, right!). It's published here: https://buildyourownscoreboard.wordpress.com/ it's for a cricket scoreboard and is completely not for profit. It's not connected to the Internet. A Pi runs a Web server and the scorer connects to it over WiFi and has a html interface for doing the scoring. The Pi sends the data to an Arduino which controls shift register chips that turn LEDs on & off to display the digits on the scoreboard. I have hacked around in the code and added more variables but fundamentally it's still the original amateur code. TBH starting again would definitely be good but it would be a huge task and I'm sure I have no idea where to start. A zip of the whole lot is in this zip https://we.tl/t-DSQDDxgy1h but as you'll see it's a right mess. That said it does work. You're advice would be appreciated but I'm well out of my depth rewriting it. |
|
|
|
| Cartoony |
Apr 21 2024, 08:53 AM
Post
#5
|
|
Group: Members Posts: 5 Joined: 27-September 23 Member No.: 29,062 |
QUOTE(Christian J @ Apr 20 2024, 09:25 PM) QUOTE(Cartoony @ Apr 20 2024, 09:19 AM) What I want to to is make the table fit on (or even better, fill) the page This will only work if the CODE body {margin: 0; padding: 0;} table {width: 100vw; height: 100vh;} (the "vw" and "vh" units mean viewport percentage width and height, respectively). It may also help to put CODE <!doctype html> at the top of the HTML file, right before the <html> start tag, and CODE <meta name="viewport" content="width=device-width"> in the HEAD section of the page. There may or may not be other issues with the code, I just took a quick glance. Much of the table content seems to be pulled from a database(?) and is thus not visible in the code example, and I don't know what the external JS and CSS files contain. Thanks for taking the time to look & reply. Please see my response to the next post, all the code is in the zip file which is probably easier than me trying to explain something I'm not that familiar with! |
|
|
|
| Jason Knight |
Yesterday, 07:49 AM
Post
#6
|
|
Advanced Member Group: Members Posts: 104 Joined: 25-December 22 Member No.: 28,719 |
Sadly your .zip download expired before I even noticed you replied. :/
|
|
|
|
|
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 3rd May 2024 - 08:34 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC