The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Force a table to rezise to fill screen, Force a table to rezise to fill screen
Cartoony
post 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]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Jason Knight
post Apr 21 2024, 06:30 AM
Post #2


Advanced Member
****

Group: Members
Posts: 109
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Cartoony   Force a table to rezise to fill screen   Apr 20 2024, 02:19 AM
Christian J   What I want to to is make the table fit on (or ev...   Apr 20 2024, 03:25 PM
Cartoony   What I want to to is make the table fit on (or e...   Apr 21 2024, 08:53 AM
Jason Knight   I'd have to see the data plugged into that tab...   Apr 21 2024, 06:30 AM
Cartoony   I'd have to see the data plugged into that ta...   Apr 21 2024, 08:50 AM
Jason Knight   Sadly your .zip download expired before I even not...   May 2 2024, 07:49 AM
Jason Knight   I went ahead and did a rewrite based on the site y...   May 3 2024, 08:48 AM
Jason Knight   Alright, insomnia so let be break down how this wo...   May 3 2024, 02:15 PM
Jason Knight   Alright, let's talk CSS. Follow along with the...   May 3 2024, 03:13 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 1st June 2024 - 06:44 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC