run part of the script only when screen width is >768px

Question

var 'box-tip'moves the div when a box selection is made. I only want this to happen when screen width is above 768px. How to specify that part of the script to only run at certain screen width? The border selection should still be active but the moving text should be stop moving when below 768px. All suggestions are welcome.

var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");

numbers.forEach(function(box, index) {

box.addEventListener("click", function() {

letters.forEach(function(box) {
  box.classList.remove("showBorder");
});
if($( window ).width() > 768){
var info = document.getElementsByClassName('box-tip')[0];

if (index > 2) {
  info.style.left = 11 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';

letters[index].classList.add("showBorder");
}
else {

info.style.left = 0 + 'px';

info.style.visibility = 'visible';

letters[index].classList.add("showBorder");
}
   
});
  
  $(document).on("click", '.clicked', function(){
    $('.clicked').removeClass('selected');
    $(this).addClass('selected');
});

});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { border: 1px dashed #233354; }
.box-tip {
  display:inline;
  margin: auto;
 position: relative;
 visibility: hidden;
  padding-left:10px;
 }

.numberCircle {
  border-radius: 90%;
  font-size: 12px;
  border: 2px solid #000;
  color: #fff;
  background: #000;
  padding: 0 4px;
}

.numberCircle span {
  text-align: center;
  display: block;
}

li.selected {color:#fff;background-color:#000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-box">
  <li class="clicked">1</li>
  <li class="clicked">2</li>
  <li class="clicked">3</li>
  <li class="clicked">4</li>
  <li class="clicked">5</li>
  <li class="clicked">6</li>
  <li class="clicked">7</li>
  <li class="clicked">8</li>
</ul>
<div class="box-tip">
  <span>Regular length for your collar size</span>
  <span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
  <li class="border">a</li>
  <li class="border">b</li>
  <li class="border">c</li>
  <li class="border">d</li>
  <li class="border">e</li>
  <li class="border">f</li>
  <li class="border">g</li>
  <li class="border">h</li>
</ul>

score 4 · Accepted Answer · answered Apr 24 '17 at 20:14

4

you can add a condition in JQuery inside your script

// Returns width of browser viewport
if($( window ).width() > 768){
//If you want to add dynamically a class or remove one
$('.selector').addClass(); // or removeClass()
}

answered Apr 24 '17 at 20:14

Felipe Valencia

101
4

good answer - the breakpoint code works but i cant get the border selection to work below 768px. any idea what i have to include in else condition? – Olivbelle Apr 24 '17 at 20:40
I think the issue is when you are creating the listeners, try to pass the index to the event listener because you are using the variable index inside the listener and this might change because of the hoisting – Felipe Valencia Apr 24 '17 at 20:51
Exactly this is what im having issue with. how can i use your recommendation to integrate into my code? – Olivbelle Apr 25 '17 at 11:02
You don't need to create a event listener in every box, you can add an event listener to the parent, and with the propagation capture the target child, [check here](http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) there you can see how to perform the propagation, keep in mind that you can get the value of the child number to change the position, something like `$('#target').val() or $('#target').html` – Felipe Valencia Apr 25 '17 at 18:34

run part of the script only when screen width is >768px

1 Answers1