Upon clicking outside the "subheader", I need to display the words "register" and "login" again, unless something is typed into the input fields... that's all there is to it, just click outside the subheader
$(document).ready(function() {
$('.register').click(function() {
$('.register').hide();
});
});
$(document).ready(function() {
$('.registers').hide();
});
$(document).ready(function() {
$('.register').click(function() {
$('.registers').show();
});
});.subheader {
background: #F3F3F3;
margin: 0 auto;
width: 100%;
height: 30px;
}
.register p {
display: inline-block;
float: right;
color: #179B75;
font-size: 12px;
padding: 0;
padding-right: 8px;
}
.register {
display: block;
left: 75%;
position: fixed;
top: 5px;
z-index: 10005;
height: 30px;
}
.register>p>input {
width: 100px;
height: 20px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 12px;
float: right;
display: none;
color: #179B75;
}
.register>p>input:enabled{
cursor: text;
}
.forms {
width: 400px;
height: 30px;
display:inline-block;
float:right;
}
.registers {
width: 400px;
height: 30px;
display: inline-block;
float:right;
}
.registerformsleft {
width: 130px;
height: 25px;
display: inline-block;
position: inherit;
float: left;
}
.registerformsright {
width: 130px;
height: 25px;
display: inline-block;
position: inherit;
float: right;
}
.register {
cursor:pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Prueba</title>
<link rel="stylesheet" href="css/Principal.css"/>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/jquery.bxslider.css" />
</head>
<body>
<header>
<div class="subheader">
<div class="register">
<p>Login
</p>
<p>|</p>
<p>Register</p>
</div>
<div class="forms">
<form class="registers" action="demo_form.asp">
<input class="registerformsleft" type="email" name="email" value="Email" placeholder="Format: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67060b000827000a060e0b4904080a">[email protected]</a>" onfocus="if (this.value=='Email') this.value='';"><br>
<input class="registerformsright" type="password" name="Password" size="10" value="Password" onfocus="if (this.value=='Password') this.value='';"><br>
<input class="submit" type="submit" value="Submit">
</form>
</div>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.inputs.js"></script>
</body>