We Keep Coding

JQuery, toggle/accordion menu issues when reloading page

here is my code...
var menuToggle = false;
$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();
// Init Tooltips
$(function () {
$('.ipsg-tab').tooltip();
});;
// Init Menu
accordionMenu();
// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
if (!menuToggle) {
menuToggle = true;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$('.ipsg-container').addClass('ipsg-menu-collapse');
} else {
menuToggle = false;
$('.ipsg-container').removeClass('ipsg-menu-collapse');
}
});
});
function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
if (!menuToggle) {
if (!$(this).parent().hasClass('state-selected')) {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().slideDown('fast');
$(this).parent().addClass('state-selected');
} else {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
}
}
return false;
});
$('.sg-accordion > h3 > a').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().show();
$(this).parent().addClass('state-selected');
}
});
$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
}
});
$('.sg-accordion > h3 > a').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
}
I am trying to have my toggle menu closed or open depending on the page reload. So if i am using hamburger menu, and click on a link, i want the hamburger menu to stay after reload. Same with having the menu opened up, i want it so if i click on those links, for the menu to stay open on reload.
anyone have any ideas?

This is the sort of thing I would use localStorage or cookies for. You can set an variable for either that would allow for you to dictate if the menu should be opened or closed.

Asked Previously. You can use cookies for that as it is easy to implement and maintainable.
Link is here Jquery UI Accordion menu saving menu state even after refresh

Jquery functions not changing on window resize

I have the following jquery code that is aimed at running one function when the window is large (>=1024) and another when it is resized and small.
The console.logs appear as expected on resize, but the functions do not change. Meaning, if the browser was loaded in large size, when resized, the large function is still used.
(Resize code used from https://stackoverflow.com/a/4541963/1310375 and https://stackoverflow.com/a/9828919/1310375)
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(window).on('resize', function(){
var win = $(this); //this = window
waitForFinalEvent(function(){
console.log('Resize...');
if (win.width() >= 1024) {
console.log('large');
$('.header-navigation-menu > div > ul > li').on({
mouseenter: function() {
console.log('waitEnterExit');
waitEnterExit(this, true);
$(this).children('.nav-menu-div').addClass('open');
},
mouseleave: function() {
waitEnterExit(this, false);
},
});
function waitEnterExit(el, inside) {
var button = $(el);
setTimeout(function() {
var hovered = button.is(':hover');
if (hovered && inside)
button.children('.nav-menu-div').addClass('open');
else if (!hovered && !inside)
button.children('.nav-menu-div').removeClass('open');
}, 500);
}
}
if (win.width() <= 1023) {
console.log('small');
$('.menu-link-button').on({
click: function() {
$(this).parent().children('.nav-menu-div').slideToggle();
}
});
}
}, 500);
});

You are doing it in a wrong way, try the below steps and code,
First separate all functions and event bindings from window resize event.
Then check window's width and toggle the elements which are to be hide(if visible)
function waitEnterExit(el, inside) {
var button = $(el);
setTimeout(function() {
var hovered = button.is(':hover');
if (hovered && inside)
button.children('.nav-menu-div').addClass('open');
else if (!hovered && !inside)
button.children('.nav-menu-div').removeClass('open');
}, 500);
}
$('.header-navigation-menu > div > ul > li').on({
mouseenter: function() {
console.log('waitEnterExit');
var win = $(window);
if (win.width() >= 1024) {
console.log('large');
waitEnterExit(this, true);
$(this).children('.nav-menu-div').addClass('open');
}
},
mouseleave: function() {
if (win.width() >= 1024) {
console.log('large');
waitEnterExit(this, false);
}
},
});
$('.menu-link-button').on({
click: function() {
var win = $(window);
if (win.width() <= 1023) {
console.log('small');
$(this).parent().children('.nav-menu-div').slideToggle();
}
}
});
$(window).on('resize', function() {
var win = $(this); //this = window
waitForFinalEvent(function() {
if (win.width() >= 1024) {
console.log('large');
$('.menu-link-button').parent().children('.nav-menu-div').slideUp(); // hide it any way on large screen
} else {
$('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
}
console.log('Resize...');
}, 500);
});
If window>= 1024 and $('.menu-link-button') is sliding up again and again then check a condition for its visibility like
if (win.width() >= 1024) {
console.log('large');
$('.menu-link-button').parent().children('.nav-menu-div').is(':visible') // if visible then slideup
&&
$('.menu-link-button').parent().children('.nav-menu-div').slideUp(function(){ // hide it any way on large screen
$(this).hide();/*make it hide after slide up*/
});
} else {
$('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
}

jquery tip on appearance of a button

I have a div say div1 and I want when that div1 is completely scrolled then a button to appear on the navigation bar...else the button should remain hidden. I have tried the following code:
$(function(){
$("#b1").hide();
var h=$("#d1").height();
var h1=$("#d2").height();
var eventPosition=h+h1;
$(window).scroll(function{
if(window.screenY>=eventPosition)
{
fireEvent();
}
else{
fireEvent1();
}
});
fireEvent()
{
$("#b1").show();
}
fireEvent1()
{
$("#b1").hide();
}
});

you missed the function word
$(function () {
$("#b1").hide();
var h = $("#d1").height();
var h1 = $("#d2").height();
var eventPosition = h + h1;
$(window).scroll(function{
if (window.screenY >= eventPosition) {
fireEvent();
}
else {
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});

$(document).ready(function(){
$("#b1").hide();
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height()) >=
$(document).height())
{
fireEvent();
}
else{
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});
Here is your code with some changes. When it gets to the bottom a button will be shown.
Here is a jsfiddle example.
https://jsfiddle.net/okisinch/6t02bum1/1/
I hope this will help you to find the solution to your problem.

Prevent scrolling jquery script from running twice

I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?
Many thanks! Russ.
Javascript:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
return false;
});
});
Here is the jsfiddle link to my code: jsfiddle link

You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation.
You can store this choice with cookie but if the client deletes his cookies, it's lost.

You can remove event scroll from window and for localStorage do something like that:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
if(localStorage['noNotification'] == 'true'){
$(window).off('scroll');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
$(window).off('scroll');
localStorage['noNotification'] = 'true';
return false;
});
});

try this http://jsfiddle.net/AbwXu/4/
var notdisplayed=true;
$(function(){
var target = $(".box");
if($(window).scrollTop() > 30){
target.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 30 && notdisplayed){
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
notdisplayed=false;
}
});
$('a.close').click(function() {
$($(this).attr('href')).slideUp();
notdisplayed=false;
return false;
});

Fixed position on 2 different div ids

I have a page that requires 2 divs to get fixed position once certain scrolling has occured. Issue is i need to use 2 different codes for each one, because I can't place them on same div.
This is the jquery code I use.
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
window.onscroll = function() {
if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
if ($(window).height() > 20) {
$('#wrappernav').addClass('wrappernavstatic');
}
}
else {
$('#wrappernav').removeClass('wrappernavstatic');
}
};
}
});
and I need to add another one for another div but for 250px. But when i put both on same page, it gets conflicted and only the second one is working with the first's details.
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
window.onscroll = function() {
if ($('body').scrollTop() > 300 || $('html').scrollTop() > 300) {
if ($(window).height() > 20) {
$('#wrappernavfilter').addClass('wrappernavfilterstatic');
}
}
else {
$('#wrappernavfilter').removeClass('wrappernavfilterstatic');
}
};
}
});
How can I both mix them to be active?

You can use .scroll() to bind both handlers:
$(window).scroll(function () {
// ...
});
Rather than being limited to just 1 with window.onscroll:
window.onscroll = function () {
// ...
};
So, for the 1st snippet in your question:
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
$(window).scroll(function() {
if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
if ($(window).height() > 20) {
$('#wrappernav').addClass('wrappernavstatic');
}
}
else {
$('#wrappernav').removeClass('wrappernavstatic');
}
});
}
});