Develop Reference

Detecting device JS and toggle class

I want to detect a device width and height (responsive layout), so if return is true I want to toggle class "mobile" but I'm doing something wrong and I don't know what.
$(function detectmob() {
if(window.innerWidth <= 720 && window.innerHeight <= 1280) {
return true;
} else {
return false;
}
if (return=true) {
$(document).getElementByClass("box").addClass ('mobile');
}
}

Instead of returning true, you could just add the class there

return will exit out of the function from when it is encountered. You are looking for a variable isolated to detectmob based on which a class can be added.
function detectmob() {
var isMobile = false;
if (window.innerWidth <= 720 && window.innerHeight <= 1280) {
isMobile = true;
}
if (isMobile) {
$(document).getElementByClass("box").addClass('mobile');
}
}
But if you still want to check based on the return value then the logic has to be extracted out into a function which can have a return value.
function detectmob() {
var isMob = isMobile();
if (isMob) {
$(document).getElementByClass("box").addClass('mobile');
}
}
function isMobile() {
return window.innerWidth <= 720 && window.innerHeight <= 1280;
}

You should use user agent instead of screen size otherwise mobile with a huge resolution will be detected as PC (eg Pixel 2 XL have 1440 x 2880 screen). Also user may resize browser window on PC to 700x1000 and your code will detect it as mobile.

Detecting click on window scrollbar

I'm trying to pause the main window scroll when scrolling a table, which I've done but are having trouble enabling the main window scroll again after.
This function will pause the main window scroll when scrolling over table.
function preventWindowScroll() {
scrollTable = document.querySelector(".members-data");
if (scrollTable.contains(event.target)) {
var oldScrollPos = document.body.scrollTop;
window.onscroll = function () { window.scrollTo(0, oldScrollPos); };
} else {
// disable scrollTo in order to reenable main window pause
window.onscroll = function () {};
}
}
The problem is that if I try to scroll down by clicking and dragging the main window scrollbar it's still jammed by scrollTo.
I've tried doing an onclick event, but it doesn't work when clicking scrollbar.
document.body.onclick = function(e) {
scrollTable = document.querySelector(".members-data");
if (!scrollTable.contains(e.target)) {
window.onscroll = function () {};
}
};
I've also tried removing the event listener, but can't figure out where to put it.
document.body.removeEventListener('mousewheel', preventWindowScroll);
document.body.removeEventListener('DOMMouseScroll', preventWindowScroll);
If I could just detect when a user clicks on the main window scroll eit would work as intended.
note: I have achieved pausing the main window scroll other ways, but they all have slight drawbacks.
Thanks

I use this code. Works in Chrome.
yourTable.addEventListener('wheel', handleMouseScroll);
function handleMouseScroll(e) {
var delta = e.deltaY || e.detail || e.wheelDelta;
if (delta < 0 && this.scrollTop == 0) {
e.preventDefault();
}
if (delta > 0 && this.scrollHeight - this.clientHeight - this.scrollTop <= 1) {
e.preventDefault();
}
}

Modal Popup on Window exit - resets one time

I would like to use only one time modal when a user leaves on the Window.
$(document).mousemove(function(e) {
if (e.clientY <= 1) {
//Modal
}
});
Let me know how can I create it.

Assuming that you already have the modal element created in your HTML then I think this should do what you want...
$(document).mousemove(function(e) {
if (e.clientY <= 1 && modalShown != 1) {
modalShown = 1;
$('#myModal').modal('show');
}
});

jQuery responsive hover and click swtich

How to switch hover and click when window size change
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
$(window).resize(checkWidth);
However I found hover is always on, so I had to change to this way
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').off('click', function(){
......//code
});
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
but still doesn't work properly, if someone has a better solution?Thanks

Take a close look at $window.width(). I suspect that. Try changing it to $(window).width(). Make changes to the code that you provided at the top. Because the code at the bottom looks messed up.
Also make sure to check the window width by using an alert or log. Just to make sure that the if statement is working right.

Try it like this
var permit=2;
$('#clickPoint').on('click', function(){
if(permit==0)
{
......//code
}
});
$('#clickPoint').on('hover',function(){
if(permit==1)
{
......//code
}
});
function checkWidth() {
var windowsize = $(window).width();
if (windowsize > 480) {
permit=0;
}else {
permit=1;
}
}
$(window).resize(checkWidth);

Unexpected if/else results using booleans

I'm setting up some simple booleans that test for mobile layouts and touch devices, but I'm having some difficulty making the code more compact.
isTouch tests for touch devices.
mobile tests for when the screen width is below 769px.
My final if/else statement is to test if I'm on a mobile touch device (iPad, phone, whatever). I can alert the output and everything is expected, but the static_element still appears instead of swiper_element. I know I'm missing something with my booleans.
Help a rookie out?
$(document).ready(function () {
var windowWidth,
isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
mobile,
touchDevice;
$(window).on('load resize', function () {
windowWidth = $(window).width();
if (windowWidth < 769) {
mobile = true;
} else {
mobile = false;
}
if (isTouch = true) {
touchDevice = true;
} else {
touchDevice = false;
}
});
if (touchDevice && mobile) {
$('.static_element').hide();
$('.swiper_element').show();
} else {
$('.static_element').show();
$('.swiper-element').hide();
}
});

The swiper thing is not working, because there is a dash instead of an underscore in the last line of your code. And yes, you could simplify a few things (see the code below). I moved all mobile detection logic to a function, so we can reuse it anytime we want.
Note: Mobile detection is an art – mainly because there are many devices and use cases. Querying the "ontouchstart" capability works fine for most of the devices, it won't work on some devices. That's why I added the console.log, so you can check if the right code block is executed.
$(document).ready(function () {
var isTouch,
isMobile;
// Initially call the function to set isTouch and isMobie
detectMobile();
// If the window is reloaded or resized check again
$(window).on('load resize', detectMobile);
// Set the booleans when called
function detectMobile() {
// Always evalutes to true or false
isTouch = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0);
// Always evalutes to true or false
isMobile = $(window).width() < 769;
}
if (isTouch && isMobile) {
// Logs the actual status to the console
console.log("I'm a mobile device!");
$('.static_element').hide();
$('.swiper_element').show();
} else {
// Logs the actual status to the console
console.log("I'm a boring normal device!");
$('.static_element').show();
$('.swiper_element').hide();
}
});

Change your codes into this:
$(document).ready(function () {
var windowWidth,
isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
mobile,
touchDevice;
$(window).on('load resize', function () {
windowWidth = $(window).width();
if (windowWidth < 769) {
mobile = true;
} else {
mobile = false;
}
if (isTouch) {
touchDevice = true;
} else {
touchDevice = false;
}
});
if (touchDevice && mobile) {
$('.static_element').hide();
$('.swiper_element').show();
} else {
$('.static_element').show();
$('.swiper-element').hide();
}
});