Stop div appearing after FadeIn upon scroll - javascript

I am using fadeIn on a div
$(document).scroll(function() {
$('.bottomMenu_alert').fadeIn();
});
The user can close the div by clicking anywhere outside the div by using
$(document).click(function(event) {
if ( !$(event.target).hasClass('.bottomMenu_alert')) {
$(".bottomMenu_alert").hide();
}
});
But when the user scrolls again the div reappears.
How can I stop the div reappearing?

You can set a simple flag variable to lock the div and only fade it in if it is not locked. See this:
var divLocked = false;
$(document).scroll(function() {
if (!divLocked) { // show only if not locked
$('.bottomMenu_alert').fadeIn();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('.bottomMenu_alert')) {
$(".bottomMenu_alert").hide();
divLocked = true; // lock it after the first click
}
});

Related

updating function when nav link is clicked

Hello I have a feature where when you click a link in the navigation the content of the body switches and I was combining it with a little script from this question and it works great. The only thing is that if you click a link and don't scroll the images won't show up unless you scroll at least 1px. So I was wondering if there's a fix for this. JSFiddle.
Side question: Would it be possible to wait for the content to show up until the page is fully scrolled up?
Script:
$(window).on("load",function() {
function fade(pageLoad) {
var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
var min=0, max=1, threshold=0.01;
$(".fade").each(function() {
/* Check the location of each desired element */
var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
/* Fade element in/out based on its visible percentage */
if (objectTop < windowTop) {
if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if (objectBottom > windowBottom) {
if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
});
} fade(true); //fade elements on page-load
$(window).scroll(function(){fade(false);}); //fade elements on scroll
});
You can achieve it by taking fade method outside the load event listener that will make it available everywhere. And then call it from on the click of nav buttons.
See the js below:
$(window).on("load",function() {
this.fade(true); //fade elements on page-load
$(window).scroll(function(){this.fade(false);}); //fade elements on scroll
});
//Take below fade method outside of the load event listener.
function fade(pageLoad) {
var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
var min=0, max=1, threshold=0.01;
$(".fade").each(function() {
/* Check the location of each desired element */
var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
/* Fade element in/out based on its visible percentage */
if (objectTop < windowTop) {
if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if (objectBottom > windowBottom) {
if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
});
}
// change activenav class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp
// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");
// loop through the buttons using for..of
for (let button of Buttons) {
// listen for a click event
button.addEventListener('click', (e) => {
// et = event target
const et = e.target;
// slect activenav class
const activenav = document.querySelector(".activenav");
// check for the button that has activenav class and remove it
if (activenav) {
activenav.classList.remove("activenav");
}
// add activenav class to the clicked element
et.classList.add("activenav");
// select all classes with the name content
let allContent = document.querySelectorAll('.contentsec');
// loop through all content classes
for (let contentsec of allContent) {
// display the content if the class has the same data-attribute as the button
if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
contentsec.style.display = "block";
}
// if it's not equal then hide it.
else {
contentsec.style.display = "none";
}
}
this.fade(true); //Call fade method on click
});
}
You can test it here.

Closing toggle menu not working properly with JQuery code

I am working on closing toggle menu for mobiles and having a small problem. So what i want is when the toggle menu is active, user to be able to close it by touching somewhere on the screen on his device. I almost got it working, but when closed the basket in the header disappears and the menu doesn't retrieve to a hamburger icon. I am working on Wordpress website, just to notice.
I guess the problem comes from this: aria-expanded="true" , because the default value should be false after the user has closed it.
So my website is:
https://www.ngraveme.com/bg
my JQuery code is:
jQuery(document).ready(function($) {
var $menu = $('.menu');
$('.menu-toggle').click(function() {
$menu.toggle();
});
$(document).mouseup(function(e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&&
$menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.hide();
}
});
});
and the original js code written from the theme i am using in wordpress is:
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
* Also adds a focus class to parent li's for accessibility.
* Finally adds a class required to reveal the search in the handheld footer bar.
*/
(function() {
// Wait for DOM to be ready.
document.addEventListener('DOMContentLoaded', function() {
var container = document.getElementById('site-navigation');
if (!container) {
return;
}
var button = container.querySelector('button');
if (!button) {
return;
}
var menu = container.querySelector('ul');
// Hide menu toggle button if menu is empty and return early.
if (!menu) {
button.style.display = 'none';
return;
}
button.setAttribute('aria-expanded', 'false');
menu.setAttribute('aria-expanded', 'false');
menu.classList.add('nav-menu');
button.addEventListener('click', function() {
container.classList.toggle('toggled');
var expanded = container.classList.contains('toggled') ? 'true' : 'false';
button.setAttribute('aria-expanded', expanded);
menu.setAttribute('aria-expanded', expanded);
});
// Add class to footer search when clicked.
document.querySelectorAll('.storefront-handheld-footer-bar .search > a').forEach(function(anchor) {
anchor.addEventListener('click', function(event) {
anchor.parentElement.classList.toggle('active');
event.preventDefault();
});
});
// Add focus class to parents of sub-menu anchors.
document.querySelectorAll('.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a').forEach(function(anchor) {
var li = anchor.parentNode;
anchor.addEventListener('focus', function() {
li.classList.add('focus');
});
anchor.addEventListener('blur', function() {
li.classList.remove('focus');
});
});
// Add an identifying class to dropdowns when on a touch device
// This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
if (('ontouchstart' in window || navigator.maxTouchPoints) && window.innerWidth > 767) {
document.querySelectorAll('.site-header ul ul, .site-header-cart .widget_shopping_cart').forEach(function(element) {
element.classList.add('sub-menu--is-touch-device');
});
}
});
})();
Try replacing your jQuery code with this:
jQuery(document).ready(function($) {
$(document).mouseup(function(e) {
var $menuContainer = $('.menu');
var $menu = $menu.find('ul');
var $container = $('.site-navigation');
var $button = $container.find('button')
if (!$menuContainer.is(e.target) && $menuContainer.has(e.target).length === 0) {
if ($container.hasClass('toggled')) {
$button.attr('aria-expanded', false);
$menu.attr('aria-expanded', false);
}
}
});
});
It uses the vanilla-js code from the template for hiding/showing the menu, but with jQuery synthax.

ScrollTop with button & scroll with JQuery

I have a website with two scroll options. When you scroll down, it scrolls to the anchor Point 1.
I also have a Button which jumps to the same anchor point.
My problem: When I click the Button, the site jumps to the Anchor, but because there are two ways to the anchor, it triggers the first scroll option as well.
jQuery(document).ready(function($) {
var flag = true;
$(window).scroll(function () {
if (flag == true) {
scroll = $(window).scrollTop();
if (scroll > 50) $('#scroll-down')[0].click();
flag = false;
}
});
$(window).scroll(function () {
if (flag == false) {
scroll = $(window).scrollTop();
if (scroll < 50 )
flag = true;
}
});
});
Any solutions for this ?
From the screencast you sent, this code should scroll to the bottom of the banner when the button is clicked (provided you correctly place the anchor div):
jQuery(document).ready(function ($) {
// The button is assumed to have an id of 'scroll-down' - triggered when clicked
$('#scroll-down').on('click', function () {
// Move to the pre-defined anchor point
// Insert <div id="scroll-down-anchor"></div> to where you want to scroll to
$('html, body').animate({
scrollTop: $('[id=scroll-down-anchor]').position().top
// Set the speed of the scroll here (currently set to 1000 ms)
}, 1000);
});
});
I'm still not sure from the screencast what you want to do with the behaviour based on the window position when the window is scrolled.
UPDATE: In light of the screencast and further information.
The code has been updated, BUT, although this is, I think, what your code was trying to achieve, I don't think the effect is very nice at all because you're intercepting a user's intention, hijacking it, and making something different happen. It's also very choppy, and to improve that would probably take many more lines of code (eg to determine speed of existing scroll, intercept that and make it accelerate organically - way beyond the scope of this kind of answer). Maybe there's a plugin out there to do this nicely.
Anyway, I think this code completes what you were trying to achieve, but the end effect, although subjective, is not very nice in my opinion. I've put in explanatory comments:
jQuery(document).ready(function ($) {
// Variable to store scrolling state
var scrolling = false;
// Variable to store position to determine whether scrolling up or scrolling down
var previousScroll = 0;
$(window).scroll(function () {
// Only is state is not 'scrolling' (ie not to run if button has been clicked)
if (scrolling === false) {
// Get position
var currentScroll = $(this).scrollTop();
// Compare position to stored variable: scrolling up or scrolling down
if (currentScroll > previousScroll) {
// Determine if position is 'within the zone' - set here to 50px
if (currentScroll < 50 && currentScroll !== 0) {
console.log('IN ZONE');
// Trigger button click
$('#scroll-down').trigger('click');
} else {
// Normal scrolling down code, outside zone
console.log('SCROLLING DOWN ');
}
}
else {
// Scrolling up code
console.log('SCROLLING UP ');
}
// Set variable for comparison of next scroll event
previousScroll = currentScroll;
}
});
// The button is assumed to have an id of 'scroll-down' - triggered when clicked
$('#scroll-down').on('click', function () {
// Set the scrolling state
scrolling = true;
// Animate with callback to set scrolling back to 'true' when complete
$('html, body').animate({ scrollTop: $('[id=scroll-down-anchor]').position().top }, 1000, function () {
// Callback code - set scrolling state to be false when animation has finished
scrolling = false;
});
});
});

Scroll position based javascript animation does not revert to it's original state when scrolling back up

See the JSFiddle here: http://jsfiddle.net/jL6d2qp6/
I have an animation that is supposed to keep the #top element in a fixed position at the top of the page, except for when the #login element is on the screen. To control this, I am using a javascript function that runs every 10ms and switches out the css class for #top, and when I scroll down, it updates as expected, but when I try to scroll back up, nothing happens.
javascript code in question:
offScreen = function(id, targetValue)
{
var offset = $("#top").offset();
var w = $(window);
var height = $(id).innerHeight();
var finalOffset = (offset.top + height) - w.scrollTop();
if (finalOffset < targetValue)
{
return true;
}
else
{
return false;
}
}
function updateTopMenu()
{
if (offScreen("#login", 81) === false)
{
if($("#top").hasClass("top-bar-absolute") === false)
{
$("#top").addClass("top-bar-absolute");
console.log("added top-bar-absolute");
}
if($("#top").hasClass("top-bar-fixed") === true)
{
$("#top").removeClass("top-bar-fixed");
console.log("removed top-bar-fixed");
}
}
if(offScreen("#login", 81) === true)
{
if($("#top").hasClass("top-bar-absolute") === true)
{
$("#top").removeClass("top-bar-absolute");
console.log("removed top-bar-absolute");
}
if($("#top").hasClass("top-bar-fixed") === false)
{
$("#top").addClass("top-bar-fixed");
console.log("added top-bar-fixed");
}
}
}
$("#top").ready( function() {
setInterval(updateTopMenu, 10);
});
Also, if there is a better way to accomplish this, I'd like it because this feels kind of cheaty.
The easiest way to achieve this is listening to the scroll event on the window. This is called every time the user scrolls. Then you can check whether the user scrolled past the login box, i.e. beyond the login box's height.
If the login box is no longer in the window, assign the #top box a class like .sticky that will change its position to position: fixed. And otherwise remove this class.
Checkout this jsFiddle.

Adding a hide function to jquery dropdown script on click

I'm currently using this following script to operate my dropdown menu so that when a user clicks the menu item the drop appears and they can currently click anywhere outside the screen to make the menu disappear but i was wondering how id go about adding functionality to make the dropdown disappear by clicking the menu item again (while keeping the option to click anywhere outside the item). Is this hard to implement?
$(document).ready(function() {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if(showingDropdown) {
showingDropdown.removeClass(activeClass);
showingMenu.hide();
}
};
/* recurse through dropdown menus */
$('.dropdown').each(function() {
/* track elements: menu, parent */
var dropdown = $(this);
var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
/* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.show();
showingParent = parent;
};
/* function to show menu when clicked */
dropdown.bind('click',function(e) {
if(e) e.stopPropagation();
if(e) e.preventDefault();
showMenu();
});
/* function to show menu when someone tabs to the box */
dropdown.bind('focus',function() {
showMenu();
});
});
/* hide when clicked outside */
$(document.body).bind('click',function(e) {
if(showingParent) {
var parentElement = showingParent[0];
if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
hideMenu();
}
}
});
});
Here is my attempt based on the answer below:
/* function to show menu when clicked */
dropdown.bind('click',function(e) {
if (!dropdown.data('open')) {
dropdown.data'(open', true);
// open menu
} else {
dropdown.data('open', false);
// close menu
}
});
Although im getting errors so i assume ive played it in incorrectly or perhaps overwritten something? This is just a section from the code above as it's the only section ive edited with this answer.
Thanks
What you can do is use jQuery.data() and have a variable called open for example which is true or false depending on the state. So you could be something like this.
if (!dropdown.data('open')) {
dropdown.data'(open', true);
// open menu
} else {
dropdown.data('open', false);
// close menu
}

Categories

Resources