CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sakthivel Natarajan
Sakthivel Natarajan

Reputation: 125

Position absolute, window resize problem even after converting to percentage

$(document).ready(function() {

  //console.log($("#content").children().first());
  $("#content").append('<div id="slider"></div>');
  // initially reset
  var left = $("#content").children().first().position().left;
  var width = $("#content").children().first().width();
  $('#slider').css({
    'left': left,
    'width': width
  });

  var delay = 150,
    setTimeoutConst;
  $('.steps').hover(function() {
    var that = this;
    setTimeoutConst = setTimeout(function() {
      var left = $(that).position().left;
      var width = $("#content").children().first().width();
      $('#slider').stop().animate({
        'left': left,
        'width': width
      }, 300);
    }, delay);
  }, function() {
    clearTimeout(setTimeoutConst);
  });

})
#content {
  width: 95%;
  padding: 15px 2.5% 0px 2.5%;
  line-height: 0;
}

.steps {
  width: 20%;
  height: 150px;
  display: inline-block;
  background-color: white;
}

#slider {
  position: absolute;
  left: 0;
  height: 150px;
  width: 20%;
  background-color: rgb(240, 240, 240);
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="content-wrap">
    <div id="content">
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color:black"></div>
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color: black;"></div>
      <div class="steps" style="background-color: aqua;"></div>
    </div>
  </div>
</body>

</html>

I have created a slider div that slides when hovered over the div elements of class= "steps". The problem is when I resize the window the slider div is not adjusting its width. So I converted the width to percentage values. There are 5 div's (class="steps") inside a wrap, each with width=20%, along with the slider div inside the same wrap with width="20% (to match the width of steps div's). But the width of slider div is more than that of the steps div. What should I do, so that the slider div is same as the width of steps div and its adjusts its width when resizing the window?

Upvotes: 2

Views: 1706

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

Use Flexbox to create rows or columns of elements. Set display: flex on the #content element to make it a flex-container. All the children inside the container will be considered as flex-children.

CSS Tricks has a great guide on Flexbox. Be sure to check it out.

Here is an explanation why display: inline-block creates the whitespaces that you currently have.

You need to add some CSS rules to make the #slider element resize. First of all make sure that parent element, or container, of the slider has position: relative. This positions every absolute positioned element in relation the the relative parent.

Now the width: 20% on the slider will be the same width on a .step element and makes the slider resize without using JavaScript. If it is a styling issue, it probably can (and should) be fixed with CSS, remember that.

Also use the border-box model to combine padding and width on an element. By default all elements have box-sizing: content-box which will add padding to the width. For example: width: 100px and padding: 0 10px 0 10px will make the element width 120px.

Using box-sizing: border-box will not add the padding to the width (or height) and only adds padding to the inside of the element. MDN has some awesome examples to show how it works.

Check out the updated example and let me know if it works.

Edit

The issue with positioning on resize comes from the fixed valued position of the slider element. This value has to be recalculated to a percentage value based on the width of a single step.

You can do this by checking the index of the currently hovered upon element and multiply the index by the width of a single step. Now add the '%' string behind the number and you'll get values '0%' for the first index, '20%' for the second, '40%', and so on.

Now the slider element will be in the correct position at any time.

$(document).ready(function() {

  //console.log($("#content").children().first());
  $("#content").append('<div id="slider"></div>');

  var delay = 150,
    width = 20,
    setTimeoutConst;
  $('.steps').hover(function() {
    var $that = $(this),
      index = $that.index();
    setTimeoutConst = setTimeout(function() {
      var left = index * width + '%';
      $('#slider').stop().animate({
        'left': left,
      }, 300);
    }, delay);
  }, function() {
    clearTimeout(setTimeoutConst);
  });

})
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

#content-wrap {
  width: 100%;
  padding: 15px 2.5% 0px 2.5%;
}

#content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.steps {
  width: 20%;
  height: 150px;
  background-color: white;
}

#slider {
  position: absolute;
  left: 0;
  height: 150px;
  width: 20%;
  background-color: rgb(240, 240, 240);
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="content-wrap">
    <div id="content">
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color: black"></div>
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color: black;"></div>
      <div class="steps" style="background-color: aqua;"></div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions