PDA

View Full Version : Need help with cookie background function..



ShadowIce
05-18-2009, 07:36 PM
Hi all :) I've been researching cookies a bit, and I attempted to create a function that if you select a background name from a drop down list or anything for that matter, it will save the background in the cookie, and display it in a div background for later use. Now I can't quite figure out why there is a problem with this script, but the error checker tells me there is.

Heres the code:


<script type="text/javascript">

//Get Cookie

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function setbg(what){
document.getElementById("mydiv").style.backgroundimage=url(what);
document.cookie="backgroundimage="+what
}

if (get_cookie("bg")!="")
document.getElementById("mydiv").style.backgroundimage=get_cookie("bg")

</script>

<form name="a1">
<p><select name="a2" size="1">
<option selected value="NA">Select background</option>
<option value="myimage.gif">My Image</option>
</select>
<div id="mydiv"></div><a href="javascript:setbg(document.a1.a2.options[document.a1.a2.selectedIndex].value)">Set Bg</a></p>
</form>

ANY help is GREATLY appreciated! :)

Thanks! :)

~SI~

VolcomMky
05-18-2009, 07:44 PM
Is there a website that this code is currently up on?
I may be able to find the "problem" with the Debugger in IE

ShadowIce
05-18-2009, 07:46 PM
no, but if u save it as a .html file using notepad, and opening it up, it should activate the code :)

VolcomMky
05-18-2009, 08:14 PM
I got this to work, so if you can manipulate it how you want, then I hope it works for you.


<script type="text/javascript">

//Get Cookie

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function setbg(what){
var nBG = document.getElementById(what).value;
document.getElementById("myStyles").innerHTML="&nbsp;<style>.mydivBG{ background-image: url("+nBG+")}</style>";
document.getElementById("mydiv").className="mydivBG";
return;
}

if (get_cookie("bg")!="")
document.getElementById("mydiv").style.backgroundimage=get_cookie("bg")

</script>

<select name="a2" size="1" id="bgs">
<option selected value="NA">Select background</option>
<option value="myimage.gif">My Image</option>
</select>
<a href="javascript:void(0);" onclick="setbg('bgs');">Set Bg</a>

<br /><Br /><br /><br />
<div id="myStyles"></div>
<div id="mydiv">There needs to be a big gap in here to view the background!</div>

ShadowIce
05-18-2009, 08:18 PM
Thanks. but theres 1 problem. When I close my browser and come back to the site, it doesnt show the background..

VolcomMky
05-18-2009, 08:24 PM
Does your browser delete the cookies once closed?
Or does it happen when your are on the same site but move to another page?

ShadowIce
05-18-2009, 08:27 PM
It does it when i move to another page.

VolcomMky
05-18-2009, 08:37 PM
K, its either the Cookies not being set/pulled properly

OR

The JavaScript is messing it up, so lets assume its this first because its a easier fix.

Replace the

if (get_cookie("bg")!="")
document.getElementById("mydiv").style.backgroundimage=get_cookie("bg")


With

if (get_cookie("bg")!="")
var nBG=get_cookie("bg")
document.getElementById("myStyles").innerHTML="&nbsp;<style>.mydivBG{ background-image: url("+nBG+")}</style>";
document.getElementById("mydiv").className="mydivBG";

ShadowIce
05-18-2009, 08:50 PM
Still didnt work..

ShadowIce
05-18-2009, 09:12 PM
can u modify this to work with background images? it seems to save it when i go to another page, then i go back to the page :)


<script>var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function color(){
var favColor = GetCookie('color');
if (favColor == null) {
favColor = prompt("What is your favorite background color?");
SetCookie('color', favColor, exp);
}
document.bgColor=favColor;
return favColor;
}
function set(){
favColor = prompt("What is your favorite background color?");
SetCookie ('color', favColor, exp);
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}</script>

Thanks! :)

~SI~

ShadowIce
05-19-2009, 05:05 PM
Ok. this works. i redid the data functions. the only prob is, when i leave and come back to the same page, or refresh, it doesnt save the background.. even though the cookie is correct, as u can use alert(GetCookie('image')); to see.

Here's the code:


<body background="GetCookie('image');">
<script>
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function image(){
var favImage = GetCookie('image');
if (favImage == null) {
favImage="mypic.gif";
SetCookie('image', favImage, exp);
}
alert(GetCookie('image'));
document.body.background=favImage;
return favImage;
}
function set(){
favImage="mypic.gif";
SetCookie ('image', favImage, exp);
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
alert();
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
</script>
<input type="button" name="bg" value="Change Background" onClick=image();>

Thanks! :)

~SI~

ShadowIce
05-20-2009, 08:15 PM
Ok. I fixed the above. I have 1 more small question. Then this is complete :)

How do I use an array and an if function to tell thefinal variable which picture to display depending on what is selected, and save the selected image value to the cookie using saveImage() ?

heres the code:


<script>
var thediv = "mydiv";

var thedefault = "default.jpg";

var theimg = "myimg.gif";

var num = 0;

var thefinal = [];

thefinal[0] = thedefault;
thefinal[1] = theimg;

var thecolor = "blue";

function menu(){

num++;

document.write('<form name="theform">\n'

+'<select name="favSelect" onchange="getDivBG(thediv, thefinal`);">\n'
+' <option selected="true" value="">--choose--</option>\n'
+' <option value='+thefinal[num]+'>Default</option>\n'
+' <option value='+thefinal[num]+'>My Image</option>\n'
+' </select>\n'
+'</form>\n');

for(var x=1;x<=document.forms.theform.favSelect.length;x++){

if(document.forms.theform.favSelect.selected != ""){

saveImage(thediv, thefinal[x]);

}

}

if(document.forms.theform.favSelect.selected){

alert(thefinal[num]);

}

}

var expDays = 365;
var exp = new Date();
var favImage = "";
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function saveImage(thediv, pic)
{
var favImage = pic;
if ( favImage == "" ) return;
SetCookie('image', favImage, exp);
getDivBG(favImage);
}

function savetheColor(thediv, thecolor)
{
var favColor = color;
SetCookie('image', favColor, exp);
document.body.style.backgroundColor = favColor;
}

function GetCookie(thename)
{
var cookies = document.cookie.split(/; /g);
var arg = thename + "=";
for ( var c = 0; c < cookies.length; ++c )
{
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
{
var temp = ck.split(/=/);
return unescape(temp[1]);
}
}
return "";
}

function SetCookie (thename, thevalue)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;

document.cookie = thename + "=" + escape (thevalue) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (thename)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (thename);
document.cookie = thename + "=" + cval + "; expires=" + exp.toGMTString();
}

function getBodyBGColor()
{
document.body.style.bgColor="url('" + GetCookie("color") + "')";
}

function getBodyBG()
{
document.body.style.backgroundImage="url('" + GetCookie("image") + "')";
}

function getDivBGColor(thediv, thecolor)
{
if ( thecolor != "")
document.getElementById(thediv).style.bgColor="url('" + thecolor + "')";
}

function getDivBG(thediv, pic)
{
if ( pic != "")
document.getElementById(thediv).style.backgroundImage="url('" + pic + "')";
if(document.forms.theform.favSelect.value != "") alert(document.forms.theform.favSelect.value);
document.getElementById(thediv).style.backgroundPosition="Center";
}
</script>
<body onload="getDivBG(thediv, theimg);">
<form name="theform">
<div id = "mydiv" style="width: 400; height: 250;">My Div</div><script>menu();</script>
</form></body>

Thanks again for all your support! :)

~SI~

ShadowIce
05-20-2009, 10:00 PM
Can someone please help? I have waited patiently for over 2 days. I'm sorry to be this way, but some of us have a schedule to uphold. No offense to anyone inparticular, but you know who you are. I'll just take my business to another forum, and just never use these forums ever again.