Manipulate Pseudo Elements with Custom Fields

Question

What I need to do is similar to this post, but I need the user to be able to change the Pseudo Element using a custom field. Still learning JavaScript and this has been a struggle!

User needs ability to change ~ border-right: 500px solid #4679BD;

The custom field is ~ $angle = get_field('contact_angle_color');

Here is my code without my failed JavaScript attempts:

.relative-wrap {
position: relative; 
min-height: 150px;
}

    .triangle-down-right {
    width: 50%;
    height: 0;
    padding-top: 54%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    }
    
    .triangle-down-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    border-top: 500px solid transparent;
    border-right: 500px solid #4679BD;
    }

<div class="triangle-down-right"></div>

You can't affect pseudo-elements with javascript...you need to swap out the class. — Paulie_D, Jan 15 '16 at 17:17
I didn't downvote it. *Someone else* probably did because the question isn't clear. — Paulie_D, Jan 15 '16 at 19:49

score 0 · Accepted Answer · edited May 23 '17 at 12:31

I could not understand the part about custom field, but if you are planning on having unlimited control over pseudo-elements, well, good luck with that. Currently, manipulating pseudo-elements with Javascript is possible through injecting inline css into DOM as described in this post, but it is not recommended unless, of course, you absolutely have to.

So, the other way to change pseudo-elements is to add/remove/modify class names on the element. Please see the example code below and the JSFiddle: https://jsfiddle.net/9w4d6mts/

HTML:

<input type="button" id="direction" value="Change Direction">
<br>
<input type="button" id="color" value="Change Color">
<div id="demo" class="triangle-down-right alt"></div>

CSS:

.relative-wrap {
  position: relative;   
  min-height: 150px;
}

.triangle-down-right,
.triangle-down-left {
    width: 50%;
    height: 0;
    padding-top: 54%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
}

.triangle-down-right:after,
.triangle-down-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    border-top: 500px solid transparent;
}

.triangle-down-right:after {
  border-right: 500px solid #4679BD;
}

.triangle-down-left:after {
  border-left: 500px solid #4679BD;
}

.triangle-down-right.alt:after,
.triangle-down-left.alt:after {
  border-color: transparent #D4679B transparent;
}

JS:

document.getElementById('direction').addEventListener('click', function(){
    var d = document.getElementById('demo');
  d.className = (d.className.replace(' alt','') === "triangle-down-right") ? d.className.replace('right','left') : d.className.replace('left','right');
});

document.getElementById('color').addEventListener("click", function(){
    var d = document.getElementById('demo');
    console.log(d.className);
    d.className = (d.className.slice(-3) === "alt") ? d.className.replace(' alt','') : d.className + ' alt';
});

Basically, we are preparing the classes in CSS beforehand and switch them with Javascript based on user interaction. That's it.

I built a custom WordPress template and I need to give the user to have the ability to change the color of the angle (the custom post an area they can input a hex value). I could figure this out based on this but would you recommend only using Javascript to design this? Reason I am using CSS as much as possible is because their clients tend to use older web browsers. — valvanomatt, Jan 15 '16 at 18:45
I do not know what else you can use, apart from building a theme generator with PHP (and based on the project, this may mean some serious work). Another alternative may be predefining some styles for this angle, creating a separate stylesheet for each, and serving the relevant stylesheet based on the selected color by the user, but this also has 2 drawbacks: (1) An additional stylesheet means an additional server request, (2) There will be a limited number of colors. — Arman Ozak, Jan 15 '16 at 18:57
Thank you very much for pulling me back because you are right. I will make it where it works on newer browsers with cleaner code and have default values set for older browsers. — valvanomatt, Jan 15 '16 at 19:05

Manipulate Pseudo Elements with Custom Fields

1 Answers1