LocalStorage Background Colour Changer

Posted By: Ian on Dec 23, 2012 in JQuery
Last modified on January 29th, 2015 at 9:31 pm,

Just a couple of examples of how to use HTML5 LocalStorage feature as a background colour changer.

Example 1 the simpler example takes the value of whatever you type in the box and stores that in localStorage and sets it as background colour using jQuery.

<script type="text/javascript">
/**
* Check if localStorage is supported and alert user if it's not
* Check if the key background has been set and has a value
* if so store value in variable getColour and using jQuery change
* body background colour to that set in variable getColour
*/
if (typeof (localStorage) == 'undefined') {
    alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
    if (localStorage.getItem("background") != null) {
        getColour = localStorage.background;
        $('body').css('background', getColour);
    }
}
/**
* Bind click handler to #style and store whatever the input is as variable setColour
* if variable setColour is empty alert user and exit function
* remove key from storage then change background to colour set in variable setColour
* store background colour in localStorage using background as key and colour as value
* then alert user that its been saved
*/
$("#style").click(function () {
    setColour = $("input#inputStyle").val();
    if (setColour == "") {
        alert('You never entered anything silly!');
        return;
    }
    localStorage.removeItem('background');
    $('body').css('background', setColour);
    localStorage.setItem("background", setColour);
    alert('Background colour ' + setColour + ' saved in localStorage');
});
</script>

 

Demo 1

 


Example 2 uses JQuery addClass and removeClass where the class name is just the background colour that has been clicked on. It takes the ID of the clicked on Div (Colour) and stores that in localStorage with the key “background” and value the ID of said colour.

<script type="text/javascript">
/**
* Check if localStorage is supported and alert user if it's not
* Check if the key background has been set and has a value
* if so store value in variable getColour and using jQuery add
* class set in variable getColour to body
*/
if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") != null) {
        getColour = localStorage.background;
        $("body").addClass(getColour);
    }
}

/**
* Wait until DOM has loaded then get class set in localStorage
* Bind click handler to .palette and slowly fade #result in (Used to reset the fadeOut)
* Define variable getColour (Included already above but couldn't get it to work?) to value stored 
* in localStorage. Remove class added to body and key from storage
* define variable setColour with the value of the ID that was clicked on and add class to body
* set class in Storage and show user its been set
* Slowly fade out the message
*/
$(document).ready(function () {
    getColour = localStorage.background;
    $('.palette').click(function () {
        $("#result").fadeIn('slow');
        getColour = localStorage.background;
        $("body").removeClass(getColour);
        localStorage.removeItem('background');
        var setColour = $(this).attr("id");
        $("body").addClass(setColour);
        localStorage.setItem("background", setColour);
        document.getElementById("result").innerHTML = 'class ' + setColour + ' saved in localStorage';
        $("#result").fadeOut('slow');
    });
});
</script>

 

Demo 2

 


Like Demo 2 but this time we use jQuery slideToggle feature with a little CSS so the boxes are hidden by default and when the User clicks on the T it slides down and again slides up when clicked on or colour is selected.
 

Demo 3


Like Demo 3 but this time we use jQuery offset feature along with animate with some CSS to get the colour palette to follow us down the page thanks to a snippet from http://adamscottcreative.com/
 

Demo 4

AnonymousIan.J.Gough

Did this help you? Please Let me know by commenting below even if it’s just to say “Thanks”

Discussion - 2 Comments

  • Otshelnik-fm Otshelnik-fm Jul 14, 2013 

    —Question—
    How to set a background image? We have 5 background images (large), and we need one of them is set as the background of the page. ie how to pass the class:

    background: # 000 url (img/1.jpg) no-repeat;

    or

    background: # 000 url (img/2.jpg) no-repeat;

    background: # 000 url (img/5.jpg) no-repeat;

    —Answer—
    Thank you. I have already solved the problem.

    example:

    if (localStorage.getItem(“background”) != null) {
    getColour = localStorage.background;
    $(“body”).css({ ‘background’: “#090909 url(images/back/” + getColour + “.jpg) no-repeat scroll 50% 0” });
    }

    getColour = 1, 2 … 5

    result:
    images/back/1.jpg – just what I needed

    Reply
  • Janet Janet Jan 05, 2016 

    Thanks

    Reply

leave a comment

About This Site

Dreams are built from lines of code well it's true!
If you can dream it you can usually code it.

I have learned so much from other people on the Internet and this site is for me to give back some of what i have learned and hope people can now learn from me.
Have fun and surf safely,
Ian.J.Gough

protected by copyscape duplicate content check

Categories


Powered by Banner Bar 125