How to use localstorage to remember appended items - javascript

Here's an Example in which images and hidden inputs get added to the div container #area on click. I want to use localstorage to remember the appended items on page load, but it isn't working with this line
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
...
localStorage.getItem("imagecookie");
Could anyone show me how to get it to work?
HTML:
<div class="box">
<img data-term="A" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png"/>
<input data-term="A" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="B" src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png"/>
<input data-term="B" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="C" src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png"/>
<input data-term="C" class="compare" type="checkbox"/>
</div>
<div id="area"><div></div><div></div><div></div></div>
Code:
$('.compare').change(function(){
if($(this).is(':checked')){
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term',data_term);
var input = '<input type="hidden" name="imagecompare" value="'+data_term+'">';
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
}
else{
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term='+term+']')
findboximage.parent('div').empty();
}
});
$(document).on('click','#area > div',function(){
$(this).empty();
localStorage.clear();
});
localStorage.getItem("imagecookie");

Demo Fiddle : Store the contents; Retrieve back on page reload.
Demo : Just store the contents - Check the console to verify.
Storing HTML content would be a better option.
$('#area').find('div:empty:first').append(img).append(input)
localStorage.setItem("imagecookie",$('#area').html());

Related

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

html checkbox list that shows and hides links when filtered

I have written code that creates a checkbox list where when i click the checkbox below my list of options i would like a link to show underneath that the user can click (show/hide) I cannot figure out why my code will not work. If the user unchecked the box the link disappears but nothing happens when i click my check boxes. I would like to do this fix in JQuery
<!DOCTYPE html>
<html>
<div class ="container">
<head></head>
<body>
<input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />
<label for="grp1"> group 1 </label>
<div>
<input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" >
group_2</label>
</div>
</body>
</html>
You'll have to use javascript to hide/show the wanted elements in html. There are many approaches to this. The most basic one would be something like
<!DOCTYPE html>
<html>
<body>
<div id="container">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("container").onclick = function (e) {
//check every box if it's checked
if (document.getElementById('grp1').checked) {
document.getElementById('url1').style.display = 'block';
} else {
document.getElementById('url1').style.display = 'none';
}
if (document.getElementById('grp2').checked) {
document.getElementById('url2').style.display = 'block';
} else {
document.getElementById('url2').style.display = 'none';
}
}
</script>
</body>
</html>
Of course you can use different approaches like creating the element in javascript then adding it to the html if you don't like the idea if existing hidden elements. You might also use loops to loop through checkbox element and simply show/hide the url accordingly. And more to make the code flexible on any number of boxes. Something like this
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="checkBoxContainer">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
</div>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("checkBoxContainer").onclick = function (e) {
var linkNumber = 1; //This is number of the first url element with ud url1
var containerChildren = document.getElementById("checkBoxContainer").children;
//loop through the children elements
for (var i = 0; i < containerChildren.length; i++) {
var oneChild = containerChildren[i]; //catch only one child in a variable
//simply filter the input elements which are of type checkbox
if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){
//Show or hide the url accordingly.
if (oneChild.checked) {
document.getElementById('url' + linkNumber++).style.display = 'block';
} else {
document.getElementById('url' + linkNumber++).style.display = 'none';
}
}
}
}
</script>
</body>
</html>
The onclick HTML attribute doesn't work that way. The attribute value is executed as javascript. You can make a js function to show/hide the link.
Hi you want to try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.group-link{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="jsParent">
<label for="grp1">
<input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/> group 1
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
</div>
<div class="jsParent">
<label for="grp2">
<input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/> group_2
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
</div>
<script type="text/javascript">
function showLink(el){
var parent = el.parentElement.parentElement;
var linkEl = getAnchorEl(parent);
if(linkEl){
if(el.checked){
linkEl.classList = linkEl.classList.value.replace('hidden', '');
}else{
linkEl.classList = linkEl.classList.value + ' hidden';
}
}
}
function getAnchorEl(parent){
var childrens = parent.children;
var linkEl = null;
for (var i = 0; i < childrens.length; i++) {
var childEl = childrens[i];
if(childEl.classList.value.indexOf('jsLink') > -1){
linkEl = childEl;
break;
}
}
return linkEl;
}
</script>
</body>
</html>
Your question is undoubtedly a duplicate but I am answering because I would like to help you identify issues with the code you posted.
I notice you have a <div>tag between your tag and tag. Why? This is a bit of an over simplification but as a general rule never put anything between your <html> and <head> tag and only place <div> tags inside your <body> tag. Also be mindful of how you nest your elements. That tag starts after and before .
Even if that were correct placement you close the before you close your div arbitrarily in the middle of your body tag. you should never have
<div>
<p>
</div>
</p>
Instead it should look like this
<div>
<p>
</p>
</div>
In your onClick attribute you have a random URL. That will not open a new window. You new too put some javascript in there.
<input onClick="window.open('http://google.com')">
Also your second label tag does not have an opening, just a </label> close tag
To answer your question - I suggest you look at the jQuery toggle function.
<input type="checkbox" id="displayLink" />
Google
<script type="text/javascript">
$("#displayLink").click(function(){
$("#googleLink").toggle();
});
</script>
As a general rule you should favor event handlers (such as the $("").click() posted above) to handle events (like clicking) as opposed to html attributes such as onClick.

change div id on drop with jquery

I have a bit of code that lets me drag and drop elements. The problem is that i don't know how to change the id of the element when it's dropped. It needs to stay a list with the right numbers.
<div class="container">
<div class="block">
<div id="draggables">
<div id="dragbox1" class="stepbox">
<label>Step 1</label>
<input type='text' placeholder="Omschrijving" name="textbox1">
</div>
<div id="dragbox2" class="stepbox">
<label>Step 2</label>
<input type='text' placeholder="Omschrijving" name="textbox2">
</div>
<div id="dragbox3" class="stepbox">
<label>Step 3</label>
<input type='text' placeholder="Omschrijving" name="textbox3">
</div>
</div>
</div>
</div>
When i drag a div (for example the div with id dragbox1 down under the div with id dragbox3) i want the jquery to rename the div id's so that it stays in the same order from 1,2,3 and not 2,3,1.
I'm thinking it should be sometging like the folowing:
var divClass = /*div class name*/;
var divId = /*static div id name*/;
var checkDivOrder = function(){
if(/*check for divs with the name of the divClass*/) {
if (divId === /*static div id name*/) {
divId = /*divIdName*/ + 1;
} else {
divId = /*divIdName*/ + /*previous div id number*/ + 1;
}
}
};
//recall function
if(/*div being dropped*/){
checkDivOrder(/*prev div number + 1*/);
}
Could someone help me with this as my jquery and javascript skills are not that great.
According to my understanding you want you div in order top to down like dragbox1,dragbox2,dragbox3 in sequence.
you can do like this.
$('.stepbox').each(function(ind,obj){
$(this).prop('id','dragbox'+(ind+1));
});

Saving checkbox values causes issues with showing/hiding linked image

I have written a code to show or hide a picture based on the value of corresponding checkboxes. I was able to have the picture shown or hidden on reload if 'checked="checked"' is written into the checkbox.
I was able to write a code to save the value of the checkbox but then the picture is no longer tethered to the checked/unchecked value and changes with reload.
My end goal is to have the a checked checkbox to show the picture and unchecked checkbox to hide the picture and I need the value saved to allow the correct value to work on reload after a change has been made.
This is just a small snip of the overall code. The whole thing is a series of 64 checkboxes linked to 64 different pictures, which overlay a mapped background image.
I should also mention that this will ultimately be used for a SharePoint site, if that makes a difference.
Thanks in advance for any help!!
(There is a link to jsfiddle demo at the bottom)
HTML:
<a href="home.aspx">
<p id="A1R1" style="left:146px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A1R1" alt="A1R1" src="red.jpg" width="108" height="60" />
</p>
</a>
<a href="home2.aspx">
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A2R2" alt="A2R2" src="green.html" width="108" height="60" />
</p>
</a>
<fieldset class="fieldset-auto-width" style="width:165px">
<center>
<p style="font-size:25px">Show/Hide</p>
</center>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A1 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A1G" checked="checked" /> </center>
</fieldset>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A2 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A2G" checked="checked" /> </center>
</fieldset>
</fieldset>
<center>
<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
</center>
JQUERY:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
(function(i, $) {
var $A_1_G = $('#A1G'),
$A_1_R_1 = $('#A1R1');
var toggleMain = function() {
$A_1_R_1.slideToggle();
};
if ($A_1_G.is(':checked')) {
toggleMain();
}
$A_1_G.on('click', toggleMain);
})(document, jQuery);
(function(i, $) {
var $A_2_G = $('#A2G'),
$A_2_R_2 = $('#A2R2');
var toggleMain = function() {
$A_2_R_2.slideToggle();
};
if ($A_2_G.is(':checked')) {
toggleMain();
}
$A_2_G.on('click', toggleMain);
})(document, jQuery);
</script>
Javascript:
function save() {
var checkbox = document.getElementById('A1G');
localStorage.setItem('A1G', checkbox.checked);
var checkbox = document.getElementById('A2G');
localStorage.setItem('A2G', checkbox.checked);
}
function load() {
var checked = JSON.parse(localStorage.getItem('A1G'));
document.getElementById("A1G").checked = checked;
var checked = JSON.parse(localStorage.getItem('A2G'));
document.getElementById("A2G").checked = checked;
}
function wis() {
location.reload();
localStorage.clear()
}
load();
Link to fiddle code
This seems to take care of it: http://jsfiddle.net/w0yL5njs/
Move your 'toggleMain w/ jQuery' code block to after your 'save/load' code block, so that the checkboxes will be pre-checked before the images' initial visibility are set.
So the order of your <script> tags will be
a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
b) The script that uses jQuery.
c) your save/load script that doesn't use jQuery.
Actually, (b) and (c) can be in the same <script> but (a) must be separate.
Add display:none to the <p> containing the images.
Is that what class="hidden" was intended to do? You could add .hidden { display: none; } to your CSS...
// Remove
if ($A_1_G.is(':checked')) {
toggleMain();
}
// ADD
if ($A_1_G.is(':checked')) {
$A_1_R_1.show();
}else{
$A_1_R_1.hide();
}
//remove
if ($A_2_G.is(':checked')) {
toggleMain();
}
if ($A_2_G.is(':checked')) {
$A_2_G.show();
}else{
$A_2_G.hide();
}

localStorage everything, including dynamically created images inside a div container in jQuery

Original Example
My Example
I have a long list of images across different pages and users can click the images' own checkboxes to store the dramatically created images in a div container called #area, which is always present at the top of the site.
The original example only stores the images on a per-page basis. When you page through other pages, the container will become empty again unless you go back to the page where the stored images are in the list of results.
I want to know if it's possible to store the whole state of the #area container in localStorage so that it will always remember the appended images across the site. In the second example, I check the Chrome console and find that it can only store the empty <div></div> <div></div> <div></div> but not the appended images.
jQuery:
var $chks = $('.compare').change(function () {
if ($(this).is(':checked')) {
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term', data_term);
var input = '<input type="hidden" name="imagecompare" value="' + data_term + '">';
$('#area').find('div:empty:first').append(img).append(input);
} else {
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term=' + term + ']')
findboximage.parent('div').empty();
}
});
$(document).on('click', '#area > div', function () {
var term = $(this).find('img').data('term');
$('input[data-term='+term+']').removeAttr('checked');
$(this).empty();
});
if (('localStorage' in window) && window['localStorage'] !== null) {
var divtosave = $("#area").html();
localStorage.setItem('saveddiv', divtosave);
}
if ('saveddiv' in localStorage) {
$(".bigbox").html(localStorage.getItem('saveddiv'));
}
HTML:
<div class="box">
<img data-term="A" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png" />
<input data-term="A" class="compare" type="checkbox" />
</div>
<div class="box">
<img data-term="B" src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png" />
<input data-term="B" class="compare" type="checkbox" />
</div>
<div class="box">
<img data-term="C" src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png" />
<input data-term="C" class="compare" type="checkbox" />
</div>
<div class="bigbox">
<div id="area">
<div></div>
<div></div>
<div></div>
</div>
</div>
Updated Demo
Change the last condition to
if ('saveddiv' in localStorage) {
$("#area").html(localStorage.getItem('saveddiv'));
}
Also,
add the first if condition in a function, and call this function after appending.
function store() {
if (('localStorage' in window) && window['localStorage'] !== null) {
var divtosave = $("#area").html();
localStorage.setItem('saveddiv', divtosave);
}
}

Categories

Resources