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

Groups > comp.lang.javascript > #31416

Re: Text changing on click

Show key headers only | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web