Develop Reference

jQuery slidetoggle keeps toggling after window resize/ready combined

I want to add slidetoggle only when screen size is less than 768px. I also want this to work when user for some reason would resize the window manually.
I have come across a bug with jQuery where my dropdown menu will keep toggling after I resize the window. I've looked up this issue and tried adding return false; to click function and adding position: relative; overflow:hidden; to toggleable div(these should be a workaround according to some forums). No luck there. What causes this bug. I will include the whole function with the click function
//Call function on ready and window resize
$(document).ready(navigationMobile);
$(window).on('resize', navigationMobile);
function navigationMobile() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(".js-second-title").click(function () {
$(this).siblings('.js-menu').slideToggle();
$(this).toggleClass('js-open');
});
} else {
//Add href back to main link
$('.js-second-title').each(function () {
if ($(this).attr('href') === undefined) {
const allHref = $(this).siblings('ul').find('.js-all-link').attr('href');
$(this).attr('href', `${allHref}`);
$(this).siblings('ul').find('.js-all-link').remove();
}
});
}
}
Cheers!

I don't exactly know what is causing this bug. But I came up with this workaround.
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
$(this).addClass('js-closed');
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(document).on("click", '.js-second-title.js-closed', function (e) {
$(this).removeClass('js-closed');
$(this).siblings('.js-menu').slideDown();
$(this).addClass('js-open');
});
$(document).on("click", '.js-second-title.js-open', function (e) {
$(this).siblings('.js-menu').slideUp();
$(this).removeClass('js-open');
$(this).addClass('js-closed');
});
So here I am basically extening SlideToggle function. Before I call slide functions on click I give each js-second-title classes an extra class .js-closed so the browser is aware that the menu is closed. After that I call slideDown function when I click on closed menu title and slideUp when I click on open menu title.
I do not think that this is the best or most sematic solution so I would like to keep this topic open.

Jquery scroll to a div after click a button then hide the button after scroll

I wanted to hide a button when window scroll to a div and show again when scroll out from this div. I also wanted after click on this button this window will scroll to the div and hide the div. But problem is after click on the button and scroll to the div the button not hiddeing. here is my code
$(document).ready(function() {
$(window).scroll(function() {
var scroll_top = $("#right-side-bar").offset().top;
if ($(window).scrollTop() < scroll_top ) {
$(".timestsw-apply-stic").addClass('apply-sticky-btn');
} else {
$(".timestsw-apply-stic").removeClass('apply-sticky-btn');
}
});
$('a#stick').on('click',function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#right-side-bar").offset().top
}, 500,function () {
$(".timestsw-apply-stic").removeClass('apply-sticky-btn');
});
})
});
please help me how can i solve this. thanks

Sidemenu toggle when div hits top

So I've got a side-menu which toggles open when a certain div hits the top of the window.
The menu also has a toggle button to open and close it.
I'm having a problem where the the script continues to close the menu on scroll after it's been opened manually via the toggle button.
Is there any way of opening and closing the menu only once the div has passed the top of the screen, rather than the script constantly checking?
My script:
var stickyTop = $('#section1').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
});
});

Move your function to a variable, then you can call $(window).off() to remove the window listening to the scroll event. My example isn't exactly what you need but it should give you the on/off concept when using a function.
var stickyTop = $('#section1').offset().top;
var doToggle = function() {
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
$(window).off( 'scroll', doToggle);
});
$(window).on( 'scroll', doToggle);

Responsive jQuery doesn't work: Click below 768px width and hover above 768px

I need a menu to open when I am hovering over an li when above 768px window width, and it to open when I click the same li when below 768px window width. I keep having problems where the click, or hover, carries over between the two screen sizes (0-768px and 769 and up).
function colorChangeTest(width){
if (width <= 767) {
$('li').click(function() {
$(this).toggleClass('colorChange');
});
} else {
$('li').hover(function() {
$(this).toggleClass('colorChange');
});
}
}
$(function () {
var onLoadWidth = $(window).width();
colorChangeTest(onLoadWidth);
$(window).resize(function () {
var resizeWidth = $(window).width();
colorChangeTest(resizeWidth);
});
})
jsfiddle example
What is the best way to do responsive jQuery that tell something it can be clicked, or hovered, depending on screen size, and determine this on page load and window resize?

FYI it is better to attach the same event listeners once in code to the same elements. In your case each time when window is resizing new event listeners (hover or click) are attached again and again.
Use unbind to aviod it. For example:
function colorChangeTest(width){
var $li= $('li');
$li.unbind();
if (width <= 767) {
$li.click(function() {
$(this).toggleClass('colorChange');
});
} else {
$li.hover(function() {
$(this).toggleClass('colorChange');
});
}
}

Only want the function to work when the screen size is a certain width

I have this landing page that has a left navigation when it the screen with 1024 or larger but when the screen goes below 1024 the left navigation appears on the top of the main content of the page and the "Walmart Leverage becomes a button with on click event for the rest of the navigation to come down. the code works until I put the if statement to detect what size the screen is. Probably missing something to the code. Below is the link for the page.
http://dl.dropboxusercontent.com/u/2399619/walmartmilitary/talentbrew-LeverageHome.html
This is the code for the jQuery
$(window).resize(function() {
if( $(this).width() < 1024) {
var $showSubBtn = $("#sn-walmartleverage");
$showSubBtn.click(function(){
if($(this).hasClass("active")) {
$(this).parent().next().hide();
$(this).removeClass("active");
} else {
$(this).addClass("active");
$(this).parent().next().show();
}
return false;
});
}
});
Any help would be much appreciated.
Thanks

You can't put the click event handler inside the window resize event handler, you should just check the window size when the click happens
$("#sn-walmartleverage").on('click', function(e){
e.preventDefault();
if ($(window).width() > 1024) {
$(this).toggleClass('active').parent().next().toggle();
}
});