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> 

Answer 1

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()
}