Question

Not knowing the proper way, after much research on the web I found so many different ways to do something its confusing. The way I tried, and kinda worked is the following…

My CSS

#Content {
left:0px;
top:1px;
width:988px;
z-index:1;
background-color: #FFFFFE;
}

My JS

function Gradients(id) //<- this id not used during testing, i hard coded it below
{
var getit = document.getElementById("Content");
getit.style.backgroundColor="#CCCCCC";
//alert(origcolor);
//var value = document.getElementById("Content").style.backgroundColor;
//var value = document.styleSheets[0].cssRules[0].style.backgroundColor;
}

My HTML (just a test)

<div onClick="Gradients("Content");">Gradients Test:<span>#XXXXXX</span></div>

Firebug Results – bad?

<div id="Content" style="background-color: rgb(204, 204, 204);">

WHAT I’M TRYING TO ACCOMPLISH

My goal was to read the background of an input field (each has an id) and slowly change it to red FROM the DEFAULT color in the CSS to let them know the field was incorrect.

Right now my website just slams it to red and I thought – how hard can it be to gradient a color. So, my mainpage has less clutter so I thought I would try to gradient the background of something. As with all web stuff it’s messier than I thought.

I even spent a couple of hours reading up on jQuery but I don’t want to pull in a whole library for this 1 tiny thing I will be doing.

Other Info

It’s kinda like how THIS stackoverflow website fades from yellow to white the DIV of my question when I come here. Except mine will be in input fields. I have some commented out stuff in my JS because I was trying different things. I removed some of the things that were ugly. It works as is BUT I don’t know if it’s a good way to do it because firebug shows it added something to the DIV inline.

I like clean code… and my code up there seems ugly because I added something to the DIV. Can’t I change the CSS value or is this the proper way to do it?

A couple of questions…

1) Proper way to do it?

2) If thats the proper way to do it how do I delete that change and have it revert back to the CSS style? Or an ugly method would be to just stick the original value I stored before performing the gradient.

3) YOUR much better clean way of doing it 🙂

4) Is there an elegant way to READ the value in the CSS style sheet?

The reason I didn’t go with the document.stylesheets is to me….it seemed ugly… what if it’s not [0]. How do I know it will always be [0]. What if it’s different in different browsers? sigh. I don’t fully understand the DOM. I understand what child nodes and parent nodes are but when looking through firebug it’s a huge mess all over the place and I have no clue where to find things, how to insert things and I don’t like modifying the DOM much anyways – i would love a simple thing like this (and yes, I am guessing on the code below – if only it could be that easy) lol…

I wish it was this easy in javascript…

$original_color = getElementById("Content").style.backgroundColor;
// loop through starting AT the original_color and gradient to red somehow
//start loop here
getElementById("Content").style.backgroundColor = newcolor;
// end loop here

Awaiting an infusion of wisdom please 🙂

WHAT I TRIED RECENTLY AFTER POSTING and Reading examples on here — My JS

var RGradient = 0;
var GGradient = 0;
var GStop = 0;
var BGradient = 0;
var BStop = 100;
var idGradient;

function Gradients(id)
{
var startcolor = "#FFFFFE";
RGradient = hexToR(startcolor);
GGradient = hexToG(startcolor);
BGradient = hexToB(startcolor);
idGradient = document.getElementById(id);

window.setTimeout("GradientIt()", 10);
}

function GradientIt()
{
if (GGradient == GStop && BGradient == BStop) return;
if (GGradient > GStop) GGradient--;
if (BGradient > BStop) BGradient--;
idGradient.style.backgroundColor="#"+(RGradient).toString(16)+(GGradient).toString(16)+(BGradient).toString(16);
document.getElementById('gtest').innerHTML = "#"+(RGradient).toString(16)+(GGradient).toString(16)+(BGradient).toString(16);
window.setTimeout("GradientIt()", 5);
}

function hexToR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
function hexToG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
function hexToB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h}

ERROR in IE

I’m getting an error in IE AFTER it turns the background to red… – Invalid Property in Line 29 which is the line with all the toString(16)’s in it above.

Can someone explain why it’s giving an error in IE please? I am checking if I’m above 0 so the numbers should stay 0 or higher. The other browsers don’t give an error that I can see. Once it’s working I will be changing it – this is just a “hacked together” test – I’ll make it more efficient later on when it’s on the page I want.

I spent about an hour trying to pass variables to setTimeout before I realized I can’t. UGH! lol. Globals 🙁 Can’t wait for CSS3 full compatibility in ALL browsers.

Answer 1

#content {
    left:0px;
    top:1px;
    width:988px;
    z-index:1;
    background-color: #FFFFFE;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

#content:focus {
    background-color: #f00;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

The above is CSS3 and works in many browsers. However IE support is (as always) lacking.

via javascript/jquery….

function animate_bg(ele, from, to) {
from += from > to ? -1 : 1;
if(!$.support.opacity){
    if(from != to){
        var opStr = (Math.round(from * 25.5)).toString(16);
        //alert(opStr)
        ele.css({background:'transparent',filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#" + opStr + "fffff0, endColorstr=#" + opStr + "f00000)"});   
    }else{
        ele.css({background:'transparent',filter:"none"});   
    }
}else{
    ele.css("backgroundColor", "rgba(255, 0, 0, " + (from) / 10 + ")"); 
}

if(from != to)  
    setTimeout(function() { animate_bg(ele, from, to) }, 60);
}

and usage….

    animate_bg($('...'), 8, 0);