We Keep Coding

How to automaticlly create an InputField, when a a position is clicked on a picture?

I am trying to display a highlighted circle when the user double clicks on a certain part of an image(which should be erasable if clicket wrong). If the wanted position is clicked i want to create an "ID" and next to it a simple Inputfield.
The Inputfields should be in a countainer/box which is scrollable.
How can I achieve this ?
here is a edited pic as example for what i hope to achieve:
till now i only did the ground work like bulding the header, footer and sidebar
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: red;
width: 1000px;
height: 800px;
}
#header {
width: 100%;
height: 100px;
background-color: blue
}
#footer {
width: 100%;
height: 50px;
background-color: green;
clear: both;
}
#menue-right {
width: 300px;
height: 650px;
background-color: black;
float: right
}
#content {
width: 700px;
height: 650px;
background-color: yellow;
float: left;
}
#content-center {
width: 500px;
height: 400px;
background-color: darkorange;
margin: auto;
margin-top: 125px
}
#wundbild {
height: 400px
}
<div id="wrapper">
<div id="header">
<h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
</div>
<div id="menue-right">
</div>
<div id="content">
<div id="content-center">
<img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
</div>
</div>
<div id="footer">
</div>
</div>

jQuery Change CSS value if class not present

I'm trying to create a lille script to go trough my page and check if a class is present in any <div>. If the class is present then there will be no action.
It will look for class="blue" and if it find it it will do nothing. If it doesn't fint class="blue" it will change background color for class="yellow". What it does it change the background color for class="yellow" not matter what. What is wrong?
$("div").each(function() {
if (jQuery(this).attr('class') != undefined && jQuery(this).hasClass('blue')) {} else {
$('.yellow').css('background', 'green')
}
});
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
Blue
</div>
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>

One liner... :)
http://jsfiddle.net/yak613/bcgajp6q/
Basically, you want that if a blue is there, the .yellow is green. Otherwise, it stays yellow.
You can see what happens when the blue is there by going to the fiddle (^above) and uncommenting the blue.
if(!$(".blue").length) $(".yellow").css('background-color', 'green');
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="blue">
Blue
</div> -->
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>

All you need to do is simply check if the target element doesn't have the .blue class (with if (!$(this).hasClass('blue'))).
This can be seen in the following:
$("div").each(function() {
if (!$(this).hasClass('blue')) {
$('.yellow').css('background', 'green')
}
});
.blue {
background: blue;
width: 100px;
height: 100px;
}
.red {
background: red;
width: 100px;
height: 100px;
}
.yellow {
background: yellow;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
Blue
</div>
<div class="red">
Red
</div>
<div class="yellow">
Yellow
</div>

Make div disappear and appear by clicking another div

I created two divs and I want the one div to disappear and appear by clicking the other one. I tried using Jquery and javascript, but it doesn't seem to be working. Basically, I want the blue one to disappear and appear by clicking the red one.
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></div>

use .toggle() for example...
$(function(){
$("#red").on('click', function(){
console.log('click on red div');
$("#blue").toggle( "slow", function() {
// Animation complete.
});
});
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>
<div id="blue"></div>

I am just curious, why don't simply change the selector from id to class (#blue to .blue ) in the CSS:
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
.blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></div>

overlay footer over div

I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>

<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)

Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}

How to increase size of something in class, but not other elements in class?

Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output

You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>

As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>