Log in

View Full Version : Background image turn session cookies into persistant cookie?


Rapodo
11-17-2014, 11:10 PM
Can anyone help me turn this cookie into a persistent cookie until its time-to-live has elapsed?
Also IE will only persist a cookie if it has an Expires date.

Session cookies, held in memory, and which expire once the browser exits. Persistent cookies, which have a time-to-live, are persisted on disk, and are sent by the browser until their time-to-live has elapsed. I am needing a persistent cookie to stay after the browser has closed so the background image stays the same that the user has selected. Can anyone please help with this? I will be very thankful!



<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--download jquery.cookie from here http://plugins.jquery.com/cookie -->
<script type="text/javascript" src="images/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$("#themes").change(function() {
theme = $(this).val();
$.cookie("backgroundImage", theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
});
});
</script>
</head>


<body id="shelf">
<!--<select id="themes" onChange="changeTheme()" name="ChangeBG">-->
<select id="themes" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">name</option>
<option value="images/background3.jpg">name</option>
<option value="images/background4.jpg">name</option>
<option value="images/background5.jpg">name</option>
</select>
</body>
</html>
jscheuer1
11-18-2014, 02:39 AM
All browsers require an expiration date for a persistent cookie. It will then persist until that date - or until the user clears (deletes) it, whichever comes first. The user may also turn off cookies. That's similar to clearing, but they can then later turn them back on and any cookie previously persisting will again be in effect if it hasn't yet expired. As client side programmers we cannot control any of that. But it's a good thing to keep in mind. Generally though, cookies work as intended.

That said, I see you're using a jQuery cookie unit. If it is this one (looks like it is):

https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js

you can set persistence like so (from your code, addition red):


$.cookie("backgroundImage", theme, {expires: 5});

That one will persist 5 days. The $.cookie code does the rest. If you want a year, use 365 instead of 5.

Any problems or questions, just let me know.
Rapodo
11-18-2014, 04:53 PM
Works Perfect!!! Thank you so much!! Very pleased!! :)
Rapodo
11-20-2014, 09:21 PM
I have been trying to change this script so it can use href instead of Select Box.





<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$("#themes_selectbox").change(function() {
theme = $(this).val();
$.cookie("backgroundImage", theme, {expires: 365});
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
});
});
</script>




<body id="shelf">
<div id="example">
<select id="themes_selectbox" onChange="changeTheme()" name="ChangeBG">
<option value="#">Select Background</option>
<option value="example.jpg" selected="selected">Default</option>
<option value="example.jpg">Example</option>
</select>
</div>
</div>


I am trying to make it work with this example href but with no success
is this an easy solution? Can anyone help me? Many Thanks



<a href="images/example.jpg"><img src="example.jpg" alt="" /></a>
jscheuer1
11-21-2014, 02:58 AM
Make the script code like so:


<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$(".themes_anchors").click(function(e) {
theme = this.href;
$.cookie("backgroundImage", theme, {expires: 365});
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
e.preventDefault();
});
});
</script>

Now you can have as many links as you like, each with an href that indicates a potential background image. To work with the above code, each of these links must have a class of "themes_anchors". Example:


<a class="themes_anchors" href="images/example.jpg"><img src="example.jpg" alt="" /></a>