change background color changer / cookie for verson 3.0

[winracer]

I have been working on this and I am finished.

demo at http://www.myfunnypets.com/30/


Here is how to add.

edit the header.tpl

and add this before the </head>

Code: [Select]


<!--Start for backgroundcolor-->
<script type="text/javascript">
{literal}
<!--

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

var backColor = new Array();

backColor[0] = '#FFCCFF';
backColor[1] = '#CCFFFF';
backColor[2] = '#99FFCC';
backColor[3] = '#CCCCFF';
backColor[4] = '#FFFFFF';
backColor[5] = '#CCCCCC';
backColor[6] = '#000000';
backColor[7] = '#808080';
backColor[8] = '#A9A9A9';
backColor[9] = '#D3D3D3';
backColor[10] = '#7FFFD4';
backColor[11] = '#0000FF';
backColor[12] = '#000080';
backColor[13] = '#800080';
backColor[14] = '#FF1493';
backColor[15] = '#EE82EE';
backColor[16] = '#FFC0CB';
backColor[17] = '#006400';
backColor[18] = '#008000';
backColor[19] = '#9ACD32';
backColor[20] = '#FFFF00';
backColor[21] = '#FFA500';
backColor[22] = '#FF0000';
backColor[23] = '#A52A2A';
backColor[24] = '#DEB887';
backColor[25] = '#F5F5DC';


function changeBG(whichColor){
document.body.style.backgroundColor = backColor[whichColor];
createCookie('backColor', whichColor);
}

if(readCookie('backColor'))
document.write('<style type="text/css">body {background-color: ' + backColor[readCookie("backColor")] + ';}<\/style>');
-->
{/literal}
</script>
<!--end for backgroundcolor-->

part two add this in the body where you want to view the dropdown
I added it like this. find <div id="slogan">
and add this under it.

Code: [Select]

<form name="mycombo">
<p><select name="example" size="1">
<option value="">Select a Background Color</option>
<option value="javascript:changeBG(0)" style="background-color: #FFCCFF;">LightPink</option>
<option value="javascript:changeBG(1)" style="background-color: #CCFFFF;">LightBlue</option>
<option value="javascript:changeBG(2)" style="background-color: #99FFCC;">LightGreen</option>
<option value="javascript:changeBG(3)" style="background-color: #CCCCFF;">LightPurple</option>
<option value="javascript:changeBG(4)" style="background-color: White;">White</option>
<option value="javascript:changeBG(5)" style="background-color: #CCCCCC;">MediumGray</option>
<option value="javascript:changeBG(6)" style="background-color: Black;color: #FFFFFF;">Black</option>
<option value="javascript:changeBG(7)" style="background-color: #808080;">Gray</option>
<option value="javascript:changeBG(8)" style="background-color: DarkGray;">DarkGray</option>
<option value="javascript:changeBG(9)" style="background-color: #D3D3D3;">LightGray</option>
<option value="javascript:changeBG(10)" style="background-color: Aquamarine;">Aquamarine</option>
<option value="javascript:changeBG(11)" style="background-color: Blue;">Blue</option>
<option value="javascript:changeBG(12)" style="background-color: Navy;color: #FFFFFF;">Navy</option>
<option value="javascript:changeBG(13)" style="background-color: Purple;color: #FFFFFF;">Purple</option>
<option value="javascript:changeBG(14)" style="background-color: DeepPink;">DeepPink</option>
<option value="javascript:changeBG(15)" style="background-color: Violet;">Violet</option>
<option value="javascript:changeBG(16)" style="background-color: Pink;">Pink</option>
<option value="javascript:changeBG(17)" style="background-color: DarkGreen;color: #FFFFFF;">DarkGreen</option>
<option value="javascript:changeBG(18)" style="background-color: Green;color: #FFFFFF;">Green</option>
<option value="javascript:changeBG(19)" style="background-color: YellowGreen;">YellowGreen</option>
<option value="javascript:changeBG(20)" style="background-color: Yellow;">Yellow</option>
<option value="javascript:changeBG(21)" style="background-color: Orange;">Orange</option>
<option value="javascript:changeBG(22)" style="background-color: Red;">Red</option>
<option value="javascript:changeBG(23)" style="background-color: Brown;">Brown</option>
<option value="javascript:changeBG(24)" style="background-color: BurlyWood;">BurlyWood</option>
<option value="javascript:changeBG(25)" style="background-color: Beige;">Beige</option>
</select>

<script type="text/javascript">
{literal}
<!--
function go(){
location=
document.mycombo.example.
options[document.mycombo.example.selectedIndex].value
}
//-->
{/literal}
</script>

<input type="button" name="test" value="Change Background Color" onClick="go()">
</form></p>


plus I comment out this

<!--"{$config_slogan|default:"A Community Driven Project"}"-->

[winracer]

does no one like this? thoughts are welcome on this post. I need feed back

just found out does not work with version 1.0