My form includes a <div>.
This particular <div> is a red circle. Even when JavaScript is disabled, it remains visible (I can use display: none to address this).
The issue arises when I re-enable JS - upon user interaction, the <div> moves down a line (it does not stay in its original position).
What bothers me is that I have input fields and the div is supposed to be at the end of each one... So what I would like (if possible) is for the div to remain hidden when JS is off and not jump down a line when JS is on and there is user interaction...
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="name1" >
<input type="text" id="namebox" placeholder="First name* ..."name="name">
<div class="span1">!</div>
</div>
<div id="name2" >
<input type="text" id="namebox1" placeholder="Last name* ..." name="surname">
<div class="span1">!</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS:
.span1{
background-color: white;
color: red;
height: 28px;
width: 28px;
font-size: 0.6em;
margin-right: 1px;
margin-bottom:2px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
border:2px solid red;
display:inline-block;
font-family:Verdana, Geneva, sans-serif;
}
JavaScript:
$(".span1").hide();
function nameEvent(){
$(this).next().toggle($(this).val().length <=1);
}
$("#namebox").on("focus input", nameEvent);