Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #40413
| From | The Natural Philosopher <tnp@invalid.invalid> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: CSS scale transform using javascript? |
| Date | 2021-09-24 14:16 +0100 |
| Organization | A little, after lunch |
| Message-ID | <sikj3h$9ks$1@dont-email.me> (permalink) |
| References | (1 earlier) <6489e84a-404f-43a9-a7ed-ae97b000f86dn@googlegroups.com> <0445a89c-ccad-4689-8d7c-35d9278adfc3n@googlegroups.com> <f4d10a40-8f9d-4669-9440-97407335f855n@googlegroups.com> <d2d234d7-4322-46c8-889b-30d08e1f4f7en@googlegroups.com> <9f5ef984-0a89-4bc3-97d0-7a53a67bf3f7n@googlegroups.com> |
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)
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll 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