Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40405 > unrolled thread

CSS scale transform using javascript?

Back to article view | Back to comp.lang.javascript

Contents

  CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 06:53 -0700
    Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 07:00 -0700
      Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 07:01 -0700
        Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 07:37 -0700
          Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 08:50 -0700
            Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-23 12:12 -0700
              Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-24 14:16 +0100
                Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-24 06:58 -0700
                  Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-24 16:15 +0100
                    Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-24 11:34 -0700
                      Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-25 09:49 +0100
                    Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-24 11:38 -0700
                      Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-25 09:50 +0100
                        Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 04:27 -0700
                        Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 04:49 -0700
                          Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 04:56 -0700
                          Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-25 14:39 +0100
                            Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 06:46 -0700
                              Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-25 15:08 +0100
                                Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 11:32 -0700
                                Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 11:39 -0700
                                  Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 11:46 -0700
                                Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 13:27 -0700
                                Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-28 12:36 -0700
                                  Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-29 02:24 -0700
                                    Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-29 11:52 +0100
                                      Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-29 04:21 -0700
                                        Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-29 05:43 -0700
                                        Re: CSS scale transform using javascript? The Natural Philosopher <tnp@invalid.invalid> - 2021-09-29 15:04 +0100
                        Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 05:13 -0700
                          Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 05:18 -0700
                          Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 05:19 -0700
                            Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 05:21 -0700
                            Re: CSS scale transform using javascript? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-09-25 05:22 -0700

Page 1 of 2  [1] 2  Next page →

#40405 — CSS scale transform using javascript?

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>

[toc] | [next] | [standalone]

#40406

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?

[toc] | [prev] | [next] | [standalone]

#40407

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?

[toc] | [prev] | [next] | [standalone]

#40408

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?

[toc] | [prev] | [next] | [standalone]

#40409

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>

[toc] | [prev] | [next] | [standalone]

#40412

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?

[toc] | [prev] | [next] | [standalone]

#40413

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)

[toc] | [prev] | [next] | [standalone]

#40415

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);
}

[toc] | [prev] | [next] | [standalone]

#40421

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.

[toc] | [prev] | [next] | [standalone]

#40426

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?

[toc] | [prev] | [next] | [standalone]

#40428

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

[toc] | [prev] | [next] | [standalone]

#40427

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.

[toc] | [prev] | [next] | [standalone]

#40429

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

[toc] | [prev] | [next] | [standalone]

#40430

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.

[toc] | [prev] | [next] | [standalone]

#40431

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

[toc] | [prev] | [next] | [standalone]

#40432

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

[toc] | [prev] | [next] | [standalone]

#40438

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

[toc] | [prev] | [next] | [standalone]

#40439

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

[toc] | [prev] | [next] | [standalone]

#40440

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)

[toc] | [prev] | [next] | [standalone]

#40441

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.

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web