In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="José Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="[email protected]" pattern="[email protected]" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>
openAB()and you are calling it asopenAb()note the case difference.