Click here to Skip to main content
Rate this: bad
good
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
$(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 23:56pm
IRSOG23.3K
Edited 25-Aug-12 23:59pm
v2

1 solution

Rate this: bad
good
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.
 
See http://jsfiddle.net/9UgEF/73/[^]
 
Is that what you wanted?
 
$(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(""));
}
​
  Permalink  

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