CODEWITHSUNDEEP
javascriptjqueryhtml
Hour Grim
Hour Grim

Reputation: 43

Javascript error or hiccup?

So I have been working on a menu to show a business phone number I finally got everything to work as planned but now I am having a javascript lag, hiccup, or some type of delay / acting funny.

I have everything on jsfiddle so here is my work Jsfiddle code

If I could add picture I would to show what is being weird but I will try to explain it the best I can.

So when you click on the menu it sometimes show the

<h3> and <p>

correctly and other times you click it and it does not show the

<h3> and <p>

or I ran into when I click the X menu it will still show the

<h3> and <p> (message)

Upvotes: 1

Views: 128

Answers (2)

ADyson
ADyson

Reputation: 61839

Rather than trying to trigger the change on every separate bar, you can just trigger it on the element which forms the container of the menu. This is much simpler, since you only want to show/hide one particular element when the menu is clicked. HTML

The click events on the bars are removed, and the bars are given unique IDs to make them valid HTML.

<div class="container" onclick="myFunction(this)">
  <div id="bar-1" class="bar1"></div>
  <div id="bar-2" class="bar2"></div>
  <div id="bar-3" class="bar3"></div>
</div>

Javascript

myFunction now calls showphone, and showphone is greatly simplified to just show/hide a single element:

function myFunction(x) {
  x.classList.toggle("change");
  showphone();
}

function showphone() {
  div = document.getElementById("phone-1");
  if (div.style.display == 'none')
  {
     div.style.display = 'inline';
  }
  else
  {
    div.style.display = 'none';
  }
}

Events in JS bubble up the DOM. So in this example, if you click on a "bar", since it has no click event attached to it, the browser will work its way up the hierarchy of elements until it finds an element that does have a click event (in this case "container") and trigger that event. This feature means you can define a whole area that's clickable, even though it contains lots of other elements within it, and not have to define a click on each of the contained elements.

Here's a working example: https://jsfiddle.net/b9w61L0o/2/

Upvotes: 2

Zorken17
Zorken17

Reputation: 1896

You can also do it simple like this: 

function myFunction(x) {
  x.classList.toggle("change");
  $("#phone-1").toggle()
}
.container {
  display: inline-block;
  cursor: pointer;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.4s;
}

.change #bar-1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 4px);
  transform: rotate(-45deg) translate(-8px, 4px);
}

.change #bar-2 {
  opacity: 0;
}

.change #bar-3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}

.icon-bar {
  transition: all 0.3s ease;
  color: black;
  font-size: 16px;
  float: right;
  margin-right: 4px;
}

ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items side by side */

ul.tab li {
  float: right;
}


/* Style the links inside the list items */

ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  float: right;
}

.topright {
  float: right;
  cursor: pointer;
  font-size: 20px;
}

.topright:hover {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" onclick="myFunction(this)">
  <div id="bar-1" class="bar"></div>
  <div id="bar-2" class="bar"></div>
  <div id="bar-3" class="bar"></div>
</div>

<p class="fa fa-phone icon-bar">Phone numbers</p>

<ul class="tab">
  <div id="phone-1" style="display:none; float: right" class="tabcontent">
    <h3>Area / Place</h3>
    <p>This number is?</p>
  </div>
</ul>

But then you need to include jQuery and do the click event on the whole element instead of every "line".

Upvotes: 0

Related Questions