Rocksolid Light

Welcome to novaBBS (click a section below)

mail  files  register  newsreader  groups  login

Message-ID:  

There are never any bugs you haven't found yet.


devel / alt.html / Re: Change a CSS style definition from an onclick() javascript command

SubjectAuthor
* Change a CSS style definition from an onclick() javascript commandJanis Papanagnou
`* Re: Change a CSS style definition from an onclick() javascript commandJukka K. Korpela
 `* Re: Change a CSS style definition from an onclick() javascript commandJanis Papanagnou
  `* Re: Change a CSS style definition from an onclick() javascript commandJukka K. Korpela
   `* Re: Change a CSS style definition from an onclick() javascript commandJanis Papanagnou
    `* Re: Change a CSS style definition from an onclick() javascript commandJonathan N. Little
     `* Re: Change a CSS style definition from an onclick() javascript commandJanis Papanagnou
      +- Re: Change a CSS style definition from an onclick() javascript commandJanis Papanagnou
      `* Re: Change a CSS style definition from an onclick() javascript commandJonathan N. Little
       `- Re: Change a CSS style definition from an onclick() javascript commandJanis Papanagnou

1
Change a CSS style definition from an onclick() javascript command

<unm3bk$2g5q7$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=768&group=alt.html#768

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Change a CSS style definition from an onclick() javascript command
Date: Wed, 10 Jan 2024 13:42:27 +0100
Organization: A noiseless patient Spider
Lines: 22
Message-ID: <unm3bk$2g5q7$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Wed, 10 Jan 2024 12:42:28 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="55b486c2407816f2cd887dba4584e77c";
logging-data="2627399"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/rStVRE1jMnBTrF5aOnjNV"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:StORcZKFRwsh8ve94NncpF7dGDc=
X-Enigmail-Draft-Status: N1110
X-Mozilla-News-Host: news://news.eternal-september.org:119
 by: Janis Papanagnou - Wed, 10 Jan 2024 12:42 UTC

In a HTML source I have a style definition, say

<style type="text/css">
img { max-width: 50px; }
</style>

and a lot of <img> elements (in a <table> in the <body> of the file).

I want to change the value of 'max-width' for all images, ideally just
by changing the _single_ CSS value in the <style> definition (if that
is possible). It shall be triggered by a click on a the table, say, by
something (informally and obviously incorrectly written) like

<table onclick="document.querySelector('img').style.maxWidth='100px'">

How would such a Javascript command look like to work correctly? (If
that is possible in the first place.) - Or better use other methods?
Or do I have to individually change each <img> separately, maybe?

Thanks.

Janis

Re: Change a CSS style definition from an onclick() javascript command

<unmupl$ein9$9@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=769&group=alt.html#769

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: jukk...@gmail.com (Jukka K. Korpela)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Wed, 10 Jan 2024 22:30:25 +0200
Organization: A noiseless patient Spider
Lines: 34
Message-ID: <unmupl$ein9$9@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 7bit
Injection-Date: Wed, 10 Jan 2024 20:30:45 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="38e7dbb91c24d445e949bc0eb5ff701c";
logging-data="477929"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX19pgM7DR9Rtm0UzRqoqWdXR"
User-Agent: Mozilla Thunderbird
Cancel-Lock: sha1:A6YAbZGkukvlPYF63UmRd+pxMNw=
In-Reply-To: <unm3bk$2g5q7$1@dont-email.me>
 by: Jukka K. Korpela - Wed, 10 Jan 2024 20:30 UTC

Janis Papanagnou wrote:

> I want to change the value of 'max-width' for all images, ideally just
> by changing the _single_ CSS value in the <style> definition (if that
> is possible). It shall be triggered by a click on a the table, say, by
> something (informally and obviously incorrectly written) like
>
> <table onclick="document.querySelector('img').style.maxWidth='100px'">
>
> How would such a Javascript command look like to work correctly?

Your code is formally correct but does not do what you want. By
definition, querySelector() returns the first element that matches the
selector given as the argument. So the code changes the width property
of the first img element.

To change them all, use the querySelectorAll() function, which returns
the list of all elements that match the selector.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

You then need a little more code to iterate over that list, e.g.

<script>
function xpand() {
const images = document.querySelectorAll('img');
images.forEach((image) => {
image.style.maxWidth='100px'
})
}
</script>

<table onclick="xpand()">

Re: Change a CSS style definition from an onclick() javascript command

<unnhme$2ndq0$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=770&group=alt.html#770

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Thu, 11 Jan 2024 02:53:17 +0100
Organization: A noiseless patient Spider
Lines: 47
Message-ID: <unnhme$2ndq0$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Thu, 11 Jan 2024 01:53:18 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="c7e918239294720802583eb3348dd83d";
logging-data="2864960"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18zsEBgUv7aKuVSWNYOR1QA"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:wh00BHGbR2SVzLfpk4yPThKOfxU=
X-Enigmail-Draft-Status: N1110
In-Reply-To: <unmupl$ein9$9@dont-email.me>
 by: Janis Papanagnou - Thu, 11 Jan 2024 01:53 UTC

On 10.01.2024 21:30, Jukka K. Korpela wrote:
> Janis Papanagnou wrote:
>
>> I want to change the value of 'max-width' for all images, ideally just
>> by changing the _single_ CSS value in the <style> definition (if that
>> is possible). It shall be triggered by a click on a the table, say, by
>> something (informally and obviously incorrectly written) like
>>
>> <table onclick="document.querySelector('img').style.maxWidth='100px'">
>>
>> How would such a Javascript command look like to work correctly?
>
> Your code is formally correct but does not do what you want. By
> definition, querySelector() returns the first element that matches the
> selector given as the argument. So the code changes the width property
> of the first img element.
>
> To change them all, use the querySelectorAll() function, which returns
> the list of all elements that match the selector.
> https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
>
> You then need a little more code to iterate over that list, e.g.
>
> <script>
> function xpand() {
> const images = document.querySelectorAll('img');
> images.forEach((image) => {
> image.style.maxWidth='100px'
> })
> }
> </script>
>
>
> <table onclick="xpand()">
>

Ah, okay. And it works well. Thanks!

So I also assume from that that we can't just change the single
CSS style attribute definition by Javascript to change all the
<img> elements, and that this iteration over all <img>es is
unavoidable, probably because the <style> elements are just
accessed once before building the DOM, and only in the DOM we
can change the attribute values? - Is that assumption correct?

Janis

Re: Change a CSS style definition from an onclick() javascript command

<unpcg6$ein9$10@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=771&group=alt.html#771

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: jukk...@gmail.com (Jukka K. Korpela)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Thu, 11 Jan 2024 20:36:34 +0200
Organization: A noiseless patient Spider
Lines: 32
Message-ID: <unpcg6$ein9$10@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Injection-Date: Thu, 11 Jan 2024 18:36:55 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="8546838510882daf5b2d54999dfa99f9";
logging-data="477929"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18DVTquNoSuHA5izpvG9/ZN"
User-Agent: Mozilla Thunderbird
Cancel-Lock: sha1:RW3dcaTDcxjYQ8qPQmhlIiw+Ypw=
In-Reply-To: <unnhme$2ndq0$1@dont-email.me>
 by: Jukka K. Korpela - Thu, 11 Jan 2024 18:36 UTC

Janis Papanagnou wrote:

> So I also assume from that that we can't just change the single
> CSS style attribute definition by Javascript to change all the
> <img> elements,

We can. It's just not practical as a rule.

> and that this iteration over all <img>es is
> unavoidable,

Applying something to all img elements is essentially iterative anyway,
though the iterative process can be hidden syntactically.

> probably because the <style> elements are just
> accessed once before building the DOM, and only in the DOM we
> can change the attribute values? - Is that assumption correct?

It seems that changing the content of a <style> element with client-side
JavaScript changes the rendering. I haven’t checked what the “HTML
standard” says about it. Anyway, it’s clumsier. In JS, you can access
the <style> element as text, but there are no built−in tools for
operating on it structurally.

A very trivial example, based on the assumption that you just want to
replace the contents of the first <style> element with something else:

function chg() {
document.getElementsByTagName('style')[0].innerHTML =
'img { max-width: 100px; }';
}

Re: Change a CSS style definition from an onclick() javascript command

<unr3o9$3e0lc$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=772&group=alt.html#772

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Fri, 12 Jan 2024 11:19:53 +0100
Organization: A noiseless patient Spider
Lines: 80
Message-ID: <unr3o9$3e0lc$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
Injection-Date: Fri, 12 Jan 2024 10:19:53 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="417e1a7fb570f8b318fbb924ea847318";
logging-data="3605164"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+Pi91/Q/Go8sA7JRpkISvs"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:5U+ItTUV8qGKFWWVpvbIRGSEug8=
In-Reply-To: <unpcg6$ein9$10@dont-email.me>
X-Enigmail-Draft-Status: N1110
 by: Janis Papanagnou - Fri, 12 Jan 2024 10:19 UTC

On 11.01.2024 19:36, Jukka K. Korpela wrote:
> Janis Papanagnou wrote:
>
>> So I also assume from that that we can't just change the single
>> CSS style attribute definition by Javascript to change all the
>> <img> elements,
>
> We can. It's just not practical as a rule.

The motivation for my question was that I naturally use a CSS style
definition to avoid specifying the specific attributes with every
single <img> individual attributes. My hope way that this simple
segregation of duties between CSS and HTML could be also reflected
in case of changes done through Javascript.

>
>> and that this iteration over all <img>es is
>> unavoidable,
>
> Applying something to all img elements is essentially iterative anyway,
> though the iterative process can be hidden syntactically.

Indeed I have not expected that the many attribute changes would
magically vanish, but that it's done implicitly by the browser's
rendering engine. If I switch to explicit DOM manipulations (with
the Javascript loop) this gets then explicit by the JS application.

In other words, I would have found it conceptionally cleaner, and
I could also have imagined that it might be a bit more performant
to let the rendering engine do the task (the loop) implicitly.

So far my thoughts.

>
>> probably because the <style> elements are just
>> accessed once before building the DOM, and only in the DOM we
>> can change the attribute values? - Is that assumption correct?
>
> It seems that changing the content of a <style> element with client-side
> JavaScript changes the rendering. I haven’t checked what the “HTML
> standard” says about it. Anyway, it’s clumsier. In JS, you can access
> the <style> element as text, but there are no built−in tools for
> operating on it structurally.
>
> A very trivial example, based on the assumption that you just want to
> replace the contents of the first <style> element with something else:
>
> function chg() {
> document.getElementsByTagName('style')[0].innerHTML =
> 'img { max-width: 100px; }';
> }

Yes, this is indeed quite an ugly construct. My hope was that the
attribute can be changed with cleaner syntax (as opposed to defining
a complete new string as innerHTML).

So if that's the other choice, I also prefer the explicit JS loop.
I'll stay with your previously suggested method.

The complete application (to toggle the image sizes) became

<script>
var w = [ 50, 75, 100 ];
var h = [ 30, 45, 60 ];
var size = 0;
function switch_size() {
const images = document.querySelectorAll('img');
size = (size+1)%3;
images.forEach((image) => {
image.style.maxWidth = w[size];
image.style.maxHeight = h[size];
})
}
</script>

Thanks for the insights and additional explanations that you provided!

Janis

Re: Change a CSS style definition from an onclick() javascript command

<uoe8h5$37eg6$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=773&group=alt.html#773

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!news.1d4.us!news.samoylyk.net!peer.alt119.net!usenet.goja.nl.eu.org!weretis.net!feeder8.news.weretis.net!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: lws4...@gmail.com (Jonathan N. Little)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Fri, 19 Jan 2024 11:37:55 -0500
Organization: LITTLE WORKS STUDIO
Lines: 91
Message-ID: <uoe8h5$37eg6$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
<unr3o9$3e0lc$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 7bit
Injection-Date: Fri, 19 Jan 2024 16:37:57 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="c0a786154aee315c246b633319c12bd5";
logging-data="3389958"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/qe0EluwKujPO6dhbdv7j9Rth8Z7m/6cs="
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101
Firefox/91.0 SeaMonkey/2.53.18.1
Cancel-Lock: sha1:Kk6zn2gHvPqNd//EbH0T2iFApcY=
In-Reply-To: <unr3o9$3e0lc$1@dont-email.me>
X-Face: o[H8T0h*NGH`K`P)s+4PmYlcy|GNl`~+L6Fi.m:%15m[c%{C7V-ump|WiCYPkQ+hFJhq;XW5^1Rg_El'"fE$~AcYW$Pq\yeh9K_-dJqlQ5\y2\;[yw5DYCtOtsf_.TUy}0U\oL^>[3Y#{AP2^o'bG`bwj`]]UNpCxY\(~xK9b+uZKxrb*4-rkD+
X-Dan: Yes Dan this is a Winbox
 by: Jonathan N. Little - Fri, 19 Jan 2024 16:37 UTC

Janis Papanagnou wrote:
> On 11.01.2024 19:36, Jukka K. Korpela wrote:
>> Janis Papanagnou wrote:
>>
>>> So I also assume from that that we can't just change the single
>>> CSS style attribute definition by Javascript to change all the
>>> <img> elements,
>>
>> We can. It's just not practical as a rule.
>
> The motivation for my question was that I naturally use a CSS style
> definition to avoid specifying the specific attributes with every
> single <img> individual attributes. My hope way that this simple
> segregation of duties between CSS and HTML could be also reflected
> in case of changes done through Javascript.
>
>>
>>> and that this iteration over all <img>es is
>>> unavoidable,
>>

No not really. Here is one way:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>Change the container</title>

<style>
.small img {
max-width: 50px;
}

.medium img {
max-width: 100px;
}

.large img {
max-width: 150px;
}
</style>
</head>

<body>

<table id="image_container" class="small">
<tr>
<td><img src="sample.jpg" alt="sample"></td>
</tr>
<tr>
<td><img src="sample.jpg" alt="sample"></td>
</tr>
<tr>
<td><img src="sample.jpg" alt="sample"></td>
</tr>
<tr>
<td><img src="sample.jpg" alt="sample"></td>
</tr>
<tr>
<td><img src="sample.jpg" alt="sample"></td>
</tr>
</table>

<script>
let state = 0;
const sizes = ['small', 'medium', 'large'];
const last = 3
const container = document.getElementById('image_container');

function resize() {
const pointer = (++state) % last;
container.className = sizes[pointer];
}

container.addEventListener('click', resize);
</script>
</body>

</html>

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Change a CSS style definition from an onclick() javascript command

<uoimhr$488k$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=774&group=alt.html#774

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Sun, 21 Jan 2024 10:01:46 +0100
Organization: A noiseless patient Spider
Lines: 132
Message-ID: <uoimhr$488k$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
<unr3o9$3e0lc$1@dont-email.me> <uoe8h5$37eg6$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sun, 21 Jan 2024 09:01:47 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="dae7586a16c8109b6517664a61acee68";
logging-data="139540"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+vMwCgoTMxopFS+rCEtgmR"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:myHu5sJDpDvSfGwzZFb59FCaNfo=
In-Reply-To: <uoe8h5$37eg6$1@dont-email.me>
X-Enigmail-Draft-Status: N1110
 by: Janis Papanagnou - Sun, 21 Jan 2024 09:01 UTC

On 19.01.2024 17:37, Jonathan N. Little wrote:
> Janis Papanagnou wrote:
>> On 11.01.2024 19:36, Jukka K. Korpela wrote:
>>> Janis Papanagnou wrote:
>>>
>>>> So I also assume from that that we can't just change the single
>>>> CSS style attribute definition by Javascript to change all the
>>>> <img> elements,
>>>
>>> We can. It's just not practical as a rule.
>>
>> The motivation for my question was that I naturally use a CSS style
>> definition to avoid specifying the specific attributes with every
>> single <img> individual attributes. My hope way that this simple
>> segregation of duties between CSS and HTML could be also reflected
>> in case of changes done through Javascript.
>>
>>>
>>>> and that this iteration over all <img>es is
>>>> unavoidable,
>>>
>
> No not really. Here is one way:

Thanks for this variant and for the code sample! - It's actually
how I hoped to be able to change all the sizes by changing one
property.

I have two questions on that variant, a technical and a design
question...

First; initially I had problems incorporating that pattern into
my code. I got a null pointer error with this part:
const container = document.getElementById('image_container');
The reason was probably because I'm used to collect JS <script>
code at the beginning of the HTML files in the <head> section.
After relocating it to the end of the <body> it seemed to work.
Is this script code placement mandatory (to make that pattern
work) or is there some way to keep it at the top of the HTML
file?
Previously I had the getElementById() call within the function
so that it was non-null when called; the disadvantage was that
it's called with every click. (Not really an issue since it's
not time critical as it's called once and only during a slow
user interaction.)

And second; is there some kind of design convention what sort
of solution is preferable; iteration over all images, or change
of the class attribute (with one static getElementById()), or
change of the class attribute (with dynamic getElementById()?
I'm not sure whether there are such conventions; to me it seems
that there's so many different variants possible and used. But
sometimes there's some hidden advantages or caveats that I'm
not aware of (I have no deep insights in that matter), so I am
asking for insights and experiences.

Thanks.

Janis

> <!DOCTYPE html>
> <html lang="en">
>
> <head>
> <meta charset="utf-8">
>
> <title>Change the container</title>
>
> <style>
> .small img {
> max-width: 50px;
> }
>
> .medium img {
> max-width: 100px;
> }
>
> .large img {
> max-width: 150px;
> }
> </style>
> </head>
>
> <body>
>
> <table id="image_container" class="small">
> <tr>
> <td><img src="sample.jpg" alt="sample"></td>
> </tr>
> <tr>
> <td><img src="sample.jpg" alt="sample"></td>
> </tr>
> <tr>
> <td><img src="sample.jpg" alt="sample"></td>
> </tr>
> <tr>
> <td><img src="sample.jpg" alt="sample"></td>
> </tr>
> <tr>
> <td><img src="sample.jpg" alt="sample"></td>
> </tr>
> </table>
>
> <script>
> let state = 0;
> const sizes = ['small', 'medium', 'large'];
> const last = 3
> const container = document.getElementById('image_container');
>
> function resize() {
> const pointer = (++state) % last;
> container.className = sizes[pointer];
> }
>
> container.addEventListener('click', resize);
> </script>
> </body>
>
> </html>
>
>
>
>
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIO
> http://www.LittleWorksStudio.com
>

Re: Change a CSS style definition from an onclick() javascript command

<uoio40$4g5e$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=775&group=alt.html#775

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Sun, 21 Jan 2024 10:28:32 +0100
Organization: A noiseless patient Spider
Lines: 36
Message-ID: <uoio40$4g5e$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
<unr3o9$3e0lc$1@dont-email.me> <uoe8h5$37eg6$1@dont-email.me>
<uoimhr$488k$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sun, 21 Jan 2024 09:28:32 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="dae7586a16c8109b6517664a61acee68";
logging-data="147630"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+8NaRukxYkBCcEv7vxciM8"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:8WmYTJaAMUYN43wbr89PYufImH0=
In-Reply-To: <uoimhr$488k$1@dont-email.me>
 by: Janis Papanagnou - Sun, 21 Jan 2024 09:28 UTC

On 21.01.2024 10:01, Janis Papanagnou wrote:
> On 19.01.2024 17:37, Jonathan N. Little wrote:
>>
>> No not really. Here is one way:
>
> Thanks for this variant and for the code sample! - It's actually
> how I hoped to be able to change all the sizes by changing one
> property.

Based on Jonathan's suggestion my current version now looks like

...
.small img { max-width: 50px; max-height: 30px; }
.medium img { max-width: 75px; max-height: 45px; }
.large img { max-width:100px; max-height: 60px; }
</style>

<script>
const sizes = [ 'small', 'medium', 'large' ];
var size = 0;
function switch_size() {
size = (size+1)%3;
document.getElementById('images').className = sizes[size];
}
</script>
</head>

<body>
<table id="images" class="small" ... onclick="switch_size()">
...

Works nicely. :-)

Janis

Re: Change a CSS style definition from an onclick() javascript command

<uoje3j$7rv3$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=776&group=alt.html#776

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: lws4...@gmail.com (Jonathan N. Little)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Sun, 21 Jan 2024 10:43:46 -0500
Organization: LITTLE WORKS STUDIO
Lines: 106
Message-ID: <uoje3j$7rv3$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
<unr3o9$3e0lc$1@dont-email.me> <uoe8h5$37eg6$1@dont-email.me>
<uoimhr$488k$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sun, 21 Jan 2024 15:43:47 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="0a45684b79ceae8f70eafe0af91c35bd";
logging-data="258019"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+K5WOHp6RlJ6AO4Sh+jO1F1O3p1nXW5CQ="
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101
Firefox/91.0 SeaMonkey/2.53.18.1
Cancel-Lock: sha1:5SUAIdTU3GqebYa0TS68khkpQUo=
In-Reply-To: <uoimhr$488k$1@dont-email.me>
X-Dan: Yes Dan this is a Winbox
X-Face: o[H8T0h*NGH`K`P)s+4PmYlcy|GNl`~+L6Fi.m:%15m[c%{C7V-ump|WiCYPkQ+hFJhq;XW5^1Rg_El'"fE$~AcYW$Pq\yeh9K_-dJqlQ5\y2\;[yw5DYCtOtsf_.TUy}0U\oL^>[3Y#{AP2^o'bG`bwj`]]UNpCxY\(~xK9b+uZKxrb*4-rkD+
 by: Jonathan N. Little - Sun, 21 Jan 2024 15:43 UTC

Janis Papanagnou wrote:
> On 19.01.2024 17:37, Jonathan N. Little wrote:
>> Janis Papanagnou wrote:
>>> On 11.01.2024 19:36, Jukka K. Korpela wrote:
>>>> Janis Papanagnou wrote:
>>>>
>>>>> So I also assume from that that we can't just change the single
>>>>> CSS style attribute definition by Javascript to change all the
>>>>> <img> elements,
>>>>
>>>> We can. It's just not practical as a rule.
>>>
>>> The motivation for my question was that I naturally use a CSS style
>>> definition to avoid specifying the specific attributes with every
>>> single <img> individual attributes. My hope way that this simple
>>> segregation of duties between CSS and HTML could be also reflected
>>> in case of changes done through Javascript.
>>>
>>>>
>>>>> and that this iteration over all <img>es is
>>>>> unavoidable,
>>>>
>>
>> No not really. Here is one way:
>
> Thanks for this variant and for the code sample! - It's actually
> how I hoped to be able to change all the sizes by changing one
> property.
>
> I have two questions on that variant, a technical and a design
> question...
>
> First; initially I had problems incorporating that pattern into
> my code. I got a null pointer error with this part:
> const container = document.getElementById('image_container');
> The reason was probably because I'm used to collect JS <script>
> code at the beginning of the HTML files in the <head> section.
> After relocating it to the end of the <body> it seemed to work.
> Is this script code placement mandatory (to make that pattern
> work) or is there some way to keep it at the top of the HTML
> file?

Yes, placement is important as written because you cannot select a dom
element BEFORE it is created. Sometimes it is better to put script at
the end, especially if script is elaborate and time expensive so it will
not delay the rendering of the page. You can get around this in order to
put script in header if you prefer by having an initiation function to
add click handler to 'image_container', and then attaching that
initialization function to the document onload event. That way the dom
is loaded before attaching the click handler. Your preference.

> Previously I had the getElementById() call within the function
> so that it was non-null when called; the disadvantage was that
> it's called with every click. (Not really an issue since it's
> not time critical as it's called once and only during a slow
> user interaction.)

Just did it for simplicity. You already had variables out of the scope
of the function to preserve the state of image size. Otherwise you'd
need to store values in custom properties added to 'image_container' dom
element. I have done it both ways. This is just more straight forward
and simpler.

>
> And second; is there some kind of design convention what sort
> of solution is preferable; iteration over all images, or change
> of the class attribute (with one static getElementById()), or
> change of the class attribute (with dynamic getElementById()?
> I'm not sure whether there are such conventions; to me it seems
> that there's so many different variants possible and used. But
> sometimes there's some hidden advantages or caveats that I'm
> not aware of (I have no deep insights in that matter), so I am
> asking for insights and experiences.

As always there is more than one way to do something. I did not do a
benchmarking on this, you are welcome to do it. Just on assumption, both
methods trigger browser re-layout event. I would guess that iterating
through the dom would add some addition time depending on the size of
the document. A faster way to enlarge images is with css "transform:
scale()"
<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale>
which doesn't trigger re-layout. But that means the scaled element is
taken out of the layout, so is depends on your application and design.
(You often is it used on buttons and images with that expand and "pop"
off of the page effect)

<style>
/* also add animation effects, no javascript */
.pop {
transition: transform 1s;
}

.pop:hover {
transform: scale(1.5);
}
</style>

<p>This is an example <img class="pop" src="sample.jpg"> pop effect.</p>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Change a CSS style definition from an onclick() javascript command

<uojhgf$8dn2$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=777&group=alt.html#777

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Change a CSS style definition from an onclick() javascript
command
Date: Sun, 21 Jan 2024 17:41:50 +0100
Organization: A noiseless patient Spider
Lines: 7
Message-ID: <uojhgf$8dn2$1@dont-email.me>
References: <unm3bk$2g5q7$1@dont-email.me> <unmupl$ein9$9@dont-email.me>
<unnhme$2ndq0$1@dont-email.me> <unpcg6$ein9$10@dont-email.me>
<unr3o9$3e0lc$1@dont-email.me> <uoe8h5$37eg6$1@dont-email.me>
<uoimhr$488k$1@dont-email.me> <uoje3j$7rv3$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sun, 21 Jan 2024 16:41:51 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="0260ad705eb16fcff7e917c4075b9281";
logging-data="276194"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX19zRvvRRQZ/graCAO1SzoOn"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:+lUL0hAv9A78tLzhEMX+MLSGSPc=
In-Reply-To: <uoje3j$7rv3$1@dont-email.me>
 by: Janis Papanagnou - Sun, 21 Jan 2024 16:41 UTC

On 21.01.2024 16:43, Jonathan N. Little wrote:
> [...]

Thanks for your explanations!

Janis

1
server_pubkey.txt

rocksolid light 0.9.7
clearnet tor