CODEWITHSUNDEEP
javascriptcsshtml-table
user2706191
user2706191

Reputation: 353

How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

Excuse me while I provide the worst description possible because I barely know what I'm doing.

I'm coding a table for a forum that takes stored date like the board title and board description and... makes it pretty. This is what I want it to look like, basically, ignoring the sloppy text.

enter image description here

This is what I have so far.

enter image description here

I can't figure out how to make the first letter of every word blue, but I'm willing to give up on that if no one has any answers.

My big question is, how do I strip the first line or certain number of words/characters from the board description?

This is the table containing all the information:

newindex = "<table width=100% bgcolor=#dfdfdf>
<tr>
    <td bgcolor=#56d5cb width=25%></td>
    <td bgcolor=#000 style=color:#fff><header1>" + description + "</header1></td>
</tr>

<tr bgcolor=#eeeeee>
    <td><header2>" + link + "</header2></td>
    <td><header3>" + description + "</header3></td>
</tr></table>";

Description and link are both stored chunks of text related to boards.

Here's my CSS:

header1 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20;
    color: #fff;
    text-transform:lowercase;
    text-decoration:none;
    display:block;
}

header1:first-letter {
    color:#56d5cb;
}    

header2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 30;
    color: #000;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:normal;
    padding-right:10px;
    display:block;
}

header2:first-letter{
    color: #c52c0e;
}

header3 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15;
    color: #000;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:normal;
    text-align:right;
    padding-right:10px;
}

If it's any extra help, I'm trying to code this on Jcink/Invision Power Board and am using a custom forum structure script that I evidently can't link to because I don't have enough reputation.

I've only worked with the basics of CSS and I've never done anything with Javascript.

Upvotes: 2

Views: 192

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

With pure CSS, you can't. The pseudo-class :first-letter will only select the first letter of the element, not of every word.

With JQuery you can (and since you tagged javascript, I think it's okay).

$(document).ready(function() {
    var words = $('header1').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('header1').html(html);
});

Working JSFiddle.

Answer based on this question

Upvotes: 2

Jbartmann
Jbartmann

Reputation: 1549

In JavaScript on a String Object there is a "substring(from, to)" Method, by which you can split Strings at a certain position: http://www.w3schools.com/jsref/jsref_substring.asp

So you could use the substring(0,1) Method to split your String at the first letter. Afterwards you could colour the string with the first letter blue.

I don't know if that is the simpliest possible Solution, but that's how i would do it.

Hope this helps.

Upvotes: 1

Related Questions