CSS scale transform using javascript?

84 views
Skip to first unread message

Jonas Thörnvall

unread,
Sep 23, 2021, 9:53:24 AMSep 23
to
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>

Jonas Thörnvall

unread,
Sep 23, 2021, 10:00:35 AMSep 23
to
Maybe i should just create strings dynamically and run?

Jonas Thörnvall

unread,
Sep 23, 2021, 10:01:34 AMSep 23
to
That work for javascript, but probably not for CSS?

Jonas Thörnvall

unread,
Sep 23, 2021, 10:37:22 AMSep 23
to
<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?

Jonas Thörnvall

unread,
Sep 23, 2021, 11:50:17 AMSep 23
to
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>

Jonas Thörnvall

unread,
Sep 23, 2021, 3:12:41 PMSep 23
to
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?

The Natural Philosopher

unread,
Sep 24, 2021, 9:16:39 AMSep 24
to
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)

Jonas Thörnvall

unread,
Sep 24, 2021, 9:58:56 AMSep 24
to
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);
}


The Natural Philosopher

unread,
Sep 24, 2021, 11:15:10 AMSep 24
to
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.

Jonas Thörnvall

unread,
Sep 24, 2021, 2:34:10 PMSep 24
to
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?

Jonas Thörnvall

unread,
Sep 24, 2021, 2:38:10 PMSep 24
to
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.

The Natural Philosopher

unread,
Sep 25, 2021, 4:49:22 AMSep 25
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

The Natural Philosopher

unread,
Sep 25, 2021, 4:50:52 AMSep 25
to
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

Jonas Thörnvall

unread,
Sep 25, 2021, 7:27:45 AMSep 25
to
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.




Jonas Thörnvall

unread,
Sep 25, 2021, 7:49:57 AMSep 25
to
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....

Jonas Thörnvall

unread,
Sep 25, 2021, 7:56:37 AMSep 25
to
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];

Jonas Thörnvall

unread,
Sep 25, 2021, 8:13:19 AMSep 25
to
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>

Jonas Thörnvall

unread,
Sep 25, 2021, 8:18:34 AMSep 25
to
Honestly i think i am border genius LoL

Jonas Thörnvall

unread,
Sep 25, 2021, 8:19:26 AMSep 25
to
lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:
And it works ;)

Jonas Thörnvall

unread,
Sep 25, 2021, 8:21:32 AMSep 25
to

Jonas Thörnvall

unread,
Sep 25, 2021, 8:22:45 AMSep 25
to
Thanks again Igor!, oh Arnold.

The Natural Philosopher

unread,
Sep 25, 2021, 9:39:31 AMSep 25
to
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

Jonas Thörnvall

unread,
Sep 25, 2021, 9:46:52 AMSep 25
to
Yeah but it doesn't work....

The Natural Philosopher

unread,
Sep 25, 2021, 10:08:27 AMSep 25
to
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)

Jonas Thörnvall

unread,
Sep 25, 2021, 2:32:34 PMSep 25
to
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.

Jonas Thörnvall

unread,
Sep 25, 2021, 2:39:51 PMSep 25
to
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>

Jonas Thörnvall

unread,
Sep 25, 2021, 2:46:17 PMSep 25
to
Now when the solution so neat i may actually add sliders to zoom in.

Jonas Thörnvall

unread,
Sep 25, 2021, 4:27:55 PMSep 25
to
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>

Jonas Thörnvall

unread,
Sep 28, 2021, 3:36:15 PMSep 28
to
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".

Jonas Thörnvall

unread,
Sep 29, 2021, 5:24:12 AMSep 29
to
Well locked positonwise.

The Natural Philosopher

unread,
Sep 29, 2021, 6:52:30 AMSep 29
to
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.

Jonas Thörnvall

unread,
Sep 29, 2021, 7:22:01 AMSep 29
to
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....

Jonas Thörnvall

unread,
Sep 29, 2021, 8:43:15 AMSep 29
to
Added scaling by scroll, will make select buttons for X, Y,LOCKED

http://jtmidi.000webhostapp.com/

The Natural Philosopher

unread,
Sep 29, 2021, 10:04:22 AMSep 29
to
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.
Reply all
Reply to author
Forward
0 new messages