What's new

Welcome to the forum 👋, Visitor

To access the forum content and all our services, you must register or log in to the forum. Becoming a member of the forum is completely free.

Force a table to rezise to fill screen

Cartoony

New member
Joined
Apr 20, 2024
Messages
3
Reaction score
0
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
I can't post the code here as it's >10000 charachers, will try in a reply
 
first 1/2 of code

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>
 
Second 1/2 of code

Code:
<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">&nbsp;</h2></th>
                    <th colspan="3" align="center" valign="middle"><h2 align="center">&nbsp;</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">&nbsp;</h2></th>
                    <th colspan="3" align="center" valign="middle"><h2 align="center">&nbsp;</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">&nbsp;</h2></th>
                    <th width="17%" align="center" valign="middle"><h2 align="center">&nbsp;</h2></th>
                    <th width="17%" align="center" valign="middle"><h2 align="center">&nbsp;</h2></th>
                    <th width="17%" align="center" valign="middle"><h2 align="center">&nbsp;</h2></th>
                    <th width="17%" align="center" valign="middle"><h2 align="center">&nbsp;</h2></th>
                    <th width="16%" align="center" valign="middle"><h2 align="center">&nbsp;</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>&nbsp;</td>
                    <td  class="digit" id=target2>&nbsp;</td>
                      
                      
                  </tr>

</table>
</center>
</body>
</html>
 
You have this on your computer already? If you want to view this on the iPhone or some sumsung pantech android cell phone, it is programmed automatically by Java programming methods. Not need to go into that here. But easily done using parameters. screen size. So this is seen automatically to fit the screen in your iPhone. Not need to touch any html language.

For example: I'm learning java programming also. getWidth() and getHeight() methods are parameters used in Java to set your html language programmed, to a specific iPhone size or android phone to a specific size. And that's how they do it. How they fit tables on your cell phones.
 
Last edited:

Theme customization system

You can customize some areas of the forum theme from this menu.

  • Wide/Narrow view

    You can control a structure that you can use to use your theme wide or narrow.

    Grid view forum list

    You can control the layout of the forum list in a grid or ordinary listing style structure.

    Picture grid mode

    You can control the structure where you can open/close images in the grid forum list.

    Close sidebar

    You can get rid of the crowded view in the forum by closing the sidebar.

    Fixed sidebar

    You can make it more useful and easier to access by pinning the sidebar.

    Close radius

    You can use the radius at the corners of the blocks according to your taste by closing/opening it.

  • Choose the color combination that reflects your taste
    Background images
    Color gradient backgrounds
Back