function changeColours(headerClassColour,contentClassColour,bannerDivColour)
{
document.getElementById("content").className = contentClassColour + "-content";
document.getElementById("header-layout").className = headerClassColour + "-header";
document.getElementById("page-image").style.backgroundColor = bannerDivColour;
}
colours = new Array();
colours["lipstickred"] = "#cc0000";
colours["jetsetblue"] = "#330066";
colours["noteasyjetorange"] = "#ff3300";
colours["black"] = "#000000";
colours["grey"] = "#575757";
colours["frenchnavy"] = "#336699";
colours["grannysmith"] = "#66CC33";
colours["grassgreen"] = "#339966";
colours["manlypink"] = "#CC0066";
colours["berry"] = "#990066";
colours["bettyblue"] = "#00CCFF";
colours["farmedsalmon"] = "#FF9966";
colours["graygreen"] = "#cccc00";
colours["trueblue"] = "#0099FF";
colours["raspberry"] = "#CC3333";
colours["poppy"] = "#FF6633";
colours["polomint"] = "#33CC99";
colours["peagreen"] = "#339966";
colours["bakedbean"] = "#009999";
colours["frogsleg"] = "#00CC33";
colours["irnbruchew"] = "#FF9900";
colours["tangerine"] = "#FF6600";
colours["verdigreen"] = "#669966";
colours["watermelon"] = "#FF6666";
colours["sbs"] = "#00AECB";
colours["yellow"] = "#FCE016";
for(var colourName in colours)
{
var colourValue = colours[colourName];
document.write('<div style="height:20px;background-color:'
+ colourValue + '" onclick="changeColours(\'' + colourName
+ '\',\'' + colourName + '\',\'' + colourValue + '\')"></div>');
}
// set the colour on page loading
changeColours("jetsetblue","jetsetblue",colours["jetsetblue"]);
Refactorings
No refactoring yet !
Ozten
February 27, 2010, February 27, 2010 05:54, permalink
No rating.
Login to rate!
Minor changes. I'd rewrite using jQuery or another library to clean up the DOM and event stuff.
function changeColours(headerClassColour,contentClassColour,bannerDivColour)
{
document.getElementById("content").className = contentClassColour + "-content";
document.getElementById("header-layout").className = headerClassColour + "-header";
document.getElementById("page-image").style.backgroundColor = bannerDivColour;
}
0123456789012345678901234567890123456789012345678901234567890123456789
colours = new Array(
lipstickred: "#cc0000", jetsetblue: "#330066",
noteasyjetorange: "#ff3300", black: "#000000",
grey: "#575757", frenchnavy: "#336699",
grannysmith: "#66CC33", grassgreen: "#339966",
manlypink: "#CC0066", berry: "#990066",
bettyblue: "#00CCFF", farmedsalmon: "#FF9966",
graygreen: "#cccc00", trueblue: "#0099FF",
raspberry: "#CC3333", poppy: "#FF6633",
polomint: "#33CC99", peagreen: "#339966",
bakedbean: "#009999", frogsleg: "#00CC33",
irnbruchew: "#FF9900", tangerine: "#FF6600",
verdigreen: "#669966", watermelon: "#FF6666",
sbs: "#00AECB", yellow: "#FCE016"
);
for(var colourName in colours)
{
var colourValue = colours[colourName];
document.write('<div style="height:20px;background-color:' +
colourValue + '" onclick="changeColours(\'' + colourName +
'\',\'' + colourName + '\',\'' + colourValue + '\')"></div>');
}
// set the colour on page loading
changeColours("jetsetblue","jetsetblue",jetsetblue"]);
Ozten
February 27, 2010, February 27, 2010 05:57, permalink
No rating.
Login to rate!
Err, hit submit to quick.
function changeColours(headerClassColour,contentClassColour,bannerDivColour)
{
document.getElementById("content").className = contentClassColour + "-content";
document.getElementById("header-layout").className = headerClassColour + "-header";
document.getElementById("page-image").style.backgroundColor = bannerDivColour;
}
colours = {
lipstickred: "#cc0000", jetsetblue: "#330066",
noteasyjetorange: "#ff3300", black: "#000000",
grey: "#575757", frenchnavy: "#336699",
grannysmith: "#66CC33", grassgreen: "#339966",
manlypink: "#CC0066", berry: "#990066",
bettyblue: "#00CCFF", farmedsalmon: "#FF9966",
graygreen: "#cccc00", trueblue: "#0099FF",
raspberry: "#CC3333", poppy: "#FF6633",
polomint: "#33CC99", peagreen: "#339966",
bakedbean: "#009999", frogsleg: "#00CC33",
irnbruchew: "#FF9900", tangerine: "#FF6600",
verdigreen: "#669966", watermelon: "#FF6666",
sbs: "#00AECB", yellow: "#FCE016"
};
for(var colourName in colours)
{
var colourValue = colours[colourName];
document.write('<div style="height:20px;background-color:' +
colourValue + '" onclick="changeColours(\'' + colourName +
'\',\'' + colourName + '\',\'' + colourValue + '\')"></div>');
}
// set the colour on page loading
changeColours("jetsetblue","jetsetblue",jetsetblue"]);
Intended to give a create a column of divs which, when clicked, changes the website to the defined colours. The strange names are defined in the style sheet (which I can't edit), but I also need to make use of the colours associated with each colour name, so I've included those in the script.