highlight span tag line by line in JQuery

Question

4.00/5 (1 vote)

See more:

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

C#

$(document).ready(function(){

  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'
  });
  wrapper.append(background);
  wrapper.append(el.css('position','absolute'));
  $('body').append(wrapper);
  background.animate({width: '+=' + width},1000*seconds);

});

I know i can do it by spiting it's to words(like this:http://jsfiddle.net/9UgEF/34/[^]) but i used custom font.
Demo:http://jsfiddle.net/9UgEF/41/[^]

please help!

Posted 25-Aug-12 22:56pm

Alister007

Updated 25-Aug-12 22:59pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Miroslav Sommer · Accepted Answer · 2012-09-01T02:31:00

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.

See http://jsfiddle.net/9UgEF/73/[^]

Is that what you wanted?

JavaScript

$(function(){
    splitTextIntoLines($("#test"));
    
    $("#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
    obj.html("");
    
    // 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
            words.push(word);
            
            // and store the one line in another array of lines
            line = obj.html();
            obj.html(line.substring(0, line.length - word.length - 1));
            lines.push("<span>"+obj.html()+"</span>");
            
            obj.html("");
        }
    }
    
    // add the last line (doesn't wrap on to a second line)
    lines.push("<span>"+obj.html()+"</span>");
    
    // add all lines back to the paragraph    
    obj.html(lines.join(""));
}