CODEWITHSUNDEEP
jquerycss
John
John

Reputation: 21957

Change background colour of individual elements on the fly

Is there a way in CSS or JQuery where I can dynamically change the background of li tags so they get slightly lighter for each element until it gets to white?

For example say I had a list of 10 li elements. The first would have a red (#ff0000) background, the next one would then be a lighter shade of red, and so on and so on until we got to the last one which would have a background of white (#FFFFFF).

The list can be any length and I just want the background colour to go from one colour e.g. red to another colour e.g. white. My site uses jQuery so if I have to use that I don't mind.

Thanks

Upvotes: 12

Views: 21762

Answers (3)

RJ Regenold
RJ Regenold

Reputation: 1758

Though a bit more complicated than the other answers, this will give you a nice linear gradient from one color to another, and allow you to use their hexadecimal representation.

markup

<ul id="my-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

code

$(document).ready(function() {
    makeLovely($("#my-list li"), 0x00ff00, 0x0000ff);
});

// code modified from: http://www.herethere.net/~samson/php/color_gradient/color_gradient_generator.php.txt
function makeLovely(items, startColor, endColor) {
    var r0 = (startColor & 0xff0000) >> 16;
    var g0 = (startColor & 0x00ff00) >> 8;
    var b0 = (startColor & 0x0000ff);
    var r1 = (endColor & 0xff0000) >> 16;
    var g1 = (endColor & 0x00ff00) >> 8;
    var b1 = (endColor & 0x0000ff);
    var steps = items.length;

    items.each(function(index) {
        var r = interpolate(r0, r1, index, steps);
        var g = interpolate(g0, g1, index, steps);
        var b = interpolate(b0, b1, index, steps);
        var newColor = zeroFill(((((r << 8) | g) << 8) | b).toString(16), 6);

        // console.log(newColor);

        $(this).css('background-color', newColor);
    });
}

function interpolate(start, end, index, steps) {
    if(start < end) {
        return ((end - start) * (index / steps)) + start;
    }
    return ((start - end) * (1 - (index / steps))) + end;
}

// stolen outright from: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript
function zeroFill(number, width) {
    width -= number.toString().length;
    if (width > 0) {
        return new Array(width + (/\./.test( number ) ? 2 : 1)).join('0') + number;
    }
    return number;
}

Of course this could be wrapped up in a jQuery plugin if you prefer.

Hope it helps!

Upvotes: 3

dochoffiday
dochoffiday

Reputation: 5575

Simple plugin that allows you to modify the starting and ending rgb values:

<script type="text/javascript">

    (function ($) {
        $.fn.transitionColor = function (options) {

            var defaults = {
                redStart: 255,
                greenStart: 0,
                blueStart: 0,
                redEnd: 255,
                greenEnd: 255,
                blueEnd: 255
            };
            options = $.extend(defaults, options);

            return this.each(function () {

                var children = $(this).children();
                var size = children.size();

                var redStep = (options.redEnd - options.redStart) / (size - 1);
                var greenStep = (options.greenEnd - options.greenStart) / (size - 1);
                var blueStep = (options.blueEnd - options.blueStart) / (size - 1);

                children.each(function (i, item) {
                    var red = Math.ceil(options.redStart + (redStep * i));
                    var green = Math.ceil(options.greenStart + (greenStep * i));
                    var blue = Math.ceil(options.blueStart + (blueStep * i));

                    $(item).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')');
                });

            });
        };
    })(jQuery);

    $(document).ready(function () {
        $("#list").transitionColor();
    });

</script>

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Upvotes: 1

user229044
user229044

Reputation: 239581

This is relatively easy, assuming you can build a selector that grabs your list of <li> elements.

Something like this (code is untested):

// get all <li>'s within <ul id="my-list">
var items = $('#my-list li');

// the increment between each color change
var step = (255.0 / items.size());

items.each(function(i, e) {
    var shade = i * step;
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")");
});

Upvotes: 15

Related Questions