Changing Background Image with cookie

Question

I am looking for help in putting a cookie into this script so the browser remembers the background image selected when the browser is closed or changed page. Any help would be much appreciated!

function changeTheme()
{

  var e = document.getElementById("themes");
  var theme = e.options[e.selectedIndex].value;
  console.log(theme);
  document.getElementById("shelf").style.backgroundImage = "url("+theme+")";

}

<body id="shelf">
<select id="themes" onChange="changeTheme()" name="ChangeBG">
  <option value="images/background1.jpg" selected="selected">Default</option>
  <option value="images/background2.jpg">Heart</option>
  <option value="images/background3.jpg">Earthly</option>
  <option value="images/background4.jpg">Sunflowers</option>
  <option value="images/background5.jpg">Mountin</option>
</select>

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

It looks like the only piece you are missing is the setting and getting of the cookie. Here is a post about setting and getting cookies using both jquery and javascript.

This is jquery but it gets the job done.

<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">Heart</option>
  <option value="images/background3.jpg">Earthly</option>
  <option value="images/background4.jpg">Sunflowers</option>
  <option value="images/background5.jpg">Mountin</option>
</select>
</body>
</html>

edited May 23 '17 at 10:33

Community

1
1

answered Nov 17 '14 at 14:12

Dan

41
1

Thank you for your help! This works great when the browser remains open, but when you close the browser the image changes back to default this is thee CSS i am using, is there a way to get the CSS Background image load from the Cookie? – Rapodo Nov 17 '14 at 15:07
body { margin: auto; background-color: #000000; background-image: url("images/background1.jpg"); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; color: #fff; min-width: 0; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-size: cover; background-position: 50% top; background-repeat: no-repeat; background-attachment: fixed; width: auto; height: auto; } – Rapodo Nov 17 '14 at 15:08
Yes thank you i did that, i have read that i need to add a persistent cookie until its time-to-live has elapsed not a session cookie, i cant see where i can set the time to expire length? So it does not reset once the browser has been shut down? – Rapodo Nov 17 '14 at 20:37
Also Also IE will only persist a cookie if it has an Expires date – Rapodo Nov 17 '14 at 21:04

Changing Background Image with cookie

1 Answers1