CODEWITHSUNDEEP
javascriptcsscss-position
Sergi
Sergi

Reputation: 1240

Get the top position value of an element then add a percentage to it in JS

I am trying to create a function that adds 50% to the "top" value of the elements of an Array. So far I only managed to retrieve the position but in pixels and I am not sure how to add "50%" to those values. I also think there has to be an easier way to achieve this?

const aboutTags = Array.from(document.querySelectorAll(".about-tag"));

document.querySelector(".about-personal-container").addEventListener("mouseover", function() {

  const filteredTags = aboutTags.filter(tag => tag.classList.contains("personal-tag"))

  const getTagPosition = filteredTags.map(tags => tags.style.top = tagPosition = window.getComputedStyle(tags).getPropertyValue('top'));

  console.log(getTagPosition)
  //This gives the element top position but in pixels
});
#about-section {
  background: black;
  height: 100vh;
  position: relative;
  color: white;
}

.personal-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 10px;
  transition: all 1s;
}

.personal-tag1 {
  top: 5%;
  left: 15%;
}

.personal-tag2 {
  top: 15%;
  left: 35%
}

.personal-tag3 {
  top: 25%;
  left: 65%
}

#about-inner-grid-wrap {
  border: 1px solid blue;
  width: 300px;
  height: 50%;
  position: absolute;
  left: 40%;
  top: 50%;
  display: flex;
}

.about-inner-grid-tag-container {
  height: 100%;
  border: 1px solid white;
  flex: 1;
}
<section id="about-section">
  <span class="about-tag personal-tag personal-tag1">Personal tag</span>
  <span class="about-tag personal-tag personal-tag2">Personal second</span>
  <span class="about-tag personal-tag personal-tag3">Personal third</span>
  <span class="about-tag personal-tag personal-tag4">Personal tag</span>
  <span class="about-tag personal-tag personal-tag5">Personal tag</span>

  <div id="about-inner-grid-wrap">
    <div class="about-inner-grid-tag-container about-personal-container">
    </div>
</section>

As you can see when the container is hovered, I'm just able to get a log with the position in pixels. How could I simply add 50% to the top postion of each "personal-tag"?

Upvotes: 2

Views: 636

Answers (1)

Temani Afif
Temani Afif

Reputation: 272919

Use calc

const aboutTags = Array.from(document.querySelectorAll(".about-tag"));

document.querySelector(".about-personal-container").addEventListener("mouseover", function() {

  const filteredTags = aboutTags.filter(tag => tag.classList.contains("personal-tag"))

  const getTagPosition = filteredTags.map(tags => tags.style.top = tagPosition = 'calc('+window.getComputedStyle(tags).getPropertyValue('top')+' + 50%)');

  console.log(getTagPosition)
  //This gives the element top position but in pixels
});
#about-section {
  background: black;
  height: 100vh;
  position: relative;
  color: white;
}

.personal-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 10px;
  transition: all 1s;
}

.personal-tag1 {
  top: 5%;
  left: 15%;
}

.personal-tag2 {
  top: 15%;
  left: 35%
}

.personal-tag3 {
  top: 25%;
  left: 65%
}

#about-inner-grid-wrap {
  border: 1px solid blue;
  width: 300px;
  height: 50%;
  position: absolute;
  left: 40%;
  top: 50%;
  display: flex;
}

.about-inner-grid-tag-container {
  height: 100%;
  border: 1px solid white;
  flex: 1;
}
<section id="about-section">
  <span class="about-tag personal-tag personal-tag1">Personal tag</span>
  <span class="about-tag personal-tag personal-tag2">Personal second</span>
  <span class="about-tag personal-tag personal-tag3">Personal third</span>
  <span class="about-tag personal-tag personal-tag4">Personal tag</span>
  <span class="about-tag personal-tag personal-tag5">Personal tag</span>

  <div id="about-inner-grid-wrap">
    <div class="about-inner-grid-tag-container about-personal-container">
    </div>
</section>

Upvotes: 2

Related Questions