A Pen by Ian Hazelton

Thumbnail
This awesome code was written by IanHazelton, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright IanHazelton ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ian Hazelton</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/debc8e4f76619bb1424ba17c8.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
	<div class="header">&nbsp</div>
	<h1 class="title">Prompt user to complete mandatory field.</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi rerum molestiae quis cum labore dignissimos. Dolor sit vero deleniti accusamus eaque voluptatum dolorem adipisci, veritatis quis, quibusdam, et in minus?</p>
	<form method="post" action="#" id="awesomeForm">
	<input type="text" class="inputField" placeholder="First Name">
	<input type="text" class="inputField" placeholder="Last Name">
	<input type="text" class="inputField" placeholder="Telephone">
	<input type="text" class="inputField" placeholder="Email">
	<button id="triggerButton">Send</button>
	</form>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/IanHazelton/a-pen-by-ian-hazelton-ELvGye */
.wrap {
  display: flex;
  border: 1px solid #c9c9c9;
  flex-direction: column;
  min-height: 100rem;
  max-width: 320px;
  margin: 0 auto;
}

.header {
  background-color: #c9c9c9;
  min-height: 50px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 300px;
}

button,
input {
  display: block;
  box-shadow: inset 0 0 0 1px #e6e6e6;
  background: #f8f8f8;
  width: 100%;
  padding: 0.85em 1em 0.85em 1em;
  border-radius: 0.25em;
  border: 0;
  margin: 10px;
}

button {
  background: #313131;
  color: #fff;
  font-weight: bold;
}

.inputField {
  transition: all 500ms;
}
.inputField.prompt {
  box-shadow: inset 0 0 0 1px #000;
}

.title,
p {
  margin: 10px;
}

.title {
  font-size: 2.2rem;
  line-height: 1.4;
  margin: 20px 10px;
}


/*Downloaded from https://www.codeseek.co/IanHazelton/a-pen-by-ian-hazelton-ELvGye */
$(window).scroll(function() {
	var hT = $("#triggerButton").offset().top,
			hH = $("#triggerButton").outerHeight(),
			wH = $(window).height(),
			wS = $(this).scrollTop();
	console.log(hT - wH, wS);
	if (wS > hT + hH - wH) {
		//alert('you have scrolled to the h1!');
		$('.inputField').addClass('prompt');
	}
});

Comments