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





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]
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 May 3 2024, 03:13 PM
Post #2


Advanced Member
****

Group: Members
Posts: 109
Joined: 25-December 22
Member No.: 28,719
Alright, let's talk CSS. Follow along with the bouncing ball at:
https://cutcodedown.com/for_others/cartoony/scoreboard.css

External stylesheets exist for a reason, use them. As hard fast rule 100% of the time you see a <style> tag and over 90% of the time you see style="" you're looking at code written by people who never learned enough HTML to be using CSS yet. Just as how if you see people choosing their HTML tags, classes, or ID's based on what they want things to look like, they have utterly and completely failed to divine HTML's purpose.

HTML exists to say what things ARE. Grammatically, structurally, organizationally. Its tags have meanings to that end... this is a heading, this sub-heading starts a subsection of the heading preceding it. This is a grammatical paragraph. This is a table of data where the rows and columns have related meanings / organizations.

That's all done so that the user-agent (UA) can best convey that meaning to ALL users, not just the magically perfectly sighted sitting at a high resolution screen. Braille, speech, search, tty -- all valid targets for HTML that don't give a flying purple fish about what things look like.

Which is why CSS is separate from HTML and should be applied separately. You may have noticed in the markup I put:

CODE

<link rel="stylesheet" href="scoreboard.css" media="screen">


That media="screen" is important. It says "this style is for just screen" and thus other user-agents (A browser is a UA but a UA isn't always a browser) won't waste time loading it. Having all the appearance in an external style also means that it can be cached when / if your markup changes.

Another advantage of which being that no other files -- CSS, JavaScript, Images, fonts, etc, etm -- will start loading until after the HTML has finished loading. Thus the more we can move out of the HTML the faster the page. The same can be said of the scripting as by not having to even think about what things look in our JS, we end up with smaller easier to maintain scripting. This applies to server-side languages as well making less to wade through as a developer, and less crap for the server to sit there gluing together into our final markup.

Basically, anyone telling you to put appearance in the HTML is an incompetent jackass talking out their backside, in desperate need of a quadruple helping of sierra tango foxtrot uniform.

And yes I realize that means 99.99% of all "framework" users and creators. There's a reason I call Adam Wathan -- creator of Tailwind -- a fraud and predator! No matter how many witless hapless gormless clueless fanboys refuse to admit what total freaking suckers they are.

Anyhow...

I start out loading the webfont. Some older UA's will ignore it if they're not first, though honestly that's not really a valid concern in any browser made in this decade. I still put it first out of habit.

Next I have a reset. Resets exist because what things look like by default is none of HTML's business, and thus early on browser makers didn't agree on what the defaults were. Likewise some properties -- flex-grow for example -- have inconsistent starting values thanks to changes to the specification between draft and recommendation... and other newer behaviors -- like box-sizing:border-box -- make life easier if we just throw them at everything.

There are larger resets that honestly give resets a bad name. Wasting time setting and changing values that don't need to be messed with. These bloated resets -- like Eric Meyer's "reset reloaded" -- actually gave resets such a bad name many developers refuse to use them altogether instead dealign with the problems on a case-by-case basis as they arise.

Likewise we have smaller miniscule resets like the so-called "universal reset" of

CODE

* { border:0; margin:0; padding:0; }


But that can wreak havoc trying to style certain form elements consistently across different browser engines. Firefox in particular can be a real pisser about htat.

The reset I use is a nice safe middle ground. A compromise between what is inconsistent across browsers, values I find handy to set up ahead of time, but going NO further.

Something a lot of people don't realize is that the HTML tag is actually a rendered element. I leverage this to center <body> using flex-box, so we don't need to slop and extra DIV into the HTML.

CODE

html {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    background:linear-gradient(135deg, #06C, #048);
    color:#FFF;
}


Flex it, center it, colour it. The 100% height actually triggers overblow behavior would/should our content get bigger than the window.

CODE

body {
    width:100%;
    max-width:32em;
    margin:auto;
    font-size:clamp(9px, min(2.95vw, 3vh), 1.5rem);
    line-height:1.5;
    font-family:sans-serif;
    border:0.0625em solid #0008;
    box-shadow:0.25em 0.25rem 1em #0008;
}

By default a flex-child will shrink to fit its content. Here I want it to fill out to 32em, but still shrink to smaller than that if we have to. Thus 100% width with a max-width restriction. The auto-margin makes sure that there's scrolling and proper centering should the window just be too small for the table, whilst -- as I mentioned a post or two ago -- using a clamped font-size and "EM" for everything else on the page (instead of the garbage "px" measurement that has no business being used on websites) allows it all to scale. From there it's just some border and shadow to make it purty.

The main heading descripting the ENTIRE page (what H1 MEANS):
CODE

h1 {
    padding:0.25em;
    font-size:2em;
    text-align:center;
    background:linear-gradient(175deg, #89A 15%, #FFF 45% 60%, #8A9    85%);
    border-bottom:0.0625em solid #000;
    color:#000;
}


Doesn't get too complex. Big font, center it, pad it, put a metallic-like gradient behind it, and a border.

The MAIN tag as .scoreCard is where things get interesting.
CODE

.scoreCard {
    display:grid;
    width:100%;
    max-width:32em;
    padding:1em 1em 2em;
    gap:1.5em 0.5em;
    grid-template-areas:
        "wickets    total   overs"
        "targets    total   runsreq"
        "batanumber empty   batbnumber"
        "lastwkt    pship   lastman";
    text-align:center;
    background:linear-gradient(135deg, #333 20%, #111);
}


Display:grid allows us to create table-like layouts irregardless of what the actual HTML is. This only further enhances what we can do in terms of layout and design without compromising the entire reason HTML exists.

In FF it tries to shrink on some devices (firefox on mobile is utter trash, probably why they're fading into obscurity) so I set the same width values as the BODY tag yet again. Padding is pretty straightforward, and "gap" sets the distance between elemetns in a flex or grid container. In this case I put tall vertical gaps and narrower on the horizontal.

Remember (or if you're just learning) CSS properties like gap, padding, margin, and border-width all take values in a clockwise order starting at the top. If a value is missing from the end, the one on the opposite side of the "clock" is used.

grid-template-areas allows us to arrange our "grid" however we like, we just need to assign grid-area names to each of our subsections. We literally just say the names we assign to create our pattern which... well, is about as slick as slick gets. Even more fun the elements do NOT even have to be in the same order in the HTML as we lay them out!

I also felt like extending total down to the batNumber properties was a bit of a wonk, so I used generated content to make a fake "empty" element.

CODE

.scoreCard:before {
    content:"";
    grid-area:empty;
}

.total      { grid-area:total; }
.wickets    { grid-area:wickets; }
.overs      { grid-area:overs; }
.target1    { grid-area:targets; }
.runsreq    { grid-area:runsreq; }
.batanumber { grid-area:batanumber; }
.batbnumber { grid-area:batbnumber; }
.lastwkt    { grid-area:lastwkt; }
.pship      { grid-area:pship; }
.lastman    { grid-area:lastman; }


The labels I make flex containers and remove their BR. Those breaks were there for non-screen users so it's not a run-on sentence. We are using other style here to accomplish the same purpose. Using grid just makes it easier to align and size their content.

CODE
.scoreCard label {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5em;
    font-weight:bold;
    text-transform:uppercase;
    text-shadow:0.0625em 0.125em 0.125em #000;
}

.scoreCard br {
    display:none; /* the BR are there for non-screen users */
}


The left and right top areas I push down sightly so their label text is better aligned with "TOTAL"

CODE
.wickets,
.overs {
    padding-top:0.25em;
}


Total of course getting a font-size bump and alignment to the top of its container.

CODE

.scoreCard .total {
    font-size:1.5em;
    justify-content:start;
}


Finally we have our OUTPUT tags, which again represent JavaScript output of calculated values.

CODE

.scoreCard output {
    padding:0 0.125em;
    font:normal 2.5em/1em interface,monospace;
    text-align:right;
    background:linear-gradient(135deg, #321, #000);
    border:0.0625em solid;
    border-color:#000 #FFF2 #FFF3 #000;
    color:#FC0;
    text-shadow:
        -0.0625em 0 0.25em #FC0A,
        0.0625em 0 0.25em #FC0A;
}


by upping the font-size we increase all of our relational measurements. That's why EM is superior to garbage like pixels. From there it's jsut some fancy colouration.

A cute "trick" I use is to use generated content to fill it up with the number 8 so that it looks like an unlit segmented display:

CODE

.scoreCard output:before {
    content:"8888";
    display:block;
    margin-bottom:-1em;
    color:#420;
    text-shadow:none;
}


Because we have a 1EM line-height set on output and a monospace font, setting it to block and using a negative margin slides the actual content text up over this background finishing the illusion of how a real-world display looks.

Shadows, borders, and gradients all helping it look like a real display. I may have gone a little overboard on that, but going overboard with using CSS to make semi-realistic looking devices is one of my hobbies, and I was having fun.

See, FUN!
https://cutcodedown.com/for_others/medium_a...d/calc.app.html

It's scary how far you can take it now without resorting to images. Only image on that calculator is the tablecloth texture. There are entire clubs of designers now priding themselves on creating near photorealistic things using nothing more than HTML and CSS.

Anyhow continuing our journey the two sections that have two outputs each:
CODE

.scoreCard .batanumber,
.scoreCard .batbnumber {
    flex-direction:row;
    flex-wrap:wrap;
}

.scoreCard .batanumber output:first-of-type,
.scoreCard .batbnumber output:first-of-type {
    font-size:1.5em;
}


I switched the flex-direction and set up flex-wrapping, shrinking the first output's size by setting a smaller font-size. The larger second output then automagically wraps down to its own line, completing the layout.

Again, I know this looks complicated. But take your time, digest, and play around with it. You have questions, you know where to find me.

Hope this all helps.
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
2 User(s) are reading this topic (2 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: 17th May 2024 - 05:08 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC