Grow your CSS skills. Land your dream job.

Change Colour

  • # March 15, 2010 at 4:48 pm

    Hi,
    Is there a way to change the colour of a div as it moves across the screen in the horizontal plane?
    I would need it to change 5 times to different colours and not animate across the spectrum, just suddenly change.

    Any Help Appreciated.
    Thanks.

    # March 15, 2010 at 6:38 pm

    I don’t quite understand what you’re trying to do, but to change colors with javascript you can do one of several things.

    The first is do something like: document.getElementById(‘yourID’).style = ‘color:#XXXXXX';

    or, you could use JQuery if you want a little more functionality. I’d recommend using JQuery only if you plan to use it a bunch, otherwise, it’s extra bandwidth for a simple color change.

    Build a function like this:

    Code:
    function changeColor(color, elementID) {
    document.getElementById(elementID).style = ‘color:’ + color;
    }

    then simply call the function with the color and id on any event you choose.

    # March 15, 2010 at 7:26 pm

    I have a div that moves across the screen horizontaly and I want it to change colour when it het a certain distance across. Do you think the code you have given me will accomplish that?
    Thanks

    # March 16, 2010 at 12:42 pm

    the code that Democritus supplied will change the color, as far as when it changes color, you still have to specify that.

    Without knowing more, like how the div moves, and when it should change color, we can’t really offer any more help.

    # March 16, 2010 at 3:41 pm

    Ok so i’m using this tutorial,
    http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/
    This is the jquery function,

    Code:
    (function($) {

    $.fn.spasticNav = function(options) {

    options = $.extend({
    overlap : 20,
    speed : 900,
    reset : 1500,
    color : ‘#efe516′,
    easing : ‘easeOutExpo’
    }, options);

    return this.each(function() {

    var nav = $(this),
    currentPageItem = $(‘#selected’, nav),
    blob,
    reset;

    $(‘

  • ‘).css({
    width : currentPageItem.width() – 40,
    height : ’30px’,
    left : currentPageItem.position().left + 20,
    top : ‘0’,
    backgroundColor : options.color
    }).appendTo(this);

    blob = $(‘#blob’, nav);

    $(‘li:not(#blob)’, nav).hover(function() {
    // mouse over
    clearTimeout(reset);
    blob.animate(
    {
    left : $(this).position().left + 20,
    width : $(this).width() – 40
    },
    {
    duration : options.speed,
    easing : options.easing,
    queue : false
    }
    );
    }, function() {
    // mouse out
    reset = setTimeout(function() {
    blob.animate({
    width : currentPageItem.width() – 40,
    left : currentPageItem.position().left + 20
    }, options.speed)
    }, options.reset);

    });

    }); // end each

    };

    })(jQuery);

And i need the div called blob to change colour as it gets to each different menu item.

Hope that help – thanks for all of you help so far.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".