~*Easy2Use*~Background Gradiancy

[Punchnmylunch]

Simple code any questions or critiquing would be nice :) Let me know if there is any confusion... I took me a mth to complete this....after a while it was to confusing but I had my other brother give me a hand once my mind was fried so thank him for the browser check.


<script>
//Editable Region
var colors=new Array("#663300","#660000","CC0000","#990000","#993333","#003333","#003366","#990033","#006699","#330033","#333300","#000000")

// Set pause between colors
var pausebetweencolors=2

// What type of gradient should be applied Internet Explorer 5x or higher?
// Set "none" or "horizontal" or "vertical"
var gradient_effect="horizontal"

// Set speed
var speed=20

// How many times the effect be repeated?
// Add a value between 1 and 9999999
var i_loopmax=1000

// Non-editable Region unless you want problems
var pausesteps=40
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2
var redcol_1_b
var redcol_2_b
var greencol_1
var greencol_2
var greencol_1_b
var greencol_2_b
var bluecol_1
var bluecol_2
var bluecol_1_b
var bluecol_2_b

var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow
var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b
var colorhexafrom
var colorhexato
var i_step=1
var i_loop=0
var i_colorsA=0
var i_colorsB=1
var i_colorsC=1
var i_colorsD=2
pausebetweencolors*=1000
var browserinfos=navigator.userAgent
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie4||ie5||ns4||ns6||opera
function translateintorgb()
{
var hexa=colors[i_colorsA]
var hexared=hexa.substring(1,3)
var hexagreen=hexa.substring(3,5)
var hexablue=hexa.substring(5,7)
rgbredfrom=parseInt("0x"+hexared)
rgbgreenfrom=parseInt("0x"+hexagreen)
rgbbluefrom=parseInt("0x"+hexablue)
rgbrednow=rgbredfrom
rgbgreennow=rgbgreenfrom
rgbbluenow=rgbbluefrom

var hexa=colors[i_colorsB]
var hexared=hexa.substring(1,3)
var hexagreen=hexa.substring(3,5)
var hexablue=hexa.substring(5,7)
rgbredto=parseInt("0x"+hexared)
rgbgreento=parseInt("0x"+hexagreen)
rgbblueto=parseInt("0x"+hexablue)

var hexa=colors[i_colorsC]
var hexared=hexa.substring(1,3)
var hexagreen=hexa.substring(3,5)
var hexablue=hexa.substring(5,7)
rgbredfrom_b=parseInt("0x"+hexared)
rgbgreenfrom_b=parseInt("0x"+hexagreen)
rgbbluefrom_b=parseInt("0x"+hexablue)
rgbrednow_b=rgbredfrom_b
rgbgreennow_b=rgbgreenfrom_b
rgbbluenow_b=rgbbluefrom_b

var hexa=colors[i_colorsD]
var hexared=hexa.substring(1,3)
var hexagreen=hexa.substring(3,5)
var hexablue=hexa.substring(5,7)
rgbredto_b=parseInt("0x"+hexared)
rgbgreento_b=parseInt("0x"+hexagreen)
rgbblueto_b=parseInt("0x"+hexablue)
i_colorsA++
i_colorsB++
i_colorsC++
i_colorsD++
if (i_colorsA>=colors.length) {i_colorsA=0}
if (i_colorsB>=colors.length) {i_colorsB=0}
if (i_colorsC>=colors.length) {i_colorsC=0}
if (i_colorsD>=colors.length) {i_colorsD=0}

changefromto()
}
function changefromto()
{
rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)
rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)
rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)

rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)
rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)
rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)
// THERE MIGHT BE CONFLICT...but I'm sure I got it all out

if (rgbrednow>255) {rgbrednow=255}
if (rgbrednow<0) {rgbrednow=0}
if (rgbgreennow>255) {rgbgreennow=255}
if (rgbgreennow<0) {rgbgreennow=0}
if (rgbbluenow>255) {rgbbluenow=255}
if (rgbbluenow<0) {rgbbluenow=0}

if (rgbrednow_b>255) {rgbrednow_b=255}
if (rgbrednow_b<0) {rgbrednow_b=0}
if (rgbgreennow_b>255) {rgbgreennow_b=255}
if (rgbgreennow_b<0) {rgbgreennow_b=0}
if (rgbbluenow_b>255) {rgbbluenow_b=255}
if (rgbbluenow_b<0) {rgbbluenow_b=0}

if (i_step<=speed)
{
redcol_1 = hexc[Math.floor(rgbrednow/16)];
redcol_2 = hexc[Math.floor(rgbrednow)%16];
greencol_1 = hexc[Math.floor(rgbgreennow/16)];
greencol_2 = hexc[Math.floor(rgbgreennow)%16];
bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
bluecol_2 = hexc[Math.floor(rgbbluenow)%16];

redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
if (ie5 && gradient_effect!="none") {
if (gradient_effect=="horizontal") {var gr_effect=1}
if (gradient_effect=="vertical") {var gr_effect=0}
document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
}
else
{
document.bgColor=backcolor
}
i_step++
var timer=setTimeout("changefromto()",pausesteps);

}
else
{
clearTimeout(timer)
i_step=1
i_loop++
if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}
}
}
//browser capability :)
if (browserok)
{
window.onload=translateintorgb
}

[TNO]

hmmmm.....
Are you in any way related to this guy?

http://www.24fun.com/downloadcenter/bggradient/bggradient.html

Its a nice script regardless....

[Auriga]

Owwwww my eyes!

Why would you want to do that?

[Basscyst]

It's pretty cool, but as been said, why would you want that. It might be useful if it targeted an element's background, like a div or something, the page background is just too much IMO.

Basscyst

[TNO]

It probably be good for some raver's site. Just a little techno in the background, and a slightly different color scheme... :rolleyes:

[Punchnmylunch]

Well if anyone has any oppionions on how to shorten the code, or put it to use go ahead and post away. :thumbsup:

[TNO]

How short do you want it?
Things you could do:
1. remove comments
2. remove whitespace
3. Make variable names shorter
4. instead of this:
var first
var second
var third
do this:
var first, second, third
5.instead of this:

if (condition){
statements
}
else{
statements
}

do this:

someValue = (condition) ? trueValue : falseValue;

This is only scratching the surface.

[glenngv]

It's pretty cool, but as been said, why would you want that. It might be useful if it targeted an element's background, like a div or something, the page background is just too much IMO.

Basscyst
I've modified the code to work on specific elements. Defaults to body if not specified.

[glenngv]

Well if anyone has any oppionions on how to shorten the code, or put it to use go ahead and post away. :thumbsup:
You can minimize the global variables (by leaps and bounds!) by using object literals (http://www.javascriptkit.com/javatutors/oopjs.shtml).
//Editable Region
var config = {
colors:new Array("#663300","#660000","CC0000","#990000","#993333","#003333","#003366","#990033","#006699","#330033","#333300","#000000"),
pausebetweencolors:2, // Set pause between colors
gradient_effect:"horizontal", // What type of gradient should be applied Internet Explorer 5x or higher? Set "none" or "horizontal" or "vertical"
speed:20, // Set speed
i_loopmax:1000 // How many times the effect be repeated? Add a value between 1 and 9999999
};

// Non-editable Region unless you want problems
var data = {
pausesteps:40,
hexc:new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'),
redcol_1:"",
redcol_2:"",
...
};

and access them like these:

config.colors[0]
config.speed
data.pausesteps
data.hexc[0]

See working example (http://www.codingforums.com/showthread.php?t=58912) of the use of object literal.

[Basscyst]

I've modified the code to work on specific elements. Defaults to body if not specified.

Guess I missed this way back when. That's neat Glenn, I just may find use for that one of these days.

Basscyst