We Keep Coding

How can i disable jquery function on max-width 768px?

I'm new at Javascript and Jquery. I need help, I`ve read a lot of solutions but I can not fix this.
I just can't get the syntax right. I need this scroll button not to be shown at all, on max-width 768px.
Thank you!
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
$('#scroll-top-button').fadeIn();
} else {
$('#scroll-top-button').fadeOut();
}
});
$('#scroll-top-button').click(function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 800);
});
});

Have you tried hiding the button using breakpoints in plain old CSS?
#media only screen and (max-width: 768px) {
#scroll-top-button {
display: none;
}
}

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>

My mobile menu Jquery script only runs once

Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}

It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});

declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});

Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc

Stop script from working if screen size is smaller than

I have this small snippet of jQuery:
if (jQuery(window).innerWidth() > 568) {
jQuery('#boardOfTrustees').masonry({
itemSelector: '.postWrapper',
});
}
This works fine, but I want to stop this from working, or uninitialize it on resize if the screen is smaller than a certain size. I've tried this:
jQuery(window).smartresize(function() {
if (jQuery(window).innerWidth() > 568) {
jQuery('#boardOfTrustees').masonry({
itemSelector: '.postWrapper',
});
}
});
.smartresize is a debounce script, it works well, but for this particular scenario, its not doing anything and the masonry script is still initialized. How can I make first set of jQuery stop applying itself to the elements if the screen is smaller than 568 pixels but then start working again if the resize is larger than 568?

This would work on load. Not on resize:
if (jQuery(window).innerWidth() < 568) {
jQuery('#boardOfTrustees').masonry({
itemSelector: '.postWrapper',
});
}
To make it work on resize then you would need to use the method destroy as detailed at the documentation.
$(window).resize(function () {
if (jQuery(window).innerWidth() < 568) {
jQuery('#boardOfTrustees').masonry('destroy');
} else {
jQuery('#boardOfTrustees').masonry({
itemSelector: '.postWrapper',
});
}
});

Destroy it
else {
jQuery('#boardOfTrustees').masonry('destroy')
}

though jQuery .toggle() dropdown (less than 991px width)

I am trying to toggle a menu/submenu for smaller screens. (max-width: 991px) When you click the "product" link, the .dropdown menu should show, and when the "accessories" link is selected, the .subdropdown class should show. It would be nice to tap anywhere off of the menus to release them at any depth.
Note: On screens min-width: 991px (desktop), the :hover will come into play.
Notice how my JavaScript code will not fire the sub "accessories" menu. You will have to refresh if you resize your window to test.
Here is the live example: Click Here
Here is my js code
$(function() {
if ($(window).width() < 991) {
$('#product-link').click(function() {
$('.dropdown').toggle();
});
if ('.dropdown' === true) {
$('#accessories-link').click(function() {
$('.subdropdown').show();
});
} else {
$('.dropdown').hide();
}
}
});
Edit:
Although not perfect, it works. I am still wanting to use .click and not .hover but this gets the job done.
$(document).ready(function() {
$('.top-menu').hover(
function(){
$(this).children('.sub-menu').fadeIn(200);
},
function(){
$(this).children('.sub-menu').fadeOut(200);
}
);
})

Your if statement is going to always evaluate to false.
Line 9: if ('.dropdown' === true)

In JQuery you are setting up event listeners on specific elements however your current setup is not taking advantage of the on method for your product-link. Try switching your code up to something like
$(function() {
$('#product-link').on('click mouseover', function(){
$('.dropdown').toggle();
if($('#product-link').hasClass('.dropdown')){
//something else here
}
});
});