Simonetos Simonetos - 2 months ago 7
jQuery Question

Load, save and reset jquery values using a cookie

I am working on a site, in which I had to add screen adjustments using scrollbars and I made it using this example. You can see the code below...

HTML CODE:

<h1>Image Editor with CSS Filters and jQuery</h1>

<!--Form for collecting image URL -->
<form id="urlBox" class="center">
<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing!">
<input id="go" type="button" value="Go">
</form>

<hr color="grey">

<!--Controls for CSS filters via range input-->
<div class="sliders">
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min="0" max="100" value="0">
</p>

<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min="0" max="10" value="0">
</p>

<p>
<label for="br">Exposure</label>
<input id="br" name="br" type="range" min="0" max="200" value="100">
</p>

<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min="0" max="200" value="100">
</p>

<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min="0" max="360" value="0">
</p>

<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
</p>

<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min="0" max="100" value="0">
</p>

<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
</p>

<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
</p>

<input type="reset" form="imageEditor" id="reset" value="Reset" />

</form>
</div>

<!--container where image will be loaded-->
<div id="imageContainer" class="center">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>

<p class="p">Demo by Vikas Lalwani. <a href="http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery" target="_blank">See article</a>.</p>


CSS CODE:

/* General styles for the page */
* {
margin: 0;
padding: 0;
}

body {
background-color: #D2D7D3;
font-family: monospace;
margin: 0 auto;
width: 960px;
}

h1 {
margin: 25px 0 25px 0;
font-size: 40px;
text-align: center;
}

hr {
margin: 20px 0;
}

form {
text-align: center;
}

/* Styles for URL box */

.url-box {
background-color: transparent;
display: inline-block;
height: 30px;
border: none;
border-bottom: 4px solid #b3b3b1;
padding: 0px 0px 0px 20px;
margin: 0px 0px;
width: 50%;
outline: none;
text-align: center;
font-size: 15px;
font-family: monospace;
font-weight: 100;
color: #000;
}

#go {
display: inline-block;
height: 50px;
width: 50px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 50%;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
}

/* Styles for image container*/

#imageContainer {
border: 2px solid grey;
border-radius: 10px;
padding: 5px;
width: 65%;
max-width: 600px;
float: left;
margin: 20px;
}

#imageContainer img {
border-radius: 10px;
width: 100%;
}

/* Styles for sliders*/

.sliders {
float: left;
border: 2px solid grey;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
}

.sliders p {
margin: 18px 0;
vertical-align: middle;
}

.sliders label {
display: inline-block;
margin: 10px 0 0 0;
width: 100px;
font-size: 16px;
color: #22313F;
text-align: left;
vertical-align: middle;
}

.sliders input {
position: relative;
margin: 10px 20px 0 10px;
vertical-align: middle;
}

input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border-radius: 5px;
/*required for proper track sizing in FF*/
width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 7px;
background: #ABB7B7;
border: none;
border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #4B77BE;
margin-top: -6px;
vertical-align: middle;
}
input[type=range]:focus {
outline: none;
}

input[type=range]:hover {
cursor: pointer;
}


#reset {
display: inline-block;
height: 40px;
width: 100px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
margin: 0 0 10px 0;
}

.p {
clear: both;
text-align: center;
padding: 40px 0 40px;
}


JQUERY DODE:

//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);


// editing image via css properties
function editImage() {
var gs = $("#gs").val(); // grayscale
var blur = $("#blur").val(); // blur
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var huer = $("#huer").val(); //hue-rotate
var opacity = $("#opacity").val(); //opacity
var invert = $("#invert").val(); //invert
var saturate = $("#saturate").val(); //saturate
var sepia = $("#sepia").val(); //sepia

$("#imageContainer img").css(
"filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);

$("#imageContainer img").css(
"-webkit-filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);
}

//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);

// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
}, 0);
});

// adding an image via url box
function addImage(e) {
var imgUrl = $("#imgUrl").val();
if (imgUrl.length) {
$("#imageContainer img").attr("src", imgUrl);
}
e.preventDefault();
}


What I can't aim, is to load, save or reset values of adjustments using a cookie and jquery!!! Any idea how can I do this?

Answer

You can manage cookies (get, add,update, etc..) in your script using one of these two examples:

https://github.com/js-cookie/js-cookie

https://github.com/carhartl/jquery-cookie

Then simply:

  1. Check for the cookie existence on page load:
  2. If cookie is available then load properties,
  3. If cookie don't exist - create a new cookie with the current properties.

An example (using jQuery cookie plugin)

Setting a cookie and storing some data:

// prepare and store data
var props = {
    name:'John',
    age:'31'
};
$.cookie('_storeProperties', JSON.stringify(props) );

Retrieve cookie and parse saved data:

var props = $.parseJSON( $.cookie('_storeProperties') );
// do something with the data..

Another approach (which I would prefer) would be using localStorage.

You can read a bit about localStorage in the following link:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Hope it helps a bit!