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

Groups > comp.lang.javascript > #40415

Re: CSS scale transform using javascript?

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web