/    Sign up×
Community /Pin to ProfileBookmark

Background Color with Cookies

Copy linkTweet thisAlerts:
Aug 04.2005

I came upon this code at JavaScript Source and thought it would be perfect for our site. I work on a local historical website ([url]http://www.petroliaheritage.com[/url]) which has lots of pictures and facts/essays. Different people complain that the BGcolor is too hard on their eyes and everybody has a different idea what the best color is. My question is that I would like to some how have the BGcolor saved as a cookie and have all the others pages follow the same color? I would only let people change the bgcolor from the main page. As you can see I have very limited knowledge of Java Script.

I would appreciate any assistance you can give me.

Thanks
Dan

<SCRIPT LANGUAGE=”JavaScript”>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! [url]http://javascript.internet.com[/url] –>

<!– Begin
function randomBg() {
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
var hex1=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var hex2=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var hex3=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var hex4=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var hex5=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var hex6=new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”)
var bg=”#”+hex1[Math.floor(Math.random()*hex1.length)]+hex2[Math.floor(Math.random()*hex2.length)]+hex3[Math.floor(Math.random()*hex3.length)]+hex4[Math.floor(Math.random()*hex4.length)]+hex5[Math.floor(Math.random()*hex5.length)]+hex6[Math.floor(Math.random()*hex6.length)]
document.bgColor = bg
document.colorChange.colorValue.value = bg
document.colorChange.text.value = “”;
}
// End –>
</script>

</head>
<body bgcolor=008080>
<form name=”colorChange”>
<input type=”button” value=”Random Background” onClick=”randomBg()”>
</form>

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangAug 04.2005 — Main document:

[CODE]<HTML>
<Head>
<link rel='stylesheet' href='Blue.css'>
<link rel='stylesheet' href='Green.css'>
<link rel='stylesheet' href='Red.css'>
<Script Language=JavaScript>

var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000);

var prevCSS = "";

function getCookie(isName){

cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}

function setCookie(isName,isValue,dExpires){

document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}

function swapCSS(currCSS){

if (prevCSS != ""){document.styleSheets[prevCSS].disabled = true}
document.styleSheets[currCSS].disabled = false;
prevCSS = currCSS;
setCookie('CSS',currCSS,expDate)
}

function init(){

nSheets = document.styleSheets.length;
for (i=0; i<nSheets; i++)
{document.styleSheets[i].disabled = true}
if (getCookie('CSS')){swapCSS(getCookie('CSS'))}
}

window.onload=init;

</Script>
</Head>
<Body>
<input type=button value="Blue View" onclick="swapCSS(0)">&nbsp;&nbsp
<input type=button value="Green View" onclick="swapCSS(1)">&nbsp;&nbsp
<input type=button value="Red View" onclick="swapCSS(2)">
<br><br>
<a href='1/Next.html'><font color=yellow> Go To NEXT </font></a>
</Body>
</HTML>[/CODE]


Next.html:


[CODE]<HTML>
<Head>
<link rel='stylesheet' href='../Blue.css'>
<link rel='stylesheet' href='../Green.css'>
<link rel='stylesheet' href='../Red.css'>
<Script Language=JavaScript>

function getCookie(isName){

cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}

function swapCSS(currCSS){

document.styleSheets[currCSS].disabled = false;
}

function init(){

nSheets = document.styleSheets.length;
for (i=0; i<nSheets; i++)
{document.styleSheets[i].disabled = true}
if (getCookie('CSS')){swapCSS(getCookie('CSS'))}
}

window.onload=init;

</Script>
</Head>
<Body>
This is the Next Document
</Body>
</HTML>[/CODE]

These 3 Style Sheets are in the same folder as the Main Document. Create them using NotePad, saving each one with the .css extension.

Red.css:

[CODE]Body {Background-Color : Red;}[/CODE]
Blue.css:

[CODE]Body {Background-Color : Blue;}[/CODE]
Green.css:

[CODE]Body {Background-Color : Green;}[/CODE]


The above example requires the Style Sheets to be in the same folder as the main document.

The exampe above assumes that the Next.html document is in a folder named 1. If all of your documents are in the same folder, then change this line in the Main document:

[CODE]<a href='1/Next.html'><font color=yellow> Go To NEXT </font></a>[/CODE]

To this:

[CODE]<a href='Next.html'><font color=yellow> Go To NEXT </font></a>[/CODE]
And change these lines in Next.html:

[CODE]<link rel='stylesheet' href='../Blue.css'>
<link rel='stylesheet' href='../Green.css'>
<link rel='stylesheet' href='../Red.css'>[/CODE]

To this:

[CODE]<link rel='stylesheet' href='Blue.css'>
<link rel='stylesheet' href='Green.css'>
<link rel='stylesheet' href='Red.css'>[/CODE]
×

Success!

Help @dsolway spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...