CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user13286
user13286

Reputation: 3085

Applying CSS to single characters dynamically?

I am using JavaScript/jQuery to populate a date field on my page. I want to add CSS styling to each individual character of the generated date and wondering if it is possible and how I could go about doing it. Basically, I want the end result to look like this:

enter image description here

Here is my code which is generating the date:

HTML:

<div class="date"></div>

JavaScript:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
$('.date').text(date);

Here's a JSFiddle.

Upvotes: 8

Views: 2830

Answers (3)

Terry
Terry

Reputation: 66228

I am not sure if OP is asking for a means to split the characters into its own self-containing element only, or also for the CSS solution that approximates the screenshot. My answer does both — see demo fiddle here: http://jsfiddle.net/teddyrised/pv9601hj/4/

For splitting the date string, you will have to rely on JS, something like:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
var dateSplit = date.split("");
$('.date').html('<span>'+dateSplit.join('</span><span>')+'</span>');

For the CSS, it is simply a clever use of CSS3 flexbox specification and pseudo-elements:

.date {
    background-color: #000;
    display: flex;
}
.date span {
    border-radius: 4px;
    box-shadow: inset 0 0 1px 2px rgba(255,255,255,.125);
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2em;
    line-height: 2em;
    margin-right: 4px;
    overflow: hidden;
    position: relative;
    width: 1em;
    height: 2em;
    text-align: center;
}
.date span::before {
    background-color: rgba(255,255,255,.2);
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}
.date span::after {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.25) 50%,
        rgba(255,255,255,.25) 50%,
        rgba(255,255,255,.1) 100%
        );
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Upvotes: 8

low_rents
low_rents

Reputation: 4481

you have to split the string up into characters by yourself:

your fiddle with my extension

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();

var date_split = date.split("");
var date_html = '';

date_html += '<span class="red">' + date_split[0] + '<span>';
date_html += '<span class="green">' + date_split[1] + '<span>';
date_html += '<span class="blue">' + date_split[2] + '<span>';
date_html += '<span class="red">' + date_split[3] + '<span>';
date_html += '<span class="green">' + date_split[4] + '<span>';
date_html += '<span class="blue">' + date_split[5] + '<span>';
// ... and so on


$('.date').html(date_html);

this way you can give each character it's individual classand style.

Upvotes: 3

Edd Morgan
Edd Morgan

Reputation: 2923

It's not possible to apply CSS to individual characters, only to elements. Therefore, you need simply to split your characters into elements! Wrap each character in a span, and you can apply CSS to each of those spans (each of which contains just one character).

Something like this (full JSFiddle):

var chars = date.split("");

$.each(chars, function(i, char) {
   $(".date").append("<span>" + char + "</span");
});

Upvotes: 5

Related Questions