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

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

Interaction between CSS and JS

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

Contents

  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

#28047 — Interaction between CSS and JS

OK, as I've said before here, I'm a beginner - for the purposes of this post, 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?


Thanks for your help.

[toc] | [next] | [standalone]

#28048

bit-naughty@hotmail.com wrote on 08 jun 2015 in comp.lang.javascript:

> OK, as I've said before here, I'm a beginner - for the purposes of this
> post, 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*?

You cannot "click a link".
A link is a way to go to another page, "html".

You probably mean "when an element is clicked".

Nowadays we do that with CSS, off topic on this NG.

> Does this have anything to do with className? 

Please ask specific Qs.

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

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

#28049

bit-naughty@hotmail.com wrote:

> OK, as I've said before here, I'm a beginner - for the purposes of
> this post, 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).

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

-- 
Christoph M. Becker

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

#28051

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.

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

#28052

Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
> 
>> 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.

classList is certainly preferable, if it is supported.  Unfortunately,
IE 8 seems to be still in widespread use.[1]

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

Thanks.  I have not been aware of that.

[1]
<https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0>

-- 
Christoph M. Becker

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

#28053

Christoph M. Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> [The “className”] 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.
> 
> classList is certainly preferable, if it is supported.  Unfortunately,
> IE 8 seems to be still in widespread use.[1]

Wrapper methods like jsx.dom.*className() can take care of that:

<http://PointedEars.de/wsvn/JSX/trunk/dom.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]

#28106

On Monday, June 8, 2015 at 10:25:57 AM UTC-7, bit-n...@hotmail.com wrote:
> OK, as I've said before here, I'm a beginner - for the purposes of this post, 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?
> 

Put the blue box in the source code of the page. Then, when your link is clicked, change its class. You can use the classList property for that. For now, just hide and show the box with the visibility property. After you get that working, you'll want to use CSS transitions to transition the CSS opacity, to create the "fade in" and "fade out" effects.

The `a` element (used for links) will cause the browser to try to navigate. So use something other than a link.

Validate your HTML and study up on CSS positioning and the CSS 2 box model. 
www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/visudet.html

(I've read those enough times that I actually remember the file names).

[toc] | [prev] | [standalone]

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

csiph-web