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>

Make div overlap horizontally the other 4 divs and stretch across the page(height 100%?)

So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!

I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>

The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.

You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>

For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>

not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle

It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});

use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position

The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/

Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"