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

Groups > comp.lang.javascript > #28051

Re: Interaction between CSS and JS

Show all headers | 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.

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

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