Geek asks and answers

How to set up alternate odd / even text strings

Say I have an element por divcontaining text about 10-15 lines, now my client has a strange call, he needs even / even lines with different text colors. Say Line 1 - Black, so line 2 should be gray, line 3 should be black again, etc.

So, I decided to use a range and changed the color, but variable resolution kills everything here. I know about a selector :first-line(which is not useful in this case), as well as type selectors :oddand :evenwill be excluded here, since I do not use tables, so that I can achieve this using CSS or do I need to use jQuery?

TL DR: I want to target odd / even lines in a paragraph or div

I need a CSS solution, if not, welcome jQuery and JavaScript

+5
source share
3 answers

Demo 1

A rather ugly little solution, compounded by the fact that it is 3:30 in the morning. However, it works with text blocks and allows each individual line individually.

Fiddle: http://jsfiddle.net/Fptq2/2/
Chrome 26, FF 20, Safari 5.1.7, IE 8/9/10 (perhaps it could be made functional)

Essentially this:

  • Divides the source into separate words once
  • Wraps every word in between (ugly but effective - any style can now be applied to a range)
  • Uses a simple position calculation to determine if an item is lower than the previous one.
  • Changes colors based on index change
  • # 3-5 ( !)
$(".stripe").each(function(){
  var obj = $(this);
  var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
  obj.html(html);
});

function highlight(){
    var offset = 0;
    var colorIndex = 0;
    var colors = ["#eee","#000"];
    var spans = $(".stripe span");

    // note the direct DOM usage here (no jQuery) for performance
    for(var i = 0; i < spans.length; i++){
        var newOffset = spans[i].offsetTop;  

        if(newOffset !== offset){
            colorIndex = colorIndex === 0 ? 1 : 0;
            offset = newOffset;
       }

       spans[i].style.color = colors[colorIndex];
    }
}

highlight();
$(window).on("resize", highlight);

2

Fiddle: http://jsfiddle.net/Fptq2/4/

  • , .
  • "all spans"
  • .
(function () {
    $(".stripe").each(function () {
        var obj = $(this);
        var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
        obj.html(html);
    });

    var offset = 0;
    var colorIndex = 0;
    var colors = ["#ccc", "#000"];
    var spans = $(".stripe span");

    function highlight() {
        for (var i = 0; i < spans.length; i++) {

            var newOffset = spans[i].offsetTop;
            if (newOffset !== offset) {
                colorIndex = colorIndex === 0 ? 1 : 0;
                offset = newOffset;
            }

            spans[i].style.color = colors[colorIndex];
        }
    }

    highlight(); // initial highlighting

    var timeout;
    function throttle(){
        window.clearTimeout(timeout);
        timeout = window.setTimeout(highlight, 100);
    }

    $(window).on("resize", throttle);
})();

enter image description here

+8

. <div>, . <div> , .

HTML:

<div id="test">Lorem ipsum ...</div>

JavaScript:

var div = document.getElementById("test"),
    layer = document.createElement("div"),
    text = div.innerHTML,
    lineHeight;

layer.appendChild(document.createTextNode("\u00A0"));
div.insertBefore(layer, div.firstChild);

lineHeight = layer.offsetHeight;
div.style.position = "relative";
div.style.overflow = "hidden";
div.style.color = "transparent";
layer.style.position = "absolute";
layer.style.zIndex = "-1";

window.addEventListener("resize", (function highlight() {
    while (layer.firstChild)
        layer.removeChild(layer.firstChild);

    for (var i = 0, n = Math.ceil(div.offsetHeight / lineHeight); i < n; i++) {
        var line = document.createElement("div"),
            block = document.createElement("div");

        line.style.height = lineHeight + "px";
        line.style.color = i % 2 ? "#ccc" : "#aaa";
        line.style.overflow = "hidden";

        block.innerHTML = text;
        block.style.marginTop = -i * lineHeight + "px";

        line.appendChild(block);
        layer.appendChild(line);
    }
    return highlight;
})(), false);

DEMO: http://jsfiddle.net/M3pdy/2/

+4

. , ,
( , ) - , , , , , ( MooTools jQuery - jQuery , , - , ). , , .
, $("#someElement").linify()
URL-
jquery-mootools

The following is a brief script that demonstrates wrapped text strings for individual div elements.
http://jsfiddle.net/UANeP/

+1
source

More articles:


All Articles