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);
Related
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.
So every time I close the popup modal the page will refresh and the popup will appear again so how do I prevent the page from refreshing and have the popup to fadeout once the user click close?
I am not sure if using e.preventDefault(); will do the trick.
Below are my code. Thank you.
$(document).scroll(function(){
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
} else
$(".popup-close").click(function(e){
closeSPopup();
});
});
function closeSPopup(e){
$("#mc_embed_signup").fadeTo(0);
e.preventDefault();
}
You need to pass the parameter e
$(".popup-close").click(function(e){
closeSPopup(e);
});
To not show on scroll after user clicked close, try this
$(document).scroll(function(){
console.log('scrolling - '+$("#mc_embed_signup").data('userClosed'));
if (!$("#mc_embed_signup").data('userClosed')) {
$(".popup-close").click(function(e){
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
}
}
});
function closeSPopup(e){
e.preventDefault();
$("#mc_embed_signup").data('userClosed',true);
$("#mc_embed_signup").fadeTo("slow", 0, function(){
//fadeto only set the opacity and doesn't actually hide the div
//So you need to hide the div after fadeto
$("#mc_embed_signup").hide();
}); //check fadeto here http://api.jquery.com/fadeTo/
}
I've written a function which makes my top-bar ($header) fixed if you scroll down on device ( < 992 ) which works fine. And when I resize, I use the function fixedTopCheck() again and it removes the .fixed class (in the else statement). This also works fine. But then when I scroll, it suddendly gives top the class .fixed again. So this part is getting ignored if ($(window).width() < 992) (which only happens when resizing, if I refresh with a window above 992px it works fine).
So is this resizing messing with the recognition of $(window).width()? (When I console log it, it shows the correct width size).
My code:
$(function()
{
var $header = $('header.top');
var $input = $header.find('input[type=search]');
var $search = $header.find('div.search');
var $container = $('main#content');
var $searchBtn = $search.find('button.icon-search');
var $closeBtn = $search.find('span.icon-cross');
$closeBtn.css('display', 'none');
function fixedTopCheck()
{
if ($(window).width() < 992)
{
$(window).on('scroll', function()
{
if ($(window).scrollTop() > 75)
{
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
// Turn top into fixed menu
$header.addClass('fixed');
$container.addClass('fixed');
// Hide search bar and make it smaller
$input.css('display', 'none');
// Prevent search button to search
$searchBtn.on('click', function(e) {
e.preventDefault();
});
// Open search bar when clicking button
$(document).on('click','.icon-search',function()
{
$searchBtn.unbind('click');
$input.css('display', 'inline-block');
$searchBtn.css('display', 'none');
$closeBtn.css('display', 'inline-block');
$input.focus();
});
// Close search bar when clicking button
$(document).on('click','.icon-cross',function()
{
$searchBtn.on('click', function(e)
{
e.preventDefault();
});
$input.css('display', 'none');
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
});
}
else
{
// Reverse fixed menu
$header.removeClass('fixed');
$container.removeClass("fixed");
$input.css('display', 'inline-block');
// Return search function
$searchBtn.unbind('click');
// Reset search form when going top and search form is still opened
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
});
}
else
{
console.log("hello");
// Remove fixed top
if($header.hasClass("fixed"))
{
$header.removeClass("fixed");
}
if($container.hasClass("fixed"))
{
$container.removeClass("fixed");
}
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
}
fixedTopCheck();
// if window is resized check again
$( window ).resize(function() {
fixedTopCheck();
});
});
Your code is following a lot of bad practices.
dont nest your event listeners inside each other. this will cause setting an event listener on the same component everytime its container event triggers (on each resize is VERY heavy aswell).
instead of using bind and unbind, make a check the width inside each event and follow actions depending on that.
another solution for replacing bind and unbind in your case is to keep the default button events, but disable the button so it cannot be clicked instead of unbind.
This will answer your question:
adding events inside resize, will not make them only work on that size in the if statement, you have to put the event outside the resize event and check whenever that event happens on the scroll and size.
When the page is loaded and the width of the page is <992px, the scroll event is created. When you resize to >992px the scroll event will still exist.
I would recommend binding the scroll event only once on page load (not after each resize) and check the width inside of that method to decide what it should do when it's scrolling.
I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
I've a simingly simple task at hand, but something is not working correctly :|
There is a button that opens full screen menu, fading out all other content. There is another button that closes menu and fades-in content.
But menu window height can be quite different from content height. So when user clicks open menu, he jumps to the top of the window. But when user closes window he should return to the original window scroll position (exactly where be clicked open menu).
I've this so far *window.scrollTo(0,content_scroll_pos); doesn't work! Well it jumps to 0 0. But for given I know content_scroll_pos variable is not 0.
//Content window position, before calling menu
var content_scroll_pos;
//Show menu
$("#open_nav").on("click", function(){
//
content_scroll_pos = $(document).scrollTop();
//
$("#grid_index, #sidebar-big").fadeOut("fast", function(){
window.scrollTo(0,0);
$("nav").fadeIn();
});
return false;
});
//Hide menu
$("#close_nav").on("click", function(){
$("nav").fadeOut("fast", function(){
window.scrollTo(0,content_scroll_pos);
$("#grid_index, #sidebar-big").fadeIn();
});
return false;
});
Fixed problem, by just rearranging events:
//Content window position, before calling menu
var content_scroll_pos;
//Show menu
$("#open_nav").on("click", function(){
//
content_scroll_pos = $(window).scrollTop();
//
$("#grid_index, #sidebar-big").fadeOut("fast", function(){
window.scrollTo(0,0);
$("nav").fadeIn("fast");
});
return false;
});
//Hide menu
$("#close_nav").on("click", function(){
$("nav").fadeOut("fast", function(){
$("#grid_index, #sidebar-big").fadeIn("fast");
window.scrollTo(0,content_scroll_pos);
});
return false;
});