CSS scale transform using javascript?

[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>

[Jonas Thörnvall]

Maybe i should just create strings dynamically and run?

[Jonas Thörnvall]

That work for javascript, but probably not for CSS?

[Jonas Thörnvall]

<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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Honestly i think i am border genius LoL

[Jonas Thörnvall]

lördag 25 september 2021 kl. 14:13:19 UTC+2 skrev Jonas Thörnvall:

And it works ;)

[Jonas Thörnvall]

https://www.youtube.com/watch?v=1qNeGSJaQ9Q

[Jonas Thörnvall]

Thanks again Igor!, oh Arnold.

[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

[Jonas Thörnvall]

Yeah but it doesn't work....

[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)

[Jonas Thörnvall]

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]

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]

Now when the solution so neat i may actually add sliders to zoom in.

[Jonas Thörnvall]

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]

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]

Well locked positonwise.

[The Natural Philosopher]

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]

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]

Added scaling by scroll, will make select buttons for X, Y,LOCKED

http://jtmidi.000webhostapp.com/

[The Natural Philosopher]

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.