OnClick Change CSS content

Question

I have a simple function on javascript when you click a button called "en" to change language. Works fine by changing a text .text, but I have an issue and is that I've created an animation with css and some text placeholders. let me show you.

HTML

<div id="languageWrapper">

            <img id="es" class="spanish" src="images/es.svg"/>
            <img id="en" class="english" src="images/en.svg"/>

</div>

These are the buttons to Change the language

The content I can't achieve to change is this one

<div id="bannerWrapper">
        <div id="textWrapper">
            <h3 class="headerWrapper"></h3><br>
            <h3 class="subheaderWrapper"></h3>
        </div>
</div>

The text from .headerWrapper and .SubheaderWrapper comes from a CSS file

CSS

.headerWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size:40px;
}

.headerWrapper:after {
content: 'Header 1';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-size:17px;
}

.subheaderWrapper:after {
content: 'Some small description of what We intent to say here in this banner 
number 1';
animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de 
negocio";}
33.33% {content: "Nos encargamos de explicar , preparar y presentar tus 
impuestos periódicamente";}
66.66% {content: "Construimos un puente entre la compleja red de tramites al 
reubicar internacionalmente a un empleado";}
100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de 
negocio";}
}

What I'm trying to achieve is, while clicking the id #es to change the animation keyframes from faderText and faderText2 to maybe another different animations with the content in English. is this possible? Thanks in advance!!

Also here's my Javascript that I want to achieve (change .headerwrapper:after animation from faderText to faderTextEnglish) So while creating the faderTextEnglish keyframes i can make them in english.)

$('#en').click(function(){
$('.headerWrapper:after').css('animation','faderTextEnglish 30s cubic-bezier(.8,0,0,.8) infinite');
});

Someone can help:D? thanks!

$('#en') click add different class on headerWrapper and add your css based on that class — Balwant
– Balwant, Commented Oct 19, 2017 at 12:35

Simon Kraus · Accepted Answer · 2017-10-19 12:47:19Z

Add css class "english" on body when clicking #en:

$('#en').click(function(){
    $('body').addClass('en');
});
$('#es').click(function(){
    $('body').removeClass('en');
});

and in css change it to the following:

.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}

Hello Simon, thanks for your response! but doesn't seems to work, not sure why:(
Could you please create a working scenario on codepen.io/pen , then i could debug it for you :)
! ok now seems to be working:D yes is correct thanks a lot!!

Daniel Castro · Accepted Answer · 2017-10-19 13:25:24Z

I'm going to help you but first I must warn you about the bad use you're making of CSS by using it to provide content for your HTML page. CSS, as the name suggests, is meant to be used for styling (and this includes animations) purposes only, not for storing data such as text.

I have a working example of a solution on CodePen. View it here

Regarding your question, however, you can't select pseudo-elements with jQuery, such as :after. In this case, you need to make use of additional classes, as in the following example:

Keep your HTML as

<div id="languageWrapper">
    <img id="es" class="spanish" src="images/es.svg"/>
    <img id="en" class="english" src="images/en.svg"/>
</div>
<div id="bannerWrapper">
    <div id="textWrapper">
        <h3 class="headerWrapper"></h3><br>
        <h3 class="subheaderWrapper"></h3>
    </div>
</div>

Now, in your CSS, create four classes, being two for the header and subheader in spanish and two for the header and subheader in english: .enTextHeader, .enTextSubheader, .esTextHeader, .esTextSubheader. Your CSS should be as follows:

.headerWrapper:after {
    content: 'Header 1';
    animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper:after {
    content: 'Some small description of what We intent to say here in this banner number 1';
    animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
  animation-name: faderTextEnglish;
}

body.en .subheaderWrapper:after {
  animation-name: faderText2English;
}

@keyframes faderText {
    0% {content: "¿Empresa vs Autónomo?";}
    33.33% {content: "¿Qué impuestos paga mi Empresa?";}
    66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
    100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
    0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de  negocio";}
    33.33% {content: "Nos encargamos de explicar, preparar y presentar tus impuestos periódicamente";}
    66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
    100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
}

@keyframes faderTextEnglish {
    0% {content: "¿Company?";}
    33.33% {content: "¿LULZ?";}
    66.66% {content: "¿OKAY?";}
    100% {content: "¿NEWTEXT?";}
}

@keyframes faderText2English {
    0% {content: "¿Company Subheader?";}
    33.33% {content: "¿LULZ Subheader?";}
    66.66% {content: "¿OKAY Subheader?";}
    100% {content: "¿NEWTEXT Subheader?";}
}

Your jQuery code should be updated as follows:

$(document).ready(function() {
  $('#en').click(function(){
    $('body').addClass('en');
  });

  $('#es').click(function(){
    $('body').removeClass('en');
  });
});

Please note that instead of selecting the :after pseudo-element and then changing the animation, what you do is select the element itself and attach and remove additional classes (esText# and enText#, respectively).

Collectives™ on Stack Overflow

OnClick Change CSS content

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related