Re: Interaction between CSS and JS

Path	csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!1.eu.feeder.erje.net!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: Interaction between CSS and JS
Date	Mon, 08 Jun 2015 22:18:49 +0200
Organization	PointedEars Software (PES)
Lines	61
Message-ID	<16297177.zCTbze9WAx@PointedEars.de> (permalink)
References	<ee169a03-8897-4861-8e7d-2d8eb0fc1d62@googlegroups.com> <ml4l69$omg$1@solani.org>
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 1433794905 24897 eJwFwYEBwDAEBMCVovxjHDT2HyF3UArHjaBhsbvBO5UpZzwx/OeIsmPING9xQUX6p4WWmw8eERC5 (8 Jun 2015 20:21:45 GMT)
X-Complaints-To	abuse@news.solani.org
NNTP-Posting-Date	Mon, 8 Jun 2015 20:21:45 +0000 (UTC)
User-Agent	KNode/4.14.2
X-User-ID	eJwNxsEBwCAIA8CVgpig60Bh/xHsvY4uU8UWtTmc8NN+cTs7CymUbXCyw/qYbC1MgWv6f1s6TB9u4WQokg9JDhTq
Cancel-Lock	sha1:DnjuSMzK/5JzawCNJp5NJVZZgaQ=
X-NNTP-Posting-Host	eJwFwQkRwEAIBDBLfLuAHApz/iU0gVO5GQQDD6+sK4902wuba3SJTuCDio8P/eQe08Y0V34DKhA2
Xref	csiph.com comp.lang.javascript:28051

Show key headers only | View raw

Christoph M. Becker wrote:

> bit-naughty@hotmail.com wrote:
>> […] what I'm trying to do is pretty simple - when I click a
>> particular link on a page, I want a blue box to fade onto the screen.
>> How do I do that?
>> 
>> The "box fade", I think I can look at my CSS book for. But how do I
>> trigger the animation *when the link is clicked*? Does this have
>> anything to do with className?
> 
> Indeed, you can use the className property of the respective element to
> dynamically assign and/or remove (a) CSS class(es).

This property should only be used if

  a) a class name is to be added and duplicate class names are not an issue;
  b) the “classList” property is not available.

The disadvantage of the “className” property is that proper removal or 
replacement of a class name requires regular expressions.  “classList” 
allows the caller to use only string values.

> For details you may want to refer to
> <https://developer.mozilla.org/en-US/docs/Web/API/Element/className>.

<https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>

However, it is not strictly necessary to use client-side scripting here.  
Where the effect is supported, the :target selector is. [1]

HTML:

  <a href="#foo">…</a>
  …
  <div id="foo">bar</div>

CSS:

  #foo {
    position: absolute;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
  }

  #foo:target {
    position: relative;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
  }

[1] <http://caniuse.com/#search=transition>
    <http://caniuse.com/#search=target>

-- 
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.

Thread

Interaction between CSS and JS bit-naughty@hotmail.com - 2015-06-08 10:25 -0700
  Re: Interaction between CSS and JS "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-08 19:44 +0200
  Re: Interaction between CSS and JS "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-06-08 19:59 +0200
    Re: Interaction between CSS and JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-06-08 22:18 +0200
      Re: Interaction between CSS and JS "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-06-08 22:35 +0200
        Re: Interaction between CSS and JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-06-09 01:06 +0200
  Re: Interaction between CSS and JS dhtml <dhtmlkitchen@gmail.com> - 2015-06-16 15:10 -0700

csiph-web