Need help with cookie background function..

Author

Message

Mugen Wizardry

User Banned

Posted: 18th May 2009 22:43

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:

//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>

+ Code Snippet

<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~

Back to top

Profile

gbark

19

Years of Service

User Offline

Joined: 14th Oct 2005

Location: US - Virginia

Posted: 19th May 2009 19:12

Link

I tried running that in a page, and it didn't throw up any error messages for me. I copied your code as-is, so maybe you're getting a JavaScript error from another part of your page?

Back to top

Profile PM

AlexI

20

Years of Service

User Offline

Joined: 31st Dec 2004

Location: UK

Posted: 19th May 2009 19:59

Link

I would use PHP, you could do that a lot quicker then

http://www.fphosting.co.uk FREE WEB HOSTING, NO Adverts

Back to top

Profile PM

Mugen Wizardry

User Banned

Posted: 19th May 2009 20:09

Link

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();>

+ Code Snippet

<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~

PS. I cannot use php cuz im working on this site for my dad, and he needs to edit it with frontpage.

Back to top

Profile

gbark

19

Years of Service

User Offline

Joined: 14th Oct 2005

Location: US - Virginia

Posted: 19th May 2009 20:51

Link

You need to add an expiration date to your cookies when you set them. If you don't set one, the cookie is cleared next time you restart your browser.

One easy way to do this is just to default each cookie to expire in one year:

+ Code Snippet

d=new Date();
d.setFullYear(d.getFullYear()+1);
expires="expires="+d.toGMTString();
document.cookie=escape(document.cookie+"; "+expires);

Back to top

Profile PM

Mugen Wizardry

User Banned

Posted: 19th May 2009 22:40

Link

thanks but if u read my code, ud know i already have an expiration date code on it.

can somebody else please help?

ANY help is GREATLY appreciated!

Back to top

Profile

Mugen Wizardry

User Banned

Posted: 21st May 2009 01:07

Link

Ok. I have the fixed function. And as said before, I have done lots of research on cookies, and have tried just about every algorithm in the book, and to no avail.

Here's the new code, the only prob is I need to use an array and select box, so depending on what is selected, it will change and save the background using that image, and because it is saved, depending on what image was used, will display that pic using a cookie.

Here's the code:

Ok. 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:

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 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>

+ Code Snippet

<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~

Back to top

Profile

Sorry your browser is not supported!

Geek Culture / Need help with cookie background function..