• CSS scale transform using javascript?

    From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 06:53:19 2021
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 07:01:27 2021
    torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall:
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 07:00:29 2021
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall:
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 07:37:17 2021
    torsdag 23 september 2021 kl. 16:01:34 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall:
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?
    <script>
    //function getResolution() {
    // dispWidth=screen.width;
    // dispHeight=screen.height;
    // }
    // getResolution();
    // resizedWidth=dispWidth/1920;
    // resizedHeight=dispHeight/1080;

    var bodyStyles = document.body.style;
    bodyStyles.setProperty('--scale', '0.5');

    </script>

    Is there a way to set scale of body like this?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 08:50:12 2021
    torsdag 23 september 2021 kl. 16:37:22 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:01:34 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall:
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?
    <script>
    //function getResolution() {
    // dispWidth=screen.width;
    // dispHeight=screen.height;
    // }
    // getResolution();
    // resizedWidth=dispWidth/1920;
    // resizedHeight=dispHeight/1080;

    var bodyStyles = document.body.style;
    bodyStyles.setProperty('--scale', '0.5');

    </script>

    Is there a way to set scale of body like this?

    Should not something like this work?

    <style>
    html {
    background: white;
    height: 100%;
    width: 100%;
    }
    </style>

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }

    getResolution();
    resizedWidth=300/1920;
    resizedHeight=dispHeight/1080;
    var htmlStyles = document.html.style; htmlStyles.setProperty('--scale',resizedWidth);
    </script>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Thu Sep 23 12:12:36 2021
    torsdag 23 september 2021 kl. 17:50:17 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:37:22 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:01:34 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall:
    One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?
    <script>
    //function getResolution() {
    // dispWidth=screen.width;
    // dispHeight=screen.height;
    // }
    // getResolution();
    // resizedWidth=dispWidth/1920;
    // resizedHeight=dispHeight/1080;

    var bodyStyles = document.body.style;
    bodyStyles.setProperty('--scale', '0.5');

    </script>

    Is there a way to set scale of body like this?
    Should not something like this work?

    <style>
    html {
    background: white;
    height: 100%;
    width: 100%;
    }
    </style>
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }

    getResolution();
    resizedWidth=300/1920;
    resizedHeight=dispHeight/1080;
    var htmlStyles = document.html.style; htmlStyles.setProperty('--scale',resizedWidth);
    </script>
    Or something building on this?
    <script>
    var sheet = document.createElement('style')
    sheet.innerHTML = "<style>html { background: white; height: "+resizedWidth+" width: "+resizedHeight+";}</style>";
    document.body.appendChild(sheet);
    </script>
    Unfortunately it does not work?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Fri Sep 24 14:16:33 2021
    On 23/09/2021 20:12, Jonas Thörnvall wrote:
    torsdag 23 september 2021 kl. 17:50:17 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:37:22 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:01:34 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall: >>>>>> One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?
    <script>
    //function getResolution() {
    // dispWidth=screen.width;
    // dispHeight=screen.height;
    // }
    // getResolution();
    // resizedWidth=dispWidth/1920;
    // resizedHeight=dispHeight/1080;

    var bodyStyles = document.body.style;
    bodyStyles.setProperty('--scale', '0.5');

    </script>

    Is there a way to set scale of body like this?
    Should not something like this work?

    <style>
    html {
    background: white;
    height: 100%;
    width: 100%;
    }
    </style>
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }

    getResolution();
    resizedWidth=300/1920;
    resizedHeight=dispHeight/1080;
    var htmlStyles = document.html.style;
    htmlStyles.setProperty('--scale',resizedWidth);
    </script>
    Or something building on this?
    <script>
    var sheet = document.createElement('style')
    sheet.innerHTML = "<style>html { background: white; height: "+resizedWidth+" width: "+resizedHeight+";}</style>";
    document.body.appendChild(sheet);
    </script>
    Unfortunately it does not work?



    Apologies for cutting and pasting but this is what I wrote to change
    video aspect ratios from 16:19 to 4:3


    Perhaps it helps?

    <script>
    var mux="";
    var streamID=0;
    var aspectRatio=1.77;
    var pip=false;
    var paused=false;

    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");
    // add fullscreen event listener to resize the video window back to what
    it should be
    // add event listenet to videoframe. element.addEventListener('fullscreenchange', (event) => {
    // document.fullscreenElement will point to the element that
    // is in fullscreen mode if there is one. If there isn't one,
    // the value of the property is null.
    if (!document.fullscreenElement)
    {
    video.style.height=508; // reset video height
    video.style.top=42; // and top
    video.style.left=(aspectRatio==1.77? 1:110); // and offset
    }
    });

    function fullScreen()
    {
    var width;
    var height;
    var aspect;
    var edge;
    var top;
    if (element.mozRequestFullScreen)
    {
    element.mozRequestFullScreen();
    }
    else if (element.webkitRequestFullScreen)
    {
    element.webkitRequestFullScreen();
    }

    width=window.screen.width;
    height=window.screen.height;
    aspect=width/height;
    top=0;
    // if aspect ratio is less than actual one, then we need to reduce the height, otherwise set it to full screen height
    if (aspect < aspectRatio)
    {
    height=width/aspectRatio;
    top=(window.screen.height-height)/2;
    }
    // now set the video element height...
    video.style.height=height;
    video.style.top=top;
    //now center the picture...
    edge=(width-height*aspectRatio)/2;
    if (edge>0)
    video.style.left=edge;
    }

    function changeAspectRatio()
    {
    aspectRatio=aspectRatio==1.77 ? 1.33:1.77;
    document.getElementById('aspect-ratio').innerHTML=(aspectRatio==1.77 ?"4:3":"16:9");
    video.className=(aspectRatio==1.77 ? "tv":"tvold");
    // sigh, we need to set offset too
    video.style.left=(aspectRatio==1.77 ?1:110);
    }


    --
    Religion is regarded by the common people as true, by the wise as
    foolish, and by the rulers as useful.

    (Seneca the Younger, 65 AD)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Fri Sep 24 06:58:50 2021
    fredag 24 september 2021 kl. 15:16:39 UTC+2 skrev The Natural Philosopher:
    On 23/09/2021 20:12, Jonas Thörnvall wrote:
    torsdag 23 september 2021 kl. 17:50:17 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:37:22 UTC+2 skrev Jonas Thörnvall:
    torsdag 23 september 2021 kl. 16:01:34 UTC+2 skrev Jonas Thörnvall: >>>> torsdag 23 september 2021 kl. 16:00:35 UTC+2 skrev Jonas Thörnvall: >>>>> torsdag 23 september 2021 kl. 15:53:24 UTC+2 skrev Jonas Thörnvall: >>>>>> One can't use javascript variables in CSS, but i read one can reach scale from javascript how would i do that?

    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;
    </script>

    <???style>
    html {
    transform: scale(resizedWidth,resizedHeight);

    }
    </style>
    Maybe i should just create strings dynamically and run?
    That work for javascript, but probably not for CSS?
    <script>
    //function getResolution() {
    // dispWidth=screen.width;
    // dispHeight=screen.height;
    // }
    // getResolution();
    // resizedWidth=dispWidth/1920;
    // resizedHeight=dispHeight/1080;

    var bodyStyles = document.body.style;
    bodyStyles.setProperty('--scale', '0.5');

    </script>

    Is there a way to set scale of body like this?
    Should not something like this work?

    <style>
    html {
    background: white;
    height: 100%;
    width: 100%;
    }
    </style>
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }

    getResolution();
    resizedWidth=300/1920;
    resizedHeight=dispHeight/1080;
    var htmlStyles = document.html.style;
    htmlStyles.setProperty('--scale',resizedWidth);
    </script>
    Or something building on this?
    <script>
    var sheet = document.createElement('style')
    sheet.innerHTML = "<style>html { background: white; height: "+resizedWidth+" width: "+resizedHeight+";}</style>";
    document.body.appendChild(sheet);
    </script>
    Unfortunately it does not work?

    Apologies for cutting and pasting but this is what I wrote to change
    video aspect ratios from 16:19 to 4:3


    Perhaps it helps?

    <script>
    var mux="";
    var streamID=0;
    var aspectRatio=1.77;
    var pip=false;
    var paused=false;

    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");
    // add fullscreen event listener to resize the video window back to what
    it should be
    // add event listenet to videoframe. element.addEventListener('fullscreenchange', (event) => {
    // document.fullscreenElement will point to the element that
    // is in fullscreen mode if there is one. If there isn't one,
    // the value of the property is null.
    if (!document.fullscreenElement)
    {
    video.style.height=508; // reset video height
    video.style.top=42; // and top
    video.style.left=(aspectRatio==1.77? 1:110); // and offset
    }
    });

    function fullScreen()
    {
    var width;
    var height;
    var aspect;
    var edge;
    var top;
    if (element.mozRequestFullScreen)
    {
    element.mozRequestFullScreen();
    }
    else if (element.webkitRequestFullScreen)
    {
    element.webkitRequestFullScreen();
    }

    width=window.screen.width;
    height=window.screen.height;
    aspect=width/height;
    top=0;
    // if aspect ratio is less than actual one, then we need to reduce the height, otherwise set it to full screen height
    if (aspect < aspectRatio)
    {
    height=width/aspectRatio;
    top=(window.screen.height-height)/2;
    }
    // now set the video element height...
    video.style.height=height;
    video.style.top=top;
    //now center the picture...
    edge=(width-height*aspectRatio)/2;
    if (edge>0)
    video.style.left=edge;
    }

    function changeAspectRatio()
    {
    aspectRatio=aspectRatio==1.77 ? 1.33:1.77; document.getElementById('aspect-ratio').innerHTML=(aspectRatio==1.77 ?"4:3":"16:9");
    video.className=(aspectRatio==1.77 ? "tv":"tvold");
    // sigh, we need to set offset too
    video.style.left=(aspectRatio==1.77 ?1:110);
    }


    --
    Religion is regarded by the common people as true, by the wise as
    foolish, and by the rulers as useful.

    (Seneca the Younger, 65 AD)

    I was hoping for something more compact, i know the native resolution i did go for so basicly i just need the "screen resolution" easily get by.
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();

    And then we calculate new scale using.

    resizedWidth=screenWidth/1920;
    resizedHeight=screenHeight/1080;

    So i have the scales wanted for screen, in resizedWidth and resizedHeight but how do i set the "CSS html?" scale using javascript.
    This is what i try to accomplish "but dynamic" and its "work great" but how do i "set" the scale for the html "object?" using javascript.
    html {
    transform: scale(0.5,0.7);
    }

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Fri Sep 24 16:15:05 2021
    On 24/09/2021 14:58, Jonas Thörnvall wrote:
    So i have the scales wanted for screen, in resizedWidth and resizedHeight but how do i set the "CSS html?" scale using javascript.

    I showed you in my example

    you find the element in the dom and set its width and height

    as in
    const element = document.getElementById("videoframe"); element.style.width=newWidth;
    element.style.height=newheight;

    and so on.
    That sets the elements size. If you want to e.g. scale a video to fit
    it, you need the element to have the CSS attribute 'object-fill' set to fill

    e.g.

    CSS
    .tv
    {
    position: absolute;
    left:1px;
    top: 42px;
    height: 508;
    aspect-ratio:1.77;
    object-fit:fill;
    }

    Or you could probably do that with JavasScript as

    element.style.object-fit="fill";

    As usual with CSS, browsers and JavaShite™ no two browsers respond to mixtures of 'aspect-ratio', 'height' and 'width' the same way, so it's
    wise to set them *all* up.




    --
    Those who want slavery should have the grace to name it by its proper
    name. They must face the full meaning of that which they are advocating
    or condoning; the full, exact, specific meaning of collectivism, of its
    logical implications, of the principles upon which it is based, and of
    the ultimate consequences to which these principles will lead. They must
    face it, then decide whether this is what they want or not.

    Ayn Rand.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Fri Sep 24 11:38:05 2021
    fredag 24 september 2021 kl. 17:15:10 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 14:58, Jonas Thörnvall wrote:
    So i have the scales wanted for screen, in resizedWidth and resizedHeight but how do i set the "CSS html?" scale using javascript.
    I showed you in my example

    you find the element in the dom and set its width and height

    as in
    const element = document.getElementById("videoframe"); element.style.width=newWidth;
    element.style.height=newheight;

    and so on.
    That sets the elements size. If you want to e.g. scale a video to fit
    it, you need the element to have the CSS attribute 'object-fill' set to fill

    e.g.

    CSS
    .tv
    {
    position: absolute;
    left:1px;
    top: 42px;
    height: 508;
    aspect-ratio:1.77;
    object-fit:fill;
    }

    Or you could probably do that with JavasScript as

    element.style.object-fit="fill";

    As usual with CSS, browsers and JavaShite™ no two browsers respond to mixtures of 'aspect-ratio', 'height' and 'width' the same way, so it's
    wise to set them *all* up.




    --
    Those who want slavery should have the grace to name it by its proper
    name. They must face the full meaning of that which they are advocating
    or condoning; the full, exact, specific meaning of collectivism, of its logical implications, of the principles upon which it is based, and of
    the ultimate consequences to which these principles will lead. They must face it, then decide whether this is what they want or not.

    Ayn Rand.
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Fri Sep 24 11:34:05 2021
    fredag 24 september 2021 kl. 17:15:10 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 14:58, Jonas Thörnvall wrote:
    So i have the scales wanted for screen, in resizedWidth and resizedHeight but how do i set the "CSS html?" scale using javascript.
    I showed you in my example

    you find the element in the dom and set its width and height

    as in
    const element = document.getElementById("videoframe"); element.style.width=newWidth;
    element.style.height=newheight;

    and so on.
    That sets the elements size. If you want to e.g. scale a video to fit
    it, you need the element to have the CSS attribute 'object-fill' set to fill

    e.g.

    CSS
    .tv
    {
    position: absolute;
    left:1px;
    top: 42px;
    height: 508;
    aspect-ratio:1.77;
    object-fit:fill;
    }

    Or you could probably do that with JavasScript as

    element.style.object-fit="fill";

    As usual with CSS, browsers and JavaShite™ no two browsers respond to mixtures of 'aspect-ratio', 'height' and 'width' the same way, so it's
    wise to set them *all* up.




    --
    Those who want slavery should have the grace to name it by its proper
    name. They must face the full meaning of that which they are advocating
    or condoning; the full, exact, specific meaning of collectivism, of its logical implications, of the principles upon which it is based, and of
    the ultimate consequences to which these principles will lead. They must face it, then decide whether this is what they want or not.

    Ayn Rand.

    I don't know what is the element .tv you seem to refer to?
    And there isn't exactly aspect ratios applied to displays/monitors, so why use it?
    It is a simple matter of divide the source implementation size to the correct scales of width and height to the display.

    Make a simple example using javascript, so i can see your approach work. Because i really can't see how your .tv differ from my Arnolds <styles> html{scale....} </styles> that really do work.
    But just as your in no viable via javascript, at least i have not found any examples of it.

    I just have a feeling that many of you make things more complex then they really are, Arnolds solution was great however it was not dynamical and maybe there is no dynamical solutions.

    You see i understand "html" and "body" as known style elements but where did you get .tv from?
    Is that part of CSS standard and defined as some sort of default object?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Sat Sep 25 09:50:48 2021
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.

    No, they are references to bits of code that I didn't post up. I assumed
    you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Sat Sep 25 09:49:16 2021
    On 24/09/2021 19:34, Jonas Thörnvall wrote:
    fredag 24 september 2021 kl. 17:15:10 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 14:58, Jonas Thörnvall wrote:
    So i have the scales wanted for screen, in resizedWidth and resizedHeight but how do i set the "CSS html?" scale using javascript.
    I showed you in my example

    you find the element in the dom and set its width and height

    as in
    const element = document.getElementById("videoframe");
    element.style.width=newWidth;
    element.style.height=newheight;

    and so on.
    That sets the elements size. If you want to e.g. scale a video to fit
    it, you need the element to have the CSS attribute 'object-fill' set to fill >>
    e.g.

    CSS
    .tv
    {
    position: absolute;
    left:1px;
    top: 42px;
    height: 508;
    aspect-ratio:1.77;
    object-fit:fill;
    }

    Or you could probably do that with JavasScript as

    element.style.object-fit="fill";

    As usual with CSS, browsers and JavaShite™ no two browsers respond to
    mixtures of 'aspect-ratio', 'height' and 'width' the same way, so it's
    wise to set them *all* up.




    --
    Those who want slavery should have the grace to name it by its proper
    name. They must face the full meaning of that which they are advocating
    or condoning; the full, exact, specific meaning of collectivism, of its
    logical implications, of the principles upon which it is based, and of
    the ultimate consequences to which these principles will lead. They must
    face it, then decide whether this is what they want or not.

    Ayn Rand.

    I don't know what is the element .tv you seem to refer to?

    you seem to not understand CSS classes.

    It is a CSS class definition so you can apply it to a HTML element

    And there isn't exactly aspect ratios applied to displays/monitors, so why use it?

    because aspect ratios apply to video content

    It is a simple matter of divide the source implementatio size to the correct scales of width and height to the display.
    well if all you want to do is fill the available space use
    "style=object-fit: fill;"

    Make a simple example using javascript, so i can see your approach work.
    I did

    Because i really can't see how your .tv differ from my Arnolds <styles> html{scale....} </styles> that really do work.
    But just as your in no viable via javascript, at least i have not found any examples of it.

    I just have a feeling that many of you make things more complex then they really are, Arnolds solution was great however it was not dynamical and maybe there is no dynamical solutions.

    I have you that yiu set height and width dymamically using the object properties style.height and style.,width


    You see i understand "html" and "body" as known style elements but where did you get .tv from?
    Is that part of CSS standard and defined as some sort of default object?

    I defined it

    Do you know any HTML or CSS or javascript at all?

    .tv in a style sheet allows me to declare an object like

    <div class="tv" id="mytv"> </div>

    then
    <script>
    tv1=getElementById("mytv");

    tv1.style.height=newHeight;
    tv1.style.width=newWidth;
    </script>

    will set the height and width of the element.
    If it contains a video, object-fit:fill means the video will be
    stretched to fit the element.





    --
    “it should be clear by now to everyone that activist environmentalism
    (or environmental activism) is becoming a general ideology about humans,
    about their freedom, about the relationship between the individual and
    the state, and about the manipulation of people under the guise of a
    'noble' idea. It is not an honest pursuit of 'sustainable development,'
    a matter of elementary environmental protection, or a search for
    rational mechanisms designed to achieve a healthy environment. Yet
    things do occur that make you shake your head and remind yourself that
    you live neither in Joseph Stalin’s Communist era, nor in the Orwellian utopia of 1984.”

    Vaclav Klaus

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 04:49:52 2021
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed
    you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    Ok i tested now your idea, just do not work it will not change the content witin a div to the hight and width.
    (between there is alot of divs canvas e t c witin the body)

    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 04:56:32 2021
    lördag 25 september 2021 kl. 13:49:57 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    Ok i tested now your idea, just do not work it will not change the content witin a div to the hight and width.
    (between there is alot of divs canvas e t c witin the body)

    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....
    Maybe just maybe i can make a innerHTML using a dynamic created string with the <style> html{transform: scale(x,y); }</style> and load it last in body.
    I think that is the only way, so a bit of string building, i have done it before so it will probably be allright although it is a style element.
    document.getElementById("PAD0").innerHTML=bigString[0];

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 05:13:14 2021
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed
    you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    This is how you solve things "clear, concise and compact" watch and learn ;) Convoluted shit gone.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    xScale=dispWidth/1920;
    yScale=dispHeight/1080;
    resString="<style>html {transform: scale("+xScale+","+yScale");}</style>";
    document.getElementById("resolution").innerHTML=resString;
    </script>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 04:27:41 2021
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed
    you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    What you posted is from "what i can get" just assign a value to a variable you call tv1, that will not change anything to the myTv element?
    Unless something like this would actually work.

    html.style.height=newHeight;
    html.style.width=newWidth;

    And i "guess" it will not but i will try it.
    I have no idea what your tv element is about, i need to scale "every element" within html page.
    I understand that your myTV may refer to a div.

    That you may try to put around it all "inside? outside?" body.
    But i don't think it will work anyhow but i will test that too.
    I tested yesterday and it did nothing but i will try again.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 05:18:29 2021
    lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    This is how you solve things "clear, concise and compact" watch and learn ;) Convoluted shit gone.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    xScale=dispWidth/1920;
    yScale=dispHeight/1080;
    resString="<style>html {transform: scale("+xScale+","+yScale");}</style>"; document.getElementById("resolution").innerHTML=resString;
    </script>
    Honestly i think i am border genius LoL

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 05:19:21 2021
    lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    This is how you solve things "clear, concise and compact" watch and learn ;) Convoluted shit gone.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    xScale=dispWidth/1920;
    yScale=dispHeight/1080;
    resString="<style>html {transform: scale("+xScale+","+yScale");}</style>"; document.getElementById("resolution").innerHTML=resString;
    </script>
    And it works ;)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 05:21:27 2021
    lördag 25 september 2021 kl. 14:19:26 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    This is how you solve things "clear, concise and compact" watch and learn ;)
    Convoluted shit gone.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    xScale=dispWidth/1920;
    yScale=dispHeight/1080;
    resString="<style>html {transform: scale("+xScale+","+yScale");}</style>"; document.getElementById("resolution").innerHTML=resString;
    </script>
    And it works ;)
    https://www.youtube.com/watch?v=1qNeGSJaQ9Q

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 05:22:40 2021
    lördag 25 september 2021 kl. 14:19:26 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 10:50:52 UTC+2 skrev The Natural Philosopher:
    On 24/09/2021 19:38, Jonas Thörnvall wrote:
    By the way what the fuck have
    const video = document.getElementById("videoplayer");

    const element = document.getElementById("videoframe");

    To do with it, you people just so convoluted in drivel to swallow any shit you learned.
    No, they are references to bits of code that I didn't post up. I assumed you would understand that.

    In fact I assumed you understood basic CSS HTML and javascript.
    It seems I was wrong, I apologise.,

    --
    How fortunate for governments that the people they administer don't think.

    Adolf Hitler
    This is how you solve things "clear, concise and compact" watch and learn ;)
    Convoluted shit gone.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    xScale=dispWidth/1920;
    yScale=dispHeight/1080;
    resString="<style>html {transform: scale("+xScale+","+yScale");}</style>"; document.getElementById("resolution").innerHTML=resString;
    </script>
    And it works ;)
    Thanks again Igor!, oh Arnold.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Sat Sep 25 15:08:21 2021
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....


    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons
    that sound good.

    Burton Hillis (William Vaughn, American columnist)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Sat Sep 25 14:39:25 2021
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";



    --
    “It is hard to imagine a more stupid decision or more dangerous way of
    making decisions than by putting those decisions in the hands of people
    who pay no price for being wrong.”

    Thomas Sowell

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 06:46:47 2021
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";



    --
    “It is hard to imagine a more stupid decision or more dangerous way of making decisions than by putting those decisions in the hands of people
    who pay no price for being wrong.”

    Thomas Sowell
    Yeah but it doesn't work....

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 11:39:46 2021
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Yeah i like it, better then mine i hope it works over all browsers.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    var xScale=dispWidth/220;
    var yScale=dispHeight/180;
    var dispScale = document.getElementsByTagName("BODY")[0]; dispScale.style.transform = "scale("+xScale+","+yScale+")";
    </script>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 11:32:29 2021
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)

    Yeah i tested by TagName[0] and it actually work, good!
    But i try to keep it none blackbox solutions, so i think i keep my solution.

    But then again i actually see a benefit with your solution, it do not need to transform the place it is viewed, so i will use it.
    Thanks Philosopher.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 11:46:13 2021
    lördag 25 september 2021 kl. 20:39:51 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Yeah i like it, better then mine i hope it works over all browsers.
    <script>
    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    getResolution();
    var xScale=dispWidth/220;
    var yScale=dispHeight/180;
    var dispScale = document.getElementsByTagName("BODY")[0]; dispScale.style.transform = "scale("+xScale+","+yScale+")";
    </script>
    Now when the solution so neat i may actually add sliders to zoom in.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Sat Sep 25 13:27:50 2021
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)
    This seem ok to me have to test on mobiles.

    function getResolution() {
    dispWidth=screen.width;
    dispHeight=screen.height;
    }
    function changeResolution() {
    getResolution();
    //if display higher then wide "mobiles?"
    if (dispWidth<dispHeight){
    var tempScale=dispWidth;
    dipsWidth=dispHeight;
    dispHeight=tempScale;
    }
    //rescale to display
    var xScale=dispWidth/1920;
    var yScale=dispHeight/1080;
    //Only if scale not native
    if(dispWidth!=1920 && dispHeight!=1080){
    var dispScale = document.getElementsByTagName("BODY")[0]; dispScale.style.transform = "scale("+xScale*0.96+","+yScale*0.95+")";
    }
    }
    changeResolution();
    </script>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Tue Sep 28 12:36:10 2021
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Just for fun i added sliders for scaling, but to be useful I should created another slider resolution for it "CSS" i used the midi i already had 0-127 so it isn't exactly finetuned zoomwise.
    But one wonder if one could keep them locked outside "the scaling document".

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Wed Sep 29 02:24:06 2021
    tisdag 28 september 2021 kl. 21:36:15 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Just for fun i added sliders for scaling, but to be useful I should created another slider resolution for it "CSS" i used the midi i already had 0-127 so it isn't exactly finetuned zoomwise.
    But one wonder if one could keep them locked outside "the scaling document".
    Well locked positonwise.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Wed Sep 29 11:52:21 2021
    On 29/09/2021 10:24, Jonas Thörnvall wrote:
    tisdag 28 september 2021 kl. 21:36:15 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher: >>> On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons >>> that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Just for fun i added sliders for scaling, but to be useful I should created another slider resolution for it "CSS" i used the midi i already had 0-127 so it isn't exactly finetuned zoomwise.
    But one wonder if one could keep them locked outside "the scaling document".
    Well locked positonwise.

    yes.
    essentially you are scaling with the above code the HTML entity called
    'BODY'

    You could create a <div ID ="SCALEME"> inside that and scale that using

    document.getElementById("SCALEME")

    instead.

    You need to read up on the DOM in Javascript. Eacg nested HTML object,
    is a Document Object Module and can be selected by name, tagname, ID or
    class. If that selects more than one, you get an array that you can loop through.

    Then everything inside the object is accessible by javascript.


    --
    All political activity makes complete sense once the proposition that
    all government is basically a self-legalising protection racket, is
    fully understood.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Wed Sep 29 04:21:56 2021
    onsdag 29 september 2021 kl. 12:52:30 UTC+2 skrev The Natural Philosopher:
    On 29/09/2021 10:24, Jonas Thörnvall wrote:
    tisdag 28 september 2021 kl. 21:36:15 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons
    that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Just for fun i added sliders for scaling, but to be useful I should created another slider resolution for it "CSS" i used the midi i already had 0-127 so it isn't exactly finetuned zoomwise.
    But one wonder if one could keep them locked outside "the scaling document".
    Well locked positonwise.

    yes.
    essentially you are scaling with the above code the HTML entity called 'BODY'

    You could create a <div ID ="SCALEME"> inside that and scale that using

    document.getElementById("SCALEME")

    instead.

    You need to read up on the DOM in Javascript. Eacg nested HTML object,
    is a Document Object Module and can be selected by name, tagname, ID or class. If that selects more than one, you get an array that you can loop through.

    Then everything inside the object is accessible by javascript.


    --
    All political activity makes complete sense once the proposition that
    all government is basically a self-legalising protection racket, is
    fully understood.
    i see a problem with the div tag as is, if you have a very big document with iframes it can be hard to keep track of closures. So when you try frame the region it might not frame the region you want.
    That problem never occure with named closures of tags like </html>

    And it is frustrating reading something like
    </div>
    </div>
    </div>
    As closure way below your actual <div id's>
    What did that one close....

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Jonas_Th=C3=B6rnvall?=@21:1/5 to All on Wed Sep 29 05:43:10 2021
    onsdag 29 september 2021 kl. 13:22:01 UTC+2 skrev Jonas Thörnvall:
    onsdag 29 september 2021 kl. 12:52:30 UTC+2 skrev The Natural Philosopher:
    On 29/09/2021 10:24, Jonas Thörnvall wrote:
    tisdag 28 september 2021 kl. 21:36:15 UTC+2 skrev Jonas Thörnvall:
    lördag 25 september 2021 kl. 16:08:27 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 14:46, Jonas Thörnvall wrote:
    lördag 25 september 2021 kl. 15:39:31 UTC+2 skrev The Natural Philosopher:
    On 25/09/2021 12:49, Jonas Thörnvall wrote:


    So far the only thing that will scale it uniformly is.

    html {
    transform: scale(0.5,0.7);
    }

    So maybe one should have a script that invoke different CSS files deipendent on resolution.
    It seem idiotic to me, but....

    var x = document.getElementsByTagName("HTML")[0];

    x.style.transform="scale(0.5,0.7)";

    Yeah but it doesn't work....

    It does, I tested it

    <!DOCTYPE html>
    <html>
    <body>

    <h3>A demonstration of how to access an HTML element</h3>

    <p>Click the button to scale the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var x = document.getElementsByTagName("BODY")[0];
    x.style.transform = "scale(0.5,1.3)";
    }
    </script>

    </body>
    </html>


    --
    There’s a mighty big difference between good, sound reasons and reasons
    that sound good.

    Burton Hillis (William Vaughn, American columnist)
    Just for fun i added sliders for scaling, but to be useful I should created another slider resolution for it "CSS" i used the midi i already had 0-127 so it isn't exactly finetuned zoomwise.
    But one wonder if one could keep them locked outside "the scaling document".
    Well locked positonwise.

    yes.
    essentially you are scaling with the above code the HTML entity called 'BODY'

    You could create a <div ID ="SCALEME"> inside that and scale that using

    document.getElementById("SCALEME")

    instead.

    You need to read up on the DOM in Javascript. Eacg nested HTML object,
    is a Document Object Module and can be selected by name, tagname, ID or class. If that selects more than one, you get an array that you can loop through.

    Then everything inside the object is accessible by javascript.


    --
    All political activity makes complete sense once the proposition that
    all government is basically a self-legalising protection racket, is
    fully understood.
    i see a problem with the div tag as is, if you have a very big document with iframes it can be hard to keep track of closures. So when you try frame the region it might not frame the region you want.
    That problem never occure with named closures of tags like </html>

    And it is frustrating reading something like
    </div>
    </div>
    </div>
    As closure way below your actual <div id's>
    What did that one close....
    Added scaling by scroll, will make select buttons for X, Y,LOCKED

    http://jtmidi.000webhostapp.com/

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to All on Wed Sep 29 15:04:14 2021
    On 29/09/2021 12:21, Jonas Thörnvall wrote:
    i see a problem with the div tag as is, if you have a very big document with iframes it can be hard to keep track of closures. So when you try frame the region it might not frame the region you want.
    That problem never occure with named closures of tags like </html>

    And it is frustrating reading something like
    </div>
    </div>
    </div>
    As closure way below your actual <div id's>
    What did that one close....

    If you use a decent editor to write your code, it will probably allow
    you to highlight which </div> applies to which <div>
    Or you can do what people have been doing for years, and indent your
    nests so that the start and end of each one are at their own indent levels

    <div>
    <div>
    </div>
    </div>

    Or comment them..


    <div><!-- start of div1 -->
    <div><!-- start of div2 -->
    </div><!-- end of div2 -->
    </div><!-- end of div1 -->


    There are many programming conventions that have arisen precisely to
    meet the problem you have elucidated.


    --
    A lie can travel halfway around the world while the truth is putting on
    its shoes.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)