jQuery - Run function only on mobile

user_13710524 0
Viewed 69

The function converts the ul into a select / option input which I only want to happen while in mobile. If the screen size is > 479, then don't apply the function (i.e would remove the .option class and disable both click events).

How do I update the function to only apply when the screen size is <=479 on load / resize?

//
// ul-select
// https://github.com/zgreen/ul-select
//

$.fn.ulSelect = function() {
  var ul = $(this);

  if (!ul.hasClass("option")) {
    ul.addClass("option");
  }
  // SVG arrow
  var arrow = '<div class="icon icon--caret"></div>';

  $(".tab__menu--main")
    .find(".tab__btn.w--current", this)
    .addClass("active")
    .append(arrow);

  $(this).on("click", ".tab__btn", function(event) {
    // Remove div#selected if it exists
    if ($("#selected--option").length) {
      $("#selected--option").remove();
    }
    ul.before('<div id="selected--option">');
    var selected = $("#selected--option");
    $(".tab__btn .icon--caret", ul).remove();
    ul.toggleClass("active");
    // Remove active class from any <li> that has it...
    ul.children().removeClass("active");
    // And add the class to the <li> that gets clicked
    $(this).toggleClass("active");
    //Find and append the variables for each:
    var selectedText = $(this).find(".tab__text").text();

    if (ul.hasClass("active")) {
      selected.text(selectedText).addClass("active").append(arrow);
    } else {
      selected.text("").removeClass("active");
      $(".tab__btn.active", ul).append(arrow);
    }
  });
  // Close the faux select menu when clicking outside it
  $(document).on("click", function(event) {
    if ($(".tab__menu--main.option").length) {
      if (!$(".tab__menu--main.option").has(event.target).length == 0) {
        return;
      } else {
        $(".tab__menu--main.option").removeClass("active");
        $("#selected--option").removeClass("active").text("");
        $(".icon--caret").remove();
        $(".tab__menu--main.option .tab__btn.active").append(arrow);
      }
    }
  });
};

// Run
$(".tab__menu--main").ulSelect();
.tab__menu {
  border: 3px solid;
  flex-direction: column;
  display: flex;
}

.tab__btn {
  border-radius: 3px;
  padding: 0.5em;
}

@media only screen and (max-width: 479px) {
  .tab__btn {
    display: none;
  }
}

.option {
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 2em;
  margin: 0;
  padding: 0;
}

.tab__btn.active {
  -webkit-box-align: center;
  align-items: center;
  border: 1px solid #111;
  border-radius: 3px;
  box-shadow: 0 0 2px #aaa;
  color: #111;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.option.active {
  border: 1px solid #aaa;
}

.option.active .tab__btn {
  border: none;
  box-shadow: none;
  display: block;
}

.option.active .tab__btn:hover {
  background: #0074d9;
}

.option.active .tab__btn.active {
  background: #40a6ff;
}

.option.active .tab__btn.active:hover {
  background: #0074d9;
}

#selected--option {
  -webkit-box-align: center;
  align-items: center;
  box-sizing: border-box;
  color: #111;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  font-size: 2em;
  width: auto;
}

#selected--option.active {
  border: 1px solid #111;
  border-radius: 3px;
  box-shadow: 0 0 2px #aaa;
  padding: 0.5em;
}

#selected--option.active>.icon--caret {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.icon--caret {
  font-size: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <ul class="tab__menu tab__menu--main">
    <li class="tab__btn">
      <div class="tab__text">Option 1</div>
    </li>
    <li class="tab__btn w--current">
      <div class="tab__text">Option 2</div>
    </li>
    <li class="tab__btn">
      <div class="tab__text">Option 3</div>
    </li>
  </ul>
</div>

jquery
1 Answers

You can use matchMedia API it's JavaScript version of media query where you ask if the media match.

With this you can use:

let mql = window.matchMedia('(max-width: 479px)');

if (mql.matches) {
   // add select
}

NOTE: Good practice would be also to make this responsive maybe not add the select dynamically but hide and show it when media change. That way you can make this the same when you test it in browser with responsive debugger (Chrome feature). With show hide you can use normal CSS based media query to show hide the select.

user_3871940
Related