Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: jQuery
I used these lines of code for highlighting my sentences,every thins is OK but i want to highlight line by line(this code highlight all lines in span tag together)
JavaScript Code
  var seconds = 5;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<span>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  var background = $('<span>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  background.animate({width: '+=' + width},1000*seconds);
I know i can do it by spiting it's to words(like this:[^]) but i used custom font.
please help!
Posted 25-Aug-12 23:56pm
Edited 25-Aug-12 23:59pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

To highlight paragraph line by line you need to split the paragraph into lines first and then simply highlight the lines. To split the paragraph into lines you can re-build the paragraph word by word and end the line when it wraps on a second line, then start a new line.
Is that what you wanted?
    $("#test span").each(function(i,e) {
        $(e).delay(i*((5000)/$("#test span").length)).animate({'background-color': '#0f0'}, 100);
function splitTextIntoLines(obj) {
    var lineHeight = null;
        words = obj.text().split(" ").reverse(),
        lines = [],
        line = "",
        word = "";
    // clear the paragraph
    // add word by word to the paragraph
    // the array of words is reversed, so that pop() will get the first word
    while(words.length > 0) {
        word = words.pop();
        // add the first word back to paragraph
        obj.append(word + " ");
        // measure the line height on the first word
        if(lineHeight === null) {
            lineHeight = obj.height();
        // if the paragraph wraps to a second line (line height is bigger)...
        if(obj.height() > lineHeight) {
            // ...put the last word back to the array
            // and store the one line in another array of lines
            line = obj.html();
            obj.html(line.substring(0, line.length - word.length - 1));
    // add the last line (doesn't wrap on to a second line)
    // add all lines back to the paragraph    

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 195
1 Peter Leow 130
2 Zoltán Zörgő 120
3 BillWoodruff 85
4 bling 70
0 Sergey Alexandrovich Kryukov 9,568
1 OriginalGriff 6,901
2 Peter Leow 4,737
3 Zoltán Zörgő 4,404
4 CHill60 2,932

Advertise | Privacy | Mobile
Web02 | 2.8.150129.1 | Last Updated 1 Sep 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100