CODEWITHSUNDEEP
javascripthtmlcss
Duke Jake Morgan
Duke Jake Morgan

Reputation: 245

Computed Style doesn't show, graphically

I have a vertical navbar. When the client is on the website and viewing a section of the page that corresponds to the navbar button, that button should have a white border around it. When the client leaves that section for another section, that button should have a border around it and the last buttons border should disappear.

Unfortunately, only half of this works. I don't know why but when I scroll to another section the last sections corresponding button doesn't lose it's border, even though the debug messages state that the border color has been computed to be 'transparent'.

I've tried setting all faces of the border to transparent (top, bottom, left, right) and I've tried setting the style is jquery.

    $(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton);
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("portfolioButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}

The CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}

The HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="portfolioButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

I had expected the border to change from white to transparent. However, all I got was no change to the color of the border of the button of the section I had previously been looking at on the website:

Before Movement: https://gyazo.com/77171adefe255973709f11e305bfb030 After Movement: https://gyazo.com/b121d1d33b4f5f205df1468cd936352b

Source Before Movement: https://gyazo.com/92359267cf06cbe3b7c4942f04dbf9ea Source After Movement: https://gyazo.com/7cc03865e17fc42382774747fb30052a

Github Project File: https://github.com/TheMasteredPanda/Portfolio-Website/blob/master/src/scripts/src/navbarBorderManagement.js#L32

Upvotes: 3

Views: 73

Answers (1)

Chris W.
Chris W.

Reputation: 23270

Your problem is inconsistent naming conventions between your ID's and it's causing your element objects to get obfuscated, so if for example you were to breakpoint where you're setting your borderColor to reset it back to transparent, you'd see you're hitting a page HTMLDivElement and not the li you're aiming for. See changes below and have a great weekend, cheers!

$(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton + 'Button');
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("projectsButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="projectsButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions