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

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

Text changing on click

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

Contents

  Text changing on click bit-naughty@hotmail.com - 2016-09-19 22:52 -0700
    Re: Text changing on click bit-naughty@hotmail.com - 2016-09-19 22:55 -0700
      Re: Text changing on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-20 12:07 +0200
        Re: Text changing on click bit-naughty@hotmail.com - 2016-09-21 23:40 -0700
          Re: Text changing on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-22 08:42 +0200
            Re: Text changing on click bit-naughty@hotmail.com - 2016-09-22 07:23 -0700
          Re: Text changing on click Scott Sauyet <scott@sauyet.com> - 2016-09-25 22:21 +0000
            Re: Text changing on click "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-09-26 16:25 +0200
              Re: Text changing on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-26 17:47 +0200
            Re: Text changing on click bit-naughty@hotmail.com - 2016-09-28 22:51 -0700
              Re: Text changing on click Scott Sauyet <scott@sauyet.com> - 2016-09-30 03:17 +0000
    Re: Text changing on click Martin Honnen <martin.honnen@gmx.de> - 2016-09-20 11:05 +0200
      Re: Text changing on click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-09-20 14:39 +0200
        Re: Text changing on click bit-naughty@hotmail.com - 2016-09-21 23:39 -0700
    Re: Text changing on click bit-naughty@hotmail.com - 2016-09-22 07:20 -0700
      Re: Text changing on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-22 23:44 +0200
      Re: Text changing on click bit-naughty@hotmail.com - 2016-09-28 22:54 -0700

#31410 — Text changing on click

If I have some text, say "Click me", when someone clicks it, I want it to change to "Clicked" - but I owould like say, a greaan curved rectangle around the "Clicked" - how do I do this?
If I assume that the "Clicked" has to be a graphic (which I hope, it does NOT!), then does it have to be downloaded with AJAX?


Thanks.

[toc] | [next] | [standalone]

#31412

Sorry, just to add -  can this whole thing be done entirely in CSS, is JS even necessary? But I'd like the site to run in older browsers, as well as mobile ones, so, if the CSS is anew thing, then I'd rather stick to JS....

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

#31415

bit-naughty@hotmail.com wrote on 20 Sep 2016 in comp.lang.javascript:

> Sorry, just to add 

Add to what?

You should by now have learned,
that on usenet one needs to quote.

> -  can this whole thing be done entirely in CSS, is
> JS even necessary?
> But I'd like the site to run in older browsers, as
> well as mobile ones, so, if the CSS is anew thing, then I'd rather stick
> to JS.... 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31426

On Tuesday, September 20, 2016 at 3:38:17 PM UTC+5:30, Evertjan. wrote:

 
> You should by now have learned,


Oh *WILL* you STFU!

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

#31427

bit-naughty@hotmail.com wrote on 22 Sep 2016 in comp.lang.javascript:

> On Tuesday, September 20, 2016 at 3:38:17 PM UTC+5:30, Evertjan. wrote:
> 
>  
>> You should by now have learned,
> 
> 
> Oh *WILL* you STFU!

No. 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31430

On Thursday, September 22, 2016 at 12:12:43 PM UTC+5:30, Evertjan. wrote:
> 
> > On Tuesday, September 20, 2016 at 3:38:17 PM UTC+5:30, Evertjan. wrote:
> > 
> >  
> >> You should by now have learned,
> > 
> > 
> > Oh *WILL* you STFU!
> 
> No. 


Gotta admire the guy's fortitude :)  - fine, just for that, I won't block you then :)

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

#31460

bit-naughty wrote:
> Evertjan. wrote:

>> You should by now have learned,

(The following line was in Evertjan's message, but was elided in the 
response.)

||that on usenet one needs to quote.

> Oh *WILL* you STFU!

There are plenty of people pushing their own views of USENET etiquette 
for seemingly little reason.  (A certain pointy-eared member is 
especially bad about this.)  But this is not such a case.  Evertjan's 
suggestion is extremely important.

From the headers on your message, I'm guessing that you view 
comp.lang.javascript through Google Groups.  That interface is inherently 
conversational, and not quoting doesn't seem to lose context.  But this 
is *not* a Google Group, and many of us interact with it in other ways.  
comp.lang.javascript is part of USENET, a part which Google happens to 
expose through its Groups interface.  Here's how I use it at the moment:

I open my newsreader, a useful, but perhaps not particularly friendly 
tool named "Pan", that I believe was installed automatically with my OS.  
(There are better newsreaders, and some day, I'll probably switch to 
one.)  When I log onto it, I ask Pan to download the new headers in 
groups I follow.  Although I could choose a view something like Google's 
full threaded one, I choose to have my main window only show the new 
messages, so that I can easily see what I haven't read.

I might log on every day for a week, then not again for two months, then 
three times a day for another month.  In other words, I'm inconsistent in 
how often I view the groups I follow.

When I looked today, the first message I saw in this thread was this 
one.  I had no context.  I had no idea what you were responding to.  I 
might have seen the predecessors last week but had forgotten them.

Now consider the message that Evertjan reacted to, one that started like 
this:

| Sorry, just to add -  can this whole thing be done entirely in CSS, is 
| JS even necessary?

If you were to open that message, without any context, would you feel 
able to respond?

The point is, if you had quoted your original message, properly reduced 
to the relevant section, then anyone could understand your new question 
in isolation.  Perhaps something like:

| I wrote:
|
|| If I have some text, say "Click me", when someone clicks it, I want it 
|| to change to "Clicked" - but I owould like say, a greaan curved 
|| rectangle around the "Clicked" - how do I do this? 
|
| Sorry, just to add -  can this whole thing be done entirely in CSS, is 
| JS even necessary?


So those insisting on proper quotation are not simply being pedantic; 
they are trying to improve the quality of the conversation in the 
community.

Does this make sense?

  -- Scott

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

#31466

Am 26.09.2016 um 00:21 schrieb Scott Sauyet:

> Now consider the message that Evertjan reacted to, one that started like 
> this:
> 
> | Sorry, just to add -  can this whole thing be done entirely in CSS, is 
> | JS even necessary?
> 
> If you were to open that message, without any context, would you feel 
> able to respond?
> 
> So those insisting on proper quotation are not simply being pedantic; 
> they are trying to improve the quality of the conversation in the 
> community.
> 
> Does this make sense?

Proper quoting certainly makes sense, but I'm not sure whether it makes
sense to tell the same people to do so again and again – it might be
better to ignore them.

-- 
Christoph M. Becker

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

#31467

"Christoph M. Becker" <cmbecker69@arcor.de> wrote on 26 Sep 2016 in 
comp.lang.javascript:

> Proper quoting certainly makes sense, but I'm not sure whether it makes
> sense to tell the same people to do so again and again ƒ " it might be
> better to ignore them.

Not so, imho.

When posting to the NG, 
you are not [only] addressing the culprit,
as such is the nature of Usenet,
as this is not email.

Others might feel the urge to behave sensible,
and they are not influenced by your suggested ignoring.

Methinks proper logical behavour,
as expressed in the Netiquette,
is far more important than 
questionning if I make sense [quod often non],
and your striving to be sure [unreachable in the end].

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31474

On Monday, September 26, 2016 at 3:52:12 AM UTC+5:30, Scott Sauyet 

> Does this make sense?

If you told PAN to download new headers, it would download the original conversation I was referring to....whereupon you would see it. If that message header had expired from your NNTP server (not sure, but that IS how NNTP works, right?), then you wouldn't see the header, and it wouldn't be much point seeing the header cuz you wouldn't be able to get the actual message, and would simply be unable to follow the conversation...? (I used to use PAN > 15 yrs ago myself...)

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

#31477

bit-naughty wrote:
> Scott Sauyet wrote:
> 
>> Does this make sense?it would download the original
> conversation I was referring to
> 
> If you told PAN to download new headers, ...

Sorry, this was not quoted with enough information for me to understand 
the context.  I'm not going to bother reading beyond here.

  -- Scott

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

#31414

On 20.09.2016 07:52, bit-naughty@hotmail.com wrote:
> If I have some text, say "Click me", when someone clicks it, I want it to change to "Clicked" - but I owould like say, a greaan curved rectangle around the "Clicked" - how do I do this?
> If I assume that the "Clicked" has to be a graphic (which I hope, it does NOT!), then does it have to be downloaded with AJAX?

You will need some wrapper element around the text, for instance a 
"span" element:

<span onclick="this.textContent = 'Clicked'; this.style.border = '2px 
solid green'; this.style.borderRadius = '2em';">Click me</span>

Read up on CSS properties like border-radius 
https://developer.mozilla.org/en/docs/Web/CSS/border-radius.

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

#31416

Martin Honnen wrote:

> On 20.09.2016 07:52, bit-naughty@hotmail.com wrote:
>> If I have some text, say "Click me", when someone clicks it, I want it to
>> change to "Clicked" - but I owould like say, a greaan curved rectangle
>> around the "Clicked" - how do I do this? If I assume that the "Clicked"
>> has to be a graphic (which I hope, it does NOT!), then does it have to be
>> downloaded with AJAX?
> 
> You will need some wrapper element around the text, for instance a
> "span" element:
> 
> <span onclick="this.textContent = 'Clicked'; this.style.border = '2px
> solid green'; this.style.borderRadius = '2em';">Click me</span>

I realize that this is just an example.

However:

It is not a good idea to specify a border with a border-radius without 
specifying a padding.  Otherwise the border will either cut into (overflow: 
visible/initial) or cut off the content (overflow: 
auto/hidden/overlay/scroll).

It is a good idea to _not_ script CSS properties, but to define a stylesheet 
ruleset and only toggle an element’s class that triggers that ruleset.

CSS:

  .clickable.highlighted {
    border: 2px solid green;
    border-radius: 2em;
  }

JS:

  var my = {
    highlight: function (target) {
      target.textContent = target.getAttribute("data-click-text");
      target.className += ' ' + target.getAttribute("data-click-class");
    }
  };

HTML:
    
  <span class="clickable" onclick="my.highlight(this)"
        data-click-text="Clicked"
        data-click-class="highlighted">Click me</span>

The “my” "namespace" (pick any unused identifier; 
jsx.object.findNewProperty() can help there [1]) prevents potential 
properties in the scope chain with the same name from being accessed instead 
of the custom method.  The HTML5 “data-*” attributes are used to make the 
my.highlight() method reusable without producing spaghetti code.

If there are several such elements, it is prudent to specify a “js-*” hook 
class to recognize them as event targets in the event listener added to a 
common ancestor for bubbling events, or to add the same event listener to 
all matching elements:

<http://cssguidelin.es/#javascript-hooks>

If the element should only be highlighted when focused, the “:focus” CSS 
pseudo-class for an “a” element should be used (if the content does not 
change, *instead of* scripting):

  .click-me:focus {
    border: 2px solid green;
    border-radius: 2em;   
  }

    [Likewise, the “:active” CSS pseudo-class can be used instead of some 
     pointing device event types.]

If so and support for CSS generated content is required, and only the text 
content has to be modified, this could also be done via the CSS “content” 
property.

CSS:

  .click-me:before {
    content: "Click me";
  }

  .click-me:focus:before {
    content: "Clicked";
  }

HTML:

  <a href="#clicked" class="click-me"></a>

    [The “tabindex” attribute could be used to make an element without the 
     “href” attribute focusable, but then you have to specify it on all
     focusable elements or no other elements.  “An element with a 0 value,
     an invalid value, or no tabindex value should be placed after elements
     with a positive ‘tabindex’ in the sequential keyboard order.” (MDN)]

However, with *empty/whitespace-only* content this is not semantic markup.
 
________
[1] <http://PointedEars.de/wsvn/JSX/trunk/object.js>
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

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

#31425

Wow, thanks for that post Thomas, I'll probably take some time to understand all of that - let's start with the: onclick="my.highlight(this)" - what's the "this" exactly? What is it that you're passing as the argument to highlight?
(please note that I'm still new to JS, AND OOP! :) )


What does the textContent property do? It just changes the text inside the thing to that (whatever I give it)??


Why do you say that "It is a good idea to _not_ script CSS properties, but to define a stylesheet  ruleset and only toggle an element’s class that triggers that ruleset. "? What's wrong with that exactly? Martin's method just seems a lot simpler to me....? :)


Thanks for your help.

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

#31429

One more question - what I actually have to do is alittle more than what I said, the text has to be in a particular font - so does the "@font-face" CSS directive have to be within the "onclick" handler, or can it be outside, and I just set the font-family? I want the actual .ttf file to be downloaded BEFOREhand, NOT when I click - that would be awful (there are still people on slow connections around here....)


Thanks.

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

#31431

bit-naughty@hotmail.com wrote on 22 Sep 2016 in comp.lang.javascript:

> One more question - what I actually have to do is alittle more than what
> I said, 

So what did you say?

Please quote on Usenet. 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31475

Yo! Mr. Ears! Did you have any reply to my message?


> One more question - what I actually have to do is alittle more than what I said, the text has to be in a particular font - so does the "@font-face" CSS directive have to be within the "onclick" handler, or can it be outside, and I just set the font-family? I want the actual .ttf file to be downloaded BEFOREhand, NOT when I click - that would be awful (there are still people on slow connections around here....)
> 
> 
> Thanks.

[toc] | [prev] | [standalone]

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

csiph-web