Force a table to rezise to fill screen, Force a table to rezise to fill screen |
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
|
Newbie Group: Members Posts: 12 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] |
Lo-Fi Version | Time is now: 4th June 2024 - 10:04 PM |