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

Groups > comp.lang.javascript > #40428

Re: CSS scale transform using javascript?

Show all headers | View raw

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

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