Offset Experiment

In this example below you will see how to do a Offset Experiment with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Offset Experiment</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="parent">
  <div class="child c1"></div>
  <div class="child c2"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/offset-experiment-zRBZRb */
.parent {
  width: 400px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}
.child {
  width: 40px;
  height: 50px;
  background-color: blue;
  display: inline-block;
  margin: 10px;
}

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/offset-experiment-zRBZRb */
var parent = $('.parent').offset().left;
var child = $('.c2').offset().left;

console.log($('.c2').position());

Comments