Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Text changing on click
Date: Tue, 20 Sep 2016 14:39:08 +0200
Organization: PointedEars Software (PES)
Lines: 107
Message-ID: <2843116.44csPzL39Z@PointedEars.de>
References: <eca3f825-b75f-4440-bacc-8dbbeccc5ef2@googlegroups.com> <nrqu5j$ck0$1@news.albasani.net>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1474375148 8725 eJwFwYEBADAEA7CbDDXnlPH/CUtcIegwOMzXV+PcOjUtrCCjkGBcJe6UpYwuKU/ba17SPynZEe0= (20 Sep 2016 12:39:08 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Tue, 20 Sep 2016 12:39:08 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBwDAEBMCViPdqHCT2H6F3blROgE74+t4vYZeyFZ44EdCTJZmz6VnD0nZaUw2QfdKoEbS1W+u7PzIYFPw=
Cancel-Lock: sha1:KgebFKkdsfa7QrpLN8w4TU5VpJQ=
X-NNTP-Posting-Host: eJwNyEkBwDAIBEBLS7iCHCDgX0I7z1E2snYxNdHVJQqOQdTt53/AS5F7ZmZZKzivHG9MJvwRPhnFESo=
Xref: csiph.com comp.lang.javascript: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.