CODEWITHSUNDEEP
javascripthtmlcss
einacio
einacio

Reputation: 92

Animation (toggle class possibly) not working

So I'm making a website where I have several divs that should slide either from right, left, or top when user clicks on specific button or nav items. However, none of those are working. None of the divs will slide over when I click on the button that are supposed to make them slide. I'm using pure javascript to perform those actions. So far, I've tried several actions. First, I thought it was because I didn't have window.onload, but after adding it, nothing changed. Then I though maybe the links were still carrying the default actions, so I tried to add e.preventDefault in hopes that was the problem, it also didn't work. Then I found out something weird that made think maybe it is my computer that is not interpreting javascript correctly(weird thought, I know. But I was just considering anything since I was running out of solutions).But actually, it turns out that my computer or the editor is not reading "document" or window in javascript. It says both of them are not defined, which is weird since I have linked the javascript file correctly at the end of the body. So I decided to run it on JSFiddle to check whether it was really just my computer. However, even in JSFiddle the divs still won't slide when I click the button to make them slide.

I'm out of ideas. Since the project I'm doing is big, I extracted the part of divs that are not sliding to make things easier. The div you guys will see, is supposed to slide from the left when we click on the same div.

Here is the html code:

<!DOCTYPE>
<html>
  <head>
    <title>Emanuel Inacio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="home-page">
      <div id="nav-bar"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Here is the css code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condesed', 'San-serif';
}

#nav-bar {
  width: 50%;
  height: 100vh;
  background-color: #000000;
  transform: translateX(-50%);
  transition: transform 0.5s;
}

.active {
  transform: translateX(50%);
}

Finally, this is the javascript part:

var nav = document.getElementById("nav-bar");

window.onload = function () {
  nav.addEventListener("click", function () {
    nav.classList.toggle("active");
  });
}

Every other div that is not working has pretty much the same code base as this one. Hence I decided to post only this div. Thanks in advance!

Upvotes: 2

Views: 161

Answers (1)

Temani Afif
Temani Afif

Reputation: 273530

It's a specificity issue, ID is more specific than class so your style will never be applied. You need to adjust CSS like this:

var nav = document.getElementById("nav-bar");

window.onload = function() {
  nav.addEventListener("click", function() {
    nav.classList.toggle("active");
  });
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condesed', 'San-serif';
}

#nav-bar {
  width: 50%;
  height: 100vh;
  background-color: #000000;
  transform: translateX(-50%);
  transition: transform 0.5s;
}

#nav-bar.active {
  transform: translateX(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="home-page">
  <div id="nav-bar"></div>
</div>

Upvotes: 2

Related Questions