2 Questions / 1. Fullscreen(jQuery) / 2. Backgroun

Hello,

i searched around the web, but can't find right peace of codes..

I want to do: - go to Fullscreen mode on a button click. - change a background color to dark and save it as cookies.

Fullscreen mode:

i'm new with jQuery and can't find a right code. I found one, but when i click on button to next page, it turn's off the full screen mode to normal browser window, and changes my website background colors.

Founded code:

<html>
    <head>
      <title>TEST</title>
    </head>
    <body>
    <a href="#" title="Go Fullscreen" onclick="toggleFullScreen()"><img src="fullscreen.png"></a>

    <script>
    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
      (!document.mozFullScreen && !document.webkitIsFullScreen)) {
      if (document.documentElement.requestFullScreen) {  
          document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
          document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }  
        } else {  
        if (document.cancelFullScreen) {  
        document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
         document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
        }  
      }   
    }
    </script>
    </body>
    </html>

Change Background and save as Cookies:

I want to do, that a members chooses on radio button's a theme White or Dark. The White theme default <div> background is white #fff(White). When member chooses the Dark theme, it changes <div> background to #000000(Black) color. I'm new and can't write a code, without examples or something. Can someone tell me, how can i do it with Cookies and Javascript/jQuery?

Members settings page to change it:

<html>
    <head>
      <title>Settings</title>
    </head>
    <body>
    <p>Change Theme</p>
    <form>
      <input type="radio" id="Light" title="White Theme">
      <br />
      <input type="radio" id="Dark" title="Dark theme">
      <br />
      <input type="submit" id="submit" value="Submit">
    </form>
    </body>
</html>

Page BEFORE changes the Theme to Dark:

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#fff;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>

and Page AFTER changes the Theme to Dark:

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#000000;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>

Thanks!

You can set a cookie value, like this:

document.cookie = "theme=black";

Or, if you want to keep other settings, then:

function changeCookieValue(attribute, value) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            previousCookie[i] = attribute + "=" + value;
            document.cookie = previousCookie.join(";");
            return;
        }
    }
    document.cookie = document.cookie + ";" + attribute + "=" + value;
}

And you can use it like this:

`changeCookieValue("black");`

This is how you can read from cookie:

function getCookieValue(attribute) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            return presiousCookie[i].substring(previousCookie[i].indexOf("=") + 1);
        }
    }
    return "";
}

You can set the class of the body, like this:

$("body").addClass(getCookieValue("theme"));

just make sure that body is already loaded when you run this part. You can design the themes like this:

.black > div {
    background: #000000;
}

.white > div {
    background: #fff;
}

Alternatively, you can work with localStorage, which is much more handy. As about full screen mode, there is no reason to reinvent the wheel, since there is a good fullscreen API you should use for this purpose.

And you can make sure that changeCookieValue runs with the proper parameter on click using the onclick attribute of your radio buttons.

Alternatively, you might consider storing the values inside a database and adding the needed class to body on server, when you generate it.

EDIT:

You can add the class at the loaded event:

$(function() {
    $("body").addClass(getCookieValue("theme"));
});

Note, that this will be responsible to display the theme at page load. You need to display it whenever you call changeCookieValue for theme. Before you call that function $("body").removeClass(getCookieValue("theme")); and after the function is executed $("body").addClass(getCookieValue("theme")); (note, that the theme is changed). Naturally, you need a wrapper for this:

function changeTheme(theme) {
    $("body").removeClass(getCookieValue("theme"));
    changeCookieValue("theme", theme);
    $("body").addClass(getCookieValue("theme"));
}

and trigger this changeTheme at your radio buttons.