We Keep Coding

JQuery conditions based on "screen width"

I am super new to Javascript/JQuery, and I'm having trouble figuring out how to do this. I want to add it to a responsive site that I am working on in class.
I have a hamburger menu set up that hides/shows my menu, which works great. The thing is I only want the Javascript to run on a screen width of 414px or less. My menu is to be hidden until I click the hamburger.
For screens 415px, and above I don't want it to hide my menu, or show the hamburger and "X". I can hide the "X" and the hamburger easily enough with media queries if needed, but I still need my menu to display.
I tried to add an event loader, but must have done something wrong, as everything turned on (X, hamburger, & menu), and clicking did nothing. Please help me figure out how to make this work. I am super green at this, so any pointer would be greatly appreciated. Thanks ahead of time
// Hamburger menu
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});

You can use Jquery width() to get the current page width, and use it as a condition.
$(document).ready(function() {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
But remember that people often resize their screens so you need to handle that as well.
$(window).resize(function () {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}

Based on #m4dm0nk3y
I usually extract the common code in a function and call it on ready, and then on resize.
function alignStuff() {
WindowWidth = $(window).width();
if (WindowWidth < 415) {
console.log('small');
} else {
console.log('large');
}
}
$(document).ready(function() {
alignStuff();
})
$(window).resize(function() {
alignStuff();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Navbar change on scroll and on window load or resize

I have this issue that I'm not being able to work correctly.
I have a navbar that must change on scroll(this part works fine) but it must also change when window/viewport is < 991px.
It actually does work, but I must scroll to apply the effect.
Here's my code:
$(document).ready(function()
{
var $navbar = $('.navbar');
// ----------
$(function()
{
$(window).scroll(function()
{
if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
{
$navbar.addClass("compressed");
}
else
{
$navbar.removeClass("compressed");
}
});
});
});
If I shrink the broswer, nothing happens. At the first scroll, it works correctly. How should I trigger it when load or resize the window?
Thanks!

Just replace this:
$(window).scroll(function() {...});
with this:
$(window).on("load scroll resize", function() {...});
That will result in the function being called on any of the listed events.

Modal/Popup Changing Start Position if Scrolling Prior to Click

Good morning everyone. I have a novice JS question that I need help clearing up. First off I am an extreme beginner and self taught so forgive any ignorance.
I am building a new website for a business and one of the pages has a grid of products for customers. Each product has a button which creates a modal to give more information about the product. I am using a JS I found online to have DIFFERENT Modals inside some of these other modals. If you click the modal in question (star fish or sea horse) after scrolling the page first, the modals appear further down and cut off by the screen.
example: https://my.duda.co/preview/27d7a4cc?device=desktop&pageId=30782523
I know the author of the JS included a var to reposition the modal if the user had scrolled but it is not working in my favor or there is something more I need to do and don't have the knowledge for it.
I also know the code is sloppy and probably redundant in some places, I am not an expert. My JSFiddle: https://jsfiddle.net/shnt7vwu
<script>
var $html = $(document.documentElement);
var $modal = $('.modal-container');
function showModal() {
$html.css('overflow', 'hidden');
$modal.show().css('overflow', 'auto');
}
function hideModal() {
$html.css('overflow', 'visible');
$modal.show().css('overflow','visible')
}
$('.modal-btn').on('click', showModal);
$('.modal-close').on('click', hideModal);
</script>
<script>
var scrollTop = '';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $( window ).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('.popup:first') );
$(this).nextAll('.popup:first').show().addClass
('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $(this).nextAll('.popup:first').offset().top
}, 500);
} else {
$('.popup').hide();
$(this).nextAll('.popup:first').removeClass('popup-mobile').css
('top', newHeight).toggle();
};
});
$('html').click(function() {
$('.popup').hide();
});
$('.popup-btn-close').click(function(e){
$(this).parent().hide();
});
$('.popup').click(function(e){
e.stopPropagation();
});
</script>

You can place your whole 'div body grid' stuff inside a div with overflow-y enabled, then have your modals with vh:100 hidden outside
Just disable all the modals, div property until the correct user action is taken.
This way you can avoid calculations which may break between platforms and in edge cases.

How to add jquery in specific width

I am using skroller.js. But after using this jquery, Touch is not working on the mobile version of my site.

You want something like this?
Check this DEMO : http://jsfiddle.net/aq5vb/4/
Try to resize the result frame see what happens when the window's size reaches 960px.
JQUERY
$(document).ready(function(){
doThisScript();
});
$(window).on('resize', function () {
doThisScript();
});
function doThisScript() {
$('.content').html('Your current width is '+$(window).width());
if($(window).width() >= '960'){
// add your scripts here
$('.content').css({'background':'green'});
}
else{
$('.content').css({'background':'white'});
}
}

Unload jquery function if window resize

I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.

i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel