Last century I wrote a website that uses frames. (Main navigation on the left,alphabet search on top, and a main content frame below). The design is out dated, and should probably one day be rewritten in flexbox or Grid. But this is not the primary motivation for this question. I also need to add a little more history. The site’s html is still functional with modern browser, but suffers from being trapped in the post CRT monitor revolution in which screens larger than 1024 pixels once unimaginable, are now common place. The site has many low res images/formatting tricks due to being created in the days of dailup 56k internet. If I load the site in a 1920w monitor it looks crap, but if I create an additional frameset and load the site into a right frame no bigger than 1024 px the site works with a sense of what it looked like in the past. My goal is to modify the content of the original site (c1999-2023) as little as possible.

The problem:
I am trying to create a client side script that automatically detects a users monitor size and writes a frameset (or something – DIV CSS?) with three columns. A central column of 1024px and columns to the left and right of the central that are 1/2 the size of the remaining space.

<script>
function calculatePercentage(part, total) { 
    return (part / total) * 100; 
} 

function round(
  value,
  minimumFractionDigits,
  maximumFractionDigits
) {
  const formattedValue = value.toLocaleString('en', {
    useGrouping: false,
    minimumFractionDigits,
    maximumFractionDigits
  })
  return Number(formattedValue)
}

let part = ([window.innerWidth-1024]/+2);
let max = 1024; 
let ttotal = (window.innerWidth);
let percentageC = calculatePercentage(max, ttotal);
let percentageS = calculatePercentage(part, ttotal);
let v = [(100-[round(percentageC,0,0)])/2]+ "%";
let w = round(percentageC,0,0) + "%";
let columns = [v,w,v];
</script>
``
Below is the output I am hoping to insert into the frameset, but expressed as a document.write test statement;

document.write(‘cols=’+'”‘+(columns)+'”‘+’>’);

Below is the result:

cols=”22.5%,55%,22.5%”>
“
The insert target is a Frameset HTML that looks like this:

<frameset cols="22.5%,55%,22.5%">
<frame src="right.htm" name="right" frameborder="0" scrolling="no" marginwidth="0" marginheight="0">
<frame src="centre.htm" name="centre" frameborder="0" scrolling="no" marginwidth="0" marginheight="0">
<frame src="left.htm" name="left" frameborder="0" scrolling="no" marginwidth="0" marginheight="0">

(with: “cols=”22.5%,55%,22.5%” entered manually).

By standing on the shoulders of giants:

A have been able to come up with a script that redirects monitors less than 1024 to the original web frameset and redirects them to the original index page.

I have a script (above) that detects a users monitor size subtracts 1024 from total screen width: divides that figure by 2: and, outputs the three column sizes as a percentage (to no more than 1 decimal place so that the total of the 3 columns always adds up to 100.

What I can not do is insert this information into a frameset that will then auto load the three columns.
The script works,it will display if inserted into a normal HTML page but can not get anywhere with a frameset. I have two possible ways to proceed (I sure that 20 years ago a could get a browser to document.write into a frameset page?)

use an id tag and reload the page, but I can not see how to use this without the requirement to manually post a form?

reload the page and get the variable to persist and write the function preloaded into a cols destination of a frameset on another page?

However I am not confident that these approaches will work.

This is the redirect script for low res monitors and an early discontinued attempt at resolving the problem

<script>
if (screen.width <= 1024) {
document.location = "control.html"
<!--
else
      function myFunction() {
  let num = ([window.innerWidth-1024]/2);
   } 
-->
  </script>