[Question] Set Background styler to workd with Cookies

Cryptaline

Active member
Greetings,

(Sorry if the article already exists, share the link pls)

Since I'm not that familar with cookies I ve a few questions:

  1. Is it good to implement jquerry cookies plugin or I can use built in by XenForo plugin for Cookies?
  2. I want to setup a very basic background styler which will save user settings in cookies. For that purpose I'm using Backstretch + JQuerry Cookies plugins. Already done designer work. Looks prety good, however I'm a lil bit confused with cookies usage and their different libraries (which 1 is good e.t.c)
My work currently looks like:
HTML:
<ul class="node-menu-top">
          <li>Change Your Mood</li>
          <li><a id="solid" href="#">Solid</a></li>
          <li><a id="dark" href="#">Dark</a></li>
          <li><a id="light" href="#">Light</a></li>
          <li><a id="reset" href="#">Reset</a></li>
          <li>Own</li>
</ul>
 
 
 
<script src="widgets/backstretch/jquery.backstretch.min.js"></script>
<script>
    $.backstretch(["images/bg.jpg"], { fade: 750});
 
    $("#solid").click(function(e) {
    e.preventDefault();
    $.backstretch('images/bg2.jpg');
    });
 
    $("#dark").click(function(e) {
    e.preventDefault();
    $.backstretch('images/bg1.jpg');
    });
 
    $("#light").click(function(e) {
    e.preventDefault();
    $.backstretch('images/bg3.jpg');
    });
 
    $("#reset").click(function(e) {
    e.preventDefault();
    $.backstretch('images/bg.jpg');
    });
</script>
And now I need to add cookies, so when the user will pick up a "style" on the page refresh the bg he has picked up will still be there.
If I will use JQuerry Cookies plugin, I can use these commands:
Code:
Create session cookie:
 
$.cookie('the_cookie', 'the_value');
Create expiring cookie, 7 days from then:
 
$.cookie('the_cookie', 'the_value', { expires: 7 });
Create expiring cookie, valid across entire site:
 
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
Read cookie:
 
$.cookie('the_cookie'); // => "the_value"
$.cookie('not_existing'); // => undefined
Read all available cookies:
 
$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }
Delete cookie:
 
// Returns true when cookie was found, false when no cookie was found...
$.removeCookie('the_cookie');
 
// Same path as when the cookie was written...
$.removeCookie('the_cookie', { path: '/' });
Note: when deleting a cookie, you must pass the exact same path, domain and secure options that were used to set the cookie, unless you're relying on the default options that is.

And what commands are with XenForo cookies?

Could you give an example of usage with my example for both libraries and explain why 1 is better then other?

(Sorry if the article already exists, share the link pls)

Thank you guys!
 
Top Bottom