[RESOLVED] Change CSS body background with drop down menu?

[i-CONICA]

Hi, I posted this in the client side scripting section too, but I got no response so I thought maybe I've posted in a bad place.

I've been trying to follow this
http://www.codebelly.com/javascript/...agechange.html
That is almost exactly what I'm looking for.
The hyperlink method is fine.

I'm looking for some way to change the background image, defined in the body element of my style sheet, like this
body {
background-image:etc...;
}

Then have a few hyperlinks when clicked will change the background image to another image...

The script in the link above does it in their example perfectly, but not when I've tried to take the script...

It would be even better if it could send a cookie to save that preference, overwriting any previous preference.. but that's not the immediate priority..

I'm presuming Javascript but anything which works is good for me,

Hoping some javascript gurus pop by and have a few spare minutes to help...
Thanks for your help...

[rangana]

Could you please provide a better URL. The URL you've shown to us fails.

Anyway, do you mean something like this:

<script type="text/javascript">
function setBg(el){
var base = 'http://rangana.moonylist.com/images/'; // Base href - used by rangana for testing
document.body.style.background='url('+base+el.value+'.jpg) no-repeat center center fixed';
}
</script>
<style type="text/css">
body{background:#930;}
</style>
Change the current background: <select onchange="setBg(this)">
<option value="Picture1">Bg1</option>
<option value="Picture2">Bg2</option>
<option value="Picture3">Bg3</option>
<option value="Picture4">Bg4</option>
<option value="Picture5">Bg5</option>
<option value="Picture6">Bg6</option>
<option value="Picture7">Bg7</option>
<option value="Picture8">Bg8</option>
<option value="Picture9">Bg9</option>
</select>

[i-CONICA]

Sorry,
Here it is again. http://www.codebelly.com/javascript/backimagechange.html

Your code, looking at it, appears to be exactly what i'm looking for, I'll go with that and see where I end up.

Thank you, Very much. :)

[i-CONICA]

Rangana you rock! That works perfectly.

My last question would be, how easy would it be to make their selection send them a cookie?
Otherwise it's kinda useless, because they'll set a background, then click a thread and the new thread will load with the default background... Not their choice.

I know javascript can send cookies, but how on earth that's done, i have no clue..
I found this, http://www.quirksmode.org/js/cookies.html but have no idea what to do with it or how to make it store the data from rangana's code above..
Any help would be awesome! :D

Thanks so much so far, Rangana.

[rangana]

With cookie detection:

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function(){
ray.checkCookie();
},false):
window.attachEvent('onload',function(){
ray.checkCookie();
}); // FF : IE

var ray={
getCookie:function(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
},

setCookie:function(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
},

checkCookie:function(){
var bg=this.getCookie('bg');
if (bg!=null &&bg!=""){
var base = 'http://rangana.moonylist.com/images/'; // Base href - used by rangana for testing
document.body.style.background='url('+base+bg+'.jpg) no-repeat center center fixed';
}
},

setBg:function(el){
var base = 'http://rangana.moonylist.com/images/'; // Base href - used by rangana for testing
document.body.style.background='url('+base+el.value+'.jpg) no-repeat center center fixed';
ray.setCookie('bg',el.value,30); // 30 days
}
}
</script>
Change the current background: <select onchange="ray.setBg(this)">
<option value="Picture1">Bg1</option>
<option value="Picture2">Bg2</option>
<option value="Picture3">Bg3</option>
<option value="Picture4">Bg4</option>
<option value="Picture5">Bg5</option>
<option value="Picture6">Bg6</option>
<option value="Picture7">Bg7</option>
<option value="Picture8">Bg8</option>
<option value="Picture9">Bg9</option>
</select>

[i-CONICA]

I don't know how you do it.. You sir, Rock!

It works perfectly... Spot on.. Thank you so much! :D

[i-CONICA]

Oh btw, If you want to see your code in use, the site is http://GeekIMO.com you'll see the switcher right at the top left. This ain't spam, delete if you like, just thought it'd be nice for you to see your work in practice. :)

Thanks again.

[i-CONICA]

Hi, Rangana.
There's a small problem that's been noticed with the script.
It only saves the preference if the preference is set while on the home page.
Clicking threads from then on, works fine. But if the preference is set while on a thread, or elsewhere on the site, the preference is not saved. It returns to the previous preference when you click away from the page.

I think maybe it's not writing cookies for all the domain? just the home page? and maybe it's not overwriting cookies correctly...

Other than that, it's perfect. I hope you can fix that small yet important flaw.
Thank you so much! :D

[rangana]

Remember that subdomain.domain.com uses different cookie from domain.com.

[i-CONICA]

Hi, Rangana.

It's all on the same domain, there is no subdomain. Have a flick around the site to see the structure.
Also, this part of the code
if (bg!=null &&bg!=""){
causes the XHTML 1.1 to not validate... Removing &&bg!="" solves the validation problem, but of course, breaks the script.

Is there a fix for these small problems?

Thank you! :D

[rangana]

In XHTML, you need to surround your script with CDATA islands.

Alternatively, making the script external will fix the validation flaws.

[i-CONICA]

Again, thank you. That's fixed the validation issue.
Almost perfect. The only remaining issue is the
"It only saves the preference if the preference is set while on the home page.
Clicking threads from then on, works fine. But if the preference is set while on a thread, or elsewhere on the site, the preference is not saved. It returns to the previous preference when you click away from the page."

Give it a try... Set a background while on the home page, it'll stay while your browsing around. But set a background while anywhere but the homepage and it won't be set.

Thanks. :)

[rangana]

Works fine at my end. If you could give me step-by-step instruction on how to be able to see the problem, then I might figure out the cause.

[i-CONICA]

Hi, Rangana.

The cookie setting seems to only be in effect when set on the home page, or if set on another page, it seems to be independant to the setting made for the home page..
Kind of hard to explain but either more than one cookie is being sent or something else is going on.
I can only suggest you click around the site, make a selection, click around some more, you'll see the problem.

If not, I'll do a screen recording, upload the video and send you the url to view it.

Thanks for the help. :)

[rangana]

I see it now.

The script itself is flawless as far as I could tell.

However, for you to verify at your end, I suggest to add highlighted for debugging purposes:

checkCookie:function(){
var bg=this.getCookie('bg');
alert(bg);
if (bg!=null &&bg!=""){
var base = 'http://geekimo.com/blahdocs/template/GeekIMO/bgs/';
document.body.style.background='url('+base+bg+'.jpg) no-repeat center center fixed';
}


You should be able to know the value of the cookie every so often.

Also, I suggest on making the script external, that way, you need to edit unto one file only. (Just my 2 cents worth).

[i-CONICA]

Thanks I'll try that.

Your suggestion about making it external, There's no need, it's in my template file which is loaded and used by the perl backend. There IS only one file to edit. :)

I'll let you know how I get on.

[i-CONICA]

Ok, I've figured that if a background is set while on the home page, it applies to all areas, no matter where is navigated to, yet if the background is then changed while on a thread etc.. then it will ONLY apply to THAT thread. Clicking back to the home page shows the previous selection and clicking other threads shows the previous. Returning to the thread you make your selection on, shows the background you made while on that thread.

I've attached images of my cookies. It appears to be setting cookies per directory, rather than globally. View the paths in the cookies.
Deleting cookies and trying again doesn't help. It is per directory, that's the issue...
Hope it's easily fixable.
Thanks Rangana.

[rangana]

Try to add highlighted:

setCookie:function(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+"; path=/";
},

[i-CONICA]

YAY! Fixed! Your a genius! thanks so much for all the help. I've tested it and it's working perfectly now. Problem solved! :D