Author: John Au-Yeung

To avoid Bootstrap dropdown menu close on click inside with JavaScript, we stop the click event’s propagation.

For instance, we write

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg" />
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg" />
            </div>
          </div>
          <a
            data-slide="prev"
            role="button"
            href="#carousel"
            class="left carousel-control"
          >
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a
            data-slide="next"
            role="button"
            href="#carousel"
            class="right carousel-control"
          >
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

to add the dropdown menu.

Then we write

$("ul.dropdown-menu.mega-dropdown-menu").on("click", (event) => {
  event.stopPropagation();
});

to select the drop down menu with jQuery $.

And we add a click handler to the element and then call stopPropagation to stop the click event’s propagation to stop the menu from showing when we click inside.

To detect iPad Mini in HTML5 and JavaScript, we check the screen propeerties.

For instance, we write

const isIpadMini = screen.availWidth === 768 && screen.availHeight === 1004;
const isIpadMini2 = screen.availWidth === 748 && screen.availHeight === 1024;

to get the screen’s available width with the screen.availWidth property.

We get the screen’s available height with the screen.availHeight property.

We compare their widths and heights to check the iPad Mini version.

To get div height with plain JavaScript, we use the clientHeight or offsetHeight property.

For instance, we write

const clientHeight = document.getElementById("myDiv").clientHeight;
const offsetHeight = document.getElementById("myDiv").offsetHeight;

to select the element with getElementById.

And then we get the clientHeight or the offsetHeight to get the div’s height.

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

To get the ID of the clicked button with onClick with JavaScript, we get the id property.

For instance, we write

const buttons = document.getElementsByTagName("button");

for (const button of buttons) {
  button.onclick = (e) => {
    console.log(e.target.id);
  };
}

to select the buttons with getElementsByTagName.

Then we loop through the buttons with a for-of loop.

In it, we set its onclick property to a function that logs the id of the button being clicked on.

onclick is called when we click on the button.

e.target is the element that trigged the event.

To convert user input string to regular expression with JavaScript, we use the RegExp constructor.

For instance, we write

const re = new RegExp("\\w+");
const matches = re.test("hello");

to call the RegExp constructor with the string with the pattern we want to match.

'\\w+' matches words.

Then we call re.test with the word we want to check if it matches.