Develop Reference

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

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));
});

How to toggle `<div>` items upon click of another div?

I have <div> structure like this
<!-- Parent -->
<div id="parentCategory" >
<input type="image" src="a.jpg" onClick="showNextCat('nextCategory1', 'block', 'nextCategory2', 'nextCategory3')" />
<input type="image" src="b.jpg" onClick="showNextCat('nextCategory2', 'block', 'nextCategory1', 'nextCategory3')" />
<input type="image" src="c.jpg" onClick="showNextCat('nextCategory3', 'block', 'nextCategory1', 'nextCategory2')" />
...
</div>
<!-- 1st Child -->
<div id="nextCategory1" style="display: none;">
<input type="image" src="1a.jpg" />
<input type="image" src="1b.jpg" />
</div>
<!-- 2nd Child -->
<div id="nextCategory2" style="display: none;">
<input type="image" src="2a.jpg" />
<input type="image" src="2b.jpg" />
</div>
<!-- 3rd Child -->
<div id="nextCategory3" style="display: none;">
<input type="image" src="3a.jpg" />
<input type="image" src="3b.jpg" />
</div>
My JS
function showNextCat(id, visibility, h1, h2) {
var item = document.getElementById(id);
document.getElementById(h1).style.display = "none";
document.getElementById(h2).style.display = "none";
if (item.style.display !== "none") {
item.style.display = "none";
}
else {
item.style.display = visibility;
}
}
I don't want to hardcode the showNextCat() method to hide non-selected <div>
Please Improvise the JS method.

There are 2 possible option either if you are using jquery
then it will be easier.
Let's see first jQuery's solution
Apply class="category" to all the element which you want to manipulate dynamically.
put value in html want to show like data-show="nextCategory1"
apply css
.category{
display:none;
}
Put this JS function
$('#parentCategory input').on('click',function(e){
$('.category').hide();
$('#'+$(this).data('show')).show();
});
View Fiddle
Now Let's see Javascript solution which is also bit of simillar
function showNextCat(id) {
var item = document.getElementById(id);
var elem = document.querySelectorAll(".category")
var i;
for (i = 0; i < elem.length; i++) {
elem[i].style.display='none';
}
item.style.display='block';
}
View Fiddle2

using jQuery you can make this easy. first thing to do, remove all the onClick events from your buttons. then, you have to define a css class for the selected divs :
.selected {
display : block;
}
then on the buttons, specify the id of the category concerned, for example
<input type="image" src="a.jpg" select-category="nextCategory1" />
all you need to do now, is to define the click event for all the buttons
$("[select-category]").click(function () {
$("#" + $(this).attr("select-category")).toggleClass("selected");
});
Note : this is not the only solutions.

How to use localstorage to remember appended items

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());

make anchor tag clickable when checkbox is checked

is there anyway to make an anchor tag clickable if a checkbox is checked and visa versa (anchor tag not clickable if a checkbox is not checked)?
reason i am asking for this is because i am working on a custom mouthguard site and my client wants the visitor to click a checkbox (which means they agree to the terms) before being able to add the mouthguard to the cart and proceed to checkout.
right now i have an anchor tag around an image tag (due to signing a non-disclosure agreement, i can not display any code, but i will display the set up):
<input type="checkbox" name ="" id="" />
<img src="" border="" alt="" />
please let me know how i can accomplish my goal. thanks.

In the onclick for an anchor, you can return false if the checkbox is not checked, or return true if the checkbox is checked. This will mean the link will be followed when the checkbox is checked.
<input type="checkbox" name ="" id="terms" />
<img src="" border="" alt="" />
<script>
function checkTerms()
{
var ticked = document.getElementById("terms").checked;
if(!ticked) alert("Please accept the terms");
return ticked;
}
</script>

Say you had this wrapped in a div you could so something like this:
<div class="login">
<span>I have read and agree to the terms and conditions. <input type="checkbox" name ="" id="" /></span>
<img src="" border="" alt="" />
</div>
Then in your JavaScript.
$('.login a').click(function(ev) {
var $checkbox = $('.login input');
if ( $checkbox.is(':checked') ) {
console.log('GO AHEAD');
} else {
alert('You need to accept the terms and conditions before proceeding');
$checkbox.addClass('error');
ev.preventDefault();
}
});

You have to add this to the code:
<img src="" border="" alt="" />
Then inside checkInput, just check for the state of the checkbox.
If it is checked, then use
document.location = "Add to Cart Location";
Alternatively: you can use this:
document.getElementById("myCheckBox").addEventListener ("change", function() {
if(this.checked) {
document.getElementById("myLink").href = "Proper HREF";
} else {
document.getElementById("myLink").href = "#";
}
}