Question

Hello Stackoverflow family 🙂

I’m in need of a simple jQuery script, but since I’m a beginner in jQuery yet.. Then I cannot figure this out myself 🙁 And there is no such script yet or I just don’t know the correct term to search.

Idea is very simple. My designer designs h1 tags with two colors. For example: “Why use mysite.com?” then [mysite.com?] is with different color. I can see the technical solution as being triggered by $(“h1.title”) and the script would calculate how many words there are. Then divide by 2 and make one half different color with append container around them or something.

How to make this happen?

Kalle

Answer 1

If you really want to use JavaScript to do this, see this fiddle for an example of a method for colouring the second half of the text of an element differently.

It does it by splitting the original string on spaces, determining the halfway point, and then rebuilding the string with a span (with whatever styles you like applied to it) around the second half:

$("h1").each(function() {
    var t = $(this).text();
    var splitT = t.split(" ");
    var halfIndex = Math.round(splitT.length / 2);
    var newText = "";
    for(var i = 0; i < splitT.length; i++) {
        if(i == halfIndex) {
            newText += "<span style='color:#ff0000'>";
        }
        newText += splitT[i] + " ";
    }
    newText += "</span>";
    $(this).html(newText);
});

I’m sure there’s a quicker way of doing this, but this is the first thing that came to mind.