CODEWITHSUNDEEP
javascriptjquerycsshtml
Blinkydamo
Blinkydamo

Reputation: 1584

Change div background color using local storage

Been trying to get my page to collect the inputted colour and save it to the localStorage. I then want a div's background to be set with that colour. The colour must then be used for the div on each page of the site (The main content div is on every page and has the same ID).

This is what I have so far.

Jquery:

    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;
        $("#content").addClass(getColour);
    }
}
console.log(localStorage);


$(document).ready(function () {
    getColour = localStorage.background;
    $('.palette').click(function () {
        getColour = localStorage.background;
        $("#content").removeClass(getColour);
        localStorage.removeItem('background');
        var setColour = $(this).attr("id");
        $("#content").addClass(setColour);
        localStorage.setItem("background", setColour);
    });
});

HTML

<div id="colours">
    <div id="colorPicker1" class="palette colorPicker1"></div>
    <div id="colorPicker2" class="palette colorPicker2"></div>
    <div id="colorPicker3" class="palette colorPicker3"></div>
    <div id="colorPicker4" class="palette colorPicker4"></div>
    <div id="colorPicker5" class="palette colorPicker5"></div>
    <div id="result"></div>
</div>
    <div id="content"></div>

CSS

#content{
    text-align:justify;
    position:relative;
    margin:45px auto 0px auto;
    width:85%;
    height:100%;
    border-radius:25px;
    padding: 10px 10px 10px 10px;
    z-index:1;
    border:1px solid black;
}
.palette {
    cursor: pointer;
    height: 18px;
    width: 18px;
    border: 2px solid #000
}

.colorPicker1 {
    background: /*#e1ffff;*/none;
}
#colorPicker1 {
    position:fixed;
    top:15px;
    left:15px;
}
.colorPicker2 {
    background: #ffffb8;
}
#colorPicker2 {
    position:fixed;
    top:15px;
    left:40px;
}

.colorPicker3 {
    background: #ffc5ff;
}
#colorPicker3 {
    position:fixed;
    top:15px;
    left:60px;
}

.colorPicker4 {
    background-color: #99ff9c;
}
#colorPicker4 {
    position:fixed;
    top:15px;
    left:90px;
}

.colorPicker5 {
    background: #97acff;
}
#colorPicker5 {
    position:fixed;
    top:15px;
    left:125px;
}

#colours {
    position:relative;
    height:30px;
    width:100%;
    border:1px solid red;
}

I am very new to creating websites and this site is being made for a Uni assignment. I am trying to implement accessibility options into the site to change the background colour of the div to make reading easier. I have got it to work as far as storing the data into the localStorage, it changes the colour on the page I am veiwing but resets when I change page. I have the same script running on each page and am running the site locally not web hosted.

Any help on this would be great.

Cheers

Blinky

Upvotes: 2

Views: 1691

Answers (1)

epascarello
epascarello

Reputation: 207521

Move

    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;
        $("#content").addClass(getColour);
    }
}

into the document.ready. Right now you are trying to set a class on an element that is not rendered yet.

Upvotes: 3

Related Questions