Asp Forum - Interaction between CSS and JS

bit-naughty

6/8/2015 5:26:00 PM

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.

6 Answers

Evertjan.

6/8/2015 5:45:00 PM

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)

Christoph M. Becker

6/8/2015 6:00:00 PM

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

--
Christoph M. Becker

Thomas 'PointedEars' Lahn

6/8/2015 8:19:00 PM

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

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

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=tran...
<http://caniuse.com/#search=...

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Christoph M. Becker

6/8/2015 8:35:00 PM

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

--
Christoph M. Becker

Thomas 'PointedEars' Lahn

6/8/2015 11:06:00 PM

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

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

dhtml

6/16/2015 10:11:00 PM

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

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

comp.lang.javascript

Interaction between CSS and JS

bit-naughty

Evertjan.

Christoph M. Becker

Thomas 'PointedEars' Lahn

Christoph M. Becker

Thomas 'PointedEars' Lahn

dhtml

x Login to ForumsZone