0

I have created a side popup in my website, but I have an issue. It works fine, but only on the second click. I want it to work on the first click. When I click on it two times, it works. I already tried some other blogs tricks but it's not working.

What's going wrong?

I created it using simple JS, you can see my code below:

function openNav() {
  navMenuStatus = document.getElementById('popup').style.right;
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}
<div class="popup" id="popup">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

View on Codepen

showdev
  • 28,454
  • 37
  • 55
  • 73
Balvant Ahir
  • 610
  • 1
  • 9
  • 16
  • Please don't just post a link to you codepen, which is broken by the way. Please read this: https://stackoverflow.com/help/how-to-ask – Adam H Jul 17 '18 at 18:27
  • document.getElementById('popup').style.right returns "" the first time becaue the right attribute in the style hasnt been assigned. .style.right checks the style attribute, not the css – Adam H Jul 17 '18 at 18:30
  • U shud have searched first, See this post : https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript –  Jul 17 '18 at 18:44

2 Answers2

2

Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.

Note that style references the element's inline style and does not reference CSS applied by class.

I had some success by setting a default style attribute of -300px.

function openNav() {
  navMenuStatus = document.getElementById('popup').style.right;
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}
<div class="popup" id="popup" style="right:-300px">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

Alternatively, you could use getComputedStyle to find the right property set in your stylesheet.

function openNav() {
  navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}
<div class="popup" id="popup">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

Perhaps better yet, use toggle() to toggle the element's CSS class in classList, as recommended by Arash Kazemi.

var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');

function openNav() {
  popup.classList.toggle('hide');
}

trigger.addEventListener('click', openNav);
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

.popup.hide {
  right: -300px;
}
<div class="popup hide" id="popup">
  <div class="pmenu" id="popup_trigger">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
2

Because document.getElementById('popup').style.right is empty the first time you read it. The rule is not set for the element with id popup, instead it is set for the element with class popup.

A dirty quick solution would be checking for its equality with "0px". But a better way would be defining a class name .opened-popup with right equal to 0px. Then toggle that class on click. Like this:

function openNav() {
  document.getElementById('popup').classList.toggle("opened-popup");
}

Look at this for a good solution: https://codepen.io/anon/pen/EpyWQm

arashka
  • 1,226
  • 3
  • 17
  • 30