Characters are being duplicated

Question

In a previous question I had asked if it were possible to individually style half of a character. The response was amazing and there were many great solutions found. You can see the question HERE.

I am now trying to utilize that and do something more advanced.

What I am trying to accomplish:

I am trying to replace all of the "A"s in the text and replace them with "V"
Once the A's have become V's I am then rotating the V's 180 degrees.
The V's will essentially become /\ .

The issue I'm having:

For some reason, the characters are being duplicated that have the "HalfStyle" applied to them.

You can see a working JSFiddle HERE.

HTML:

<div class="text"> MATT WAS HERE </div>

CSS:

.text{
font-size:100px;
font-family:"Arial", Helvetica, sans-serif;
font-weight:bold;
color: #0C5894;
}

#vflip {
margin:0;
padding:0;
display:inline-block;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
color:#ff0000;
}


.halfStyle {
position:relative;
display:inline-block;
width:1;
font-size:100px;
color: #0C5894;
overflow:hidden;
white-space: pre;
}

.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: #6898BC;
}

JQuery:

$(".text").each(function() {
    var text = $(this).text();
    var flipped = text.split('A').join('<span class="textToHalfStyle" id="vflip">V</span>');
    $(this).html(flipped)
});

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

Any idea as to what may be causing this?

Thanks in advance! :)

almost half-solution: http://www.dafont.com/fr/stargate.font — nicolallias, May 12 '14 at 12:16
just a note: there is the greek word Capital Lamda `Λ` that looks like an upside down V http://www.fileformat.info/info/unicode/char/39b/index.htm — Sharky, May 12 '14 at 12:18
I Actually ended up using jquery to replace A's with the symbol you provided and cut out all of the code to flip the v. — SimplyAzuma, May 12 '14 at 13:55

score 1 · Accepted Answer · answered May 12 '14 at 12:12

1

You are appending span to all .textToHalfStyle on each iteration, you need instead to target the specific element, here using eq() jQuery's method:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').empty();
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').eq(i).append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

--DEMO--

answered May 12 '14 at 12:12

A. Wolff

74,033
9
94
155

Even though I went with Sharky's comment, this is the answer that solved the question the most accurately and worked perfectly for me. – SimplyAzuma May 12 '14 at 13:56

score 1 · Answer 2 · answered May 12 '14 at 12:13

1

In your last $each you append but you should replace with e.g. html:

$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').html('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

answered May 12 '14 at 12:13

Niklas

13,005
23
79
119

score 0 · Answer 3 · answered May 12 '14 at 12:13

Here is the updated version of your own demo

var textToHalfStyle = $('.textToHalfStyle').text();

gives textToHalfStyle="vv" which is why the characters got duplicate.

Instead I created an array with

var textToHalfStyle = $('.textToHalfStyle').toArray();

which solves the issue

Characters are being duplicated

3 Answers3

--DEMO--