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!

Code:

<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-c...uery.cookie.js

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

Code:

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

Code:

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

Code:

<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

Code:

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

**jscheuer1** · 11-21-2014, 02:58 AM

Make the script code like so:

Code:

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

Code:

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

Thread: Background image turn session cookies into persistant cookie?

Thread Tools

Search Thread

Background image turn session cookies into persistant cookie?

How to change background with href instead on Select Box

Similar Threads

Accordion Menu (Session Cookie Deletion)

Cookies instead of session cookies?

Changing from session cookie to permanent cookie

How to show a javascript filled layer only once per session using a cookie

Permanent and Session-Only Cookies

Bookmarks

Bookmarks

Posting Permissions