Develop Reference

Get one jQuery media query to fire

I have three CSS #media queries and I need to run some JavaScript to measure the height of a div and move a second div on some screen sizes. The issue is that all of my queries are applying, obviously because they all return true. How can I adjust this so that only one of the conditionals fire in jQuery, similarly to CSS?
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function () {
console.log($(window).width());
if ($(window).width() <= 1024) {
console.log ('tab land');
}
if ($(window).width() <= 980) {
console.log ('tab port');
}
if ($(window).width() <= 479) {
console.log ('phone port');
}
});
});

Use else if and check from mobile upwards:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 479) {
console.log('phone port');
} else if ($(window).width() <= 980) {
console.log('tab port');
} else if ($(window).width() <= 1024) {
console.log('tab land');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You could adjust your conditions:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 1024 && $(window).width() > 980) {
console.log('tab land');
}
if ($(window).width() <= 980 && $(window).width() > 479) {
console.log('tab port');
}
if ($(window).width() <= 479) {
console.log('phone port');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to disable scrollify.js on mobile

I am creating new web and need help with JavaScript.
What I want is disable scrollify JS on mobile.
Tried almost everything, not success.
Here is my code:
<script>
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
$.scrollify.disable() // this function is for disable mobile
});
</script>
Thank you

jQuery.scrollify({
touchScroll: false
});
touchScroll: A boolean to define whether Scrollify handles touch scroll events. True by default.

Why don't you check if it's mobile using userAgent and regex like this
You can execute your script only if it's not mobile
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these devices(userAgents)
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
});
}
You can try the below snippet in mobile SO site also. It's working
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these userAgents
console.log("Not Mobile..!");
}else{
console.log("This is Mobile");
}

check this code...
<script>
$(document).ready(function () {
var width = $(window).width();
var height = $(window).height();
if (width > 980 && height > 500) {
$(function () {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
});
} else {
$(".scroll").click(function (e) {
e.preventDefault();
});
$.scrollify.destroy();
}
$(window).resize(function () {
width = $(window).width();
height = $(window).height();
$(function () {
if (width > 980 && height > 500) {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
} else {
$.scrollify.destroy();
$(".scroll").click(function (e) {
e.preventDefault();
});
}
});
});
});

$.scrollify({
section : ".fullSec",
scrollSpeed:2000,
easing: "easeOutExpo",
offset : 0,
scrollbars: true,
setHeights: true,
updateHash: false,
afterResize: function() {
if( $(window).width() < 767) {
$.scrollify.disable()
}else{
$.scrollify.enable()
}
},
});

.scroll off to change the screen size

How can I resize image with jQuery scrolling only when the screen size is greater than or equal to 992px?
I've tried the following code, but it didn't work.
jQuery(function () {
/*Logo Resize*/
jQuery(window).resize(function () {
if (jQuery(this).width() < 992) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).width() >= 992) {
/*Logo Scroll*/
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() >= 250) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).scrollTop() < 250) {
jQuery('#logo-img img').attr('src', 'imgs/logo.png');
}
});
}
});
});

On mouseenter on toggled class

I use a little jquery to change the class of my menu when I resize my browser. That works but when I want to use mouseenter on the new class it doesnt work.
This is my code for resizing:
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
});
This is the code for the mouseenter:
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
If I change nav-top to nav-left in my markup (when the menu has the class nav-left on document ready) the mouseenter works fine.

try this :
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
});

How to call function only once in resize function?

Any idea how I can make a function be called only once using .resize, and then have it permanently cancelled or disabled?
$(window).resize(function () {
if ($(window).width() < 800) {
size = true;
mob();
}
});
UPDATE: Great stuff, thanks sdespont - got it to work with on/off:
$(window).on('resize',function () {
if ($(window).width() < 800){
agent = true;
mob();
}
});
then turn off the resize function once the condition is met:
$(window).off('resize');

jQuery has the .one method for that:
$(window).one("resize", function () { /* */ });

Use one function http://api.jquery.com/one/
$(window).one('resize',function () {
if ($(window).width() < 800){
size = true;
mob();
}
});
$(window).trigger('resize');
Or on/off functions http://api.jquery.com/on/
$(window).on('resize',function () {
if ($(window).width() < 800){
size = true;
mob();
}
});
$(window).trigger('resize').off('resize');