Slick Slider js not recentering with scrollSpy - javascript

So I created a horizontal mobile Menu navigation with Slick Slider and also added a scroll Spy to add active class to the li when scrolling passed categories.
So far it looks great. Here is the link, make your browser be mobile size (because it is only visible on small screens)
And visit http://www.2017.jukeboxburgers.com/menu click on the " Explore the Food... " button, and swipe.
When you click in the nav it works well, the li gets centered, but now if you scroll down some more until you pass a few categories, and then click the "explore the food" button again, the current category you scrolled too is not centered.
Is there an event listener for something like this? Or a way to make it recalculate the li.active and center it??

So was able to make it work!
So my scrollSpy puts a class of .active on the li that I've passed. Slick Slider wasn't going to them but now it's working. Here's how I did it:
var current_index = $(".mobile_food_slider .active").attr("data-slick-index");
$(".mobile_food_slider").slick("slickGoTo", current_index);

Related

How to keep Bootstrap 5 Scrollspy active link in view while scrolling through page

I have a Scrollspy nav sidebar generated by the contents of the main page. Scrollspy is working fine when I click any of the navigation links, and the nav is correctly updating the links as Active while scrolling through the document.
Because my sidebar is so large, I've set the max height of the column to the viewports' height. I'm trying to keep the Active Scrollspy link centered in the sidebar column using the activate.bs.scrollspy event.
$(window).on('activate.bs.scrollspy', function(event){
var $scrollSpyNavWrap = $scrollspyNav.children("div:first");
var $scrollSpyNavActiveLink = $scrollspyNav.find(".active:first");
$scrollSpyNavWrap.scrollTop($scrollSpyNavWrap.scrollTop() + $scrollSpyNavActiveLink.position().top - $scrollSpyNavWrap.height()/2 + $scrollSpyNavActiveLink.height()/2);
});
Adding the code above works when scrolling through the page. The links are correctly updating with the Active class, and the sidebar is keeping the Active link in the center of the sidebar nav.
However, this code blocks the Scrollspy from working correctly when clicking any of the links in the sidebar. If one is clicked, the page starts to scroll, the moment the next section is reached the activate.bs.scrollspy is triggered again and stops the animation. So at most I can go up or down one section.
I searched through the activate.bs.scrollspy event and cannot find anything to check to see if it was a click event versus a scroll event.

Why is my offcanvas-wrapper reappearing briefly after click-tap? (mobile menu)

I have a mobile menu on a one page that did not close after a tap on a menu item (menus are all redirecting to sections of the one page with anchor tags). I managed to do it by adding a footer script:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#offcanvas-wrapper li a').click(function(){
$('#offcanvas-wrapper').toggleClass('hide');
});
});
</script>
However, now if I want to open the mobile menu again, the menu reappears briefly after a tap/click, and then I have to click on the menu icon again to make the menu visible.
This only happens on mobile (reduce your window size to reproduce the glitch).
Here is the link of the one pager:
the one pager
Here is a 30 seconds video of the issue:
video of the issue
Why is the menu reappearing? How can I resolve this? I can handle CSS, Html and a bit of javascript.
Anyone can point me in the right direction?
I wanted to just comment but I don't have enough reputiton yet to do so.
It seems like you have an "open" class that stays on the menu element when you click on a menu option. The open class disappears however when you click outside of the menu. So that could be the issue.

How to move element on slide change using jQuery cycle2?

I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck

Hover effect when user touches sliding through nav elements

I've implemented a sidebar navigation with a hover effect to jump from slide to slide on a custom slider which is working fine using a simple jQuery hover() function:
$('#slider-nav ul li').hover(function() {
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
}, function(e) {
$(this).prev().removeClass('hover-sib');
$(this).next().removeClass('hover-sib');
});
but on mobile it would need to be polished.
The idea is to have the same hover effect on real time while the user slides the finger vertically over the lines, making them grow to the side and the text to appear. Once the user releases on an option it could be interesting to call that slide, but that is not the priority right now. The bigger issue is how to achieve the similar effect of a hover when a user slide the finger through the element...
Any idea? I thought on using 'touchmove' but I don't think that I could tell if the user is over one of those options or even which one of them.
$('#slider-nav ul li').bind('touchmove',function(){
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
});
Sample: https://jsfiddle.net/ac_coding/d7xnndg2/
UPDATE: In case it wasn't properly understood/explained, what I'm trying to achieve here is the same hover effect on a desktop when a mobile user touches the screen and, without lifting the finger, moves from along the vertical right edge, hovering and passing through different lines/options of the nav which would be triggering their "hover" effect.
Using touchstart/touchend will require the user to tap at different points of the nav in order to see the options.
I hope it makes sense, doesn't seem easy to explain :S
UPDATE 2: It seems that I finally found a solution but I don't have the time now. I'll update this question tomorrow explaining it for everyone else. Thanks everybody for your help!
Did you try to bind to the touch event? You need to add "hover-effect" class (where :hover styles are) as your additional CSS selector as well.
$('#slider-nav ul li').bind('touchstart', function() {
$(this).addClass('hover-effect');
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
});
$('#slider-nav ul li').bind('touchend', function() {
$(this).removeClass('hover-effect');
$(this).prev().removeClass('hover-sib');
$(this).next().removeClass('hover-sib');
});

jQuery menu effect gone wrong

I am seeking for a way to fade a submenu in a list-ordered navigation as I want it to fade:
There is always an active menu item - and if the active menu item is in the submenu - also an active menu parent. So, at init the submenu with an active current item or current parent item should be visible. If I hover an other menu item, its submenu will fade in, the active one fades out. After leaving the whole menu, the active submenu fades in again. Plus, I used the jQuery plugin hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html) to give a timeout for each hover action.
This is what I got so far, but it's really buggy. For some reasons, submenus are sometimes just disappearing completely, also when hovering two items without leaving the navigation, two submenus overlap. Does anyone have an idea or tip for me? =) Please see a demo HERE: http://jsfiddle.net/BQuPz/
Problems with CSS: It's best not to play with display:none and opacity yourself, leave it up to jQuery and use the proper functions for fadeIn() and fadeOut().
Instead of putting display:block; float:left; on the menu's <li> elements, you should use display:inline-block. If you float the <li>s, that effectively tears them out of their parent container, leaving the ul with zero size, hence it is impossible to listen to mouseleave events unless you explicitly set its size.
Problems with code: In the hoverIntent plugin, timeout might not be what you're looking for. Timeout automatically fires the out event after a certain amount of time. To delay the hover effect, use sensitivity and interval instead. Check out the documentation page.
If you apply the above fixes, the only events needed are hoverIntent's over and the main navigation's mouseleave. The over event fades in the current submenu and fades out the rest, the mouseleave fades in the active submenu when the user hovers off the navigation. Look at your modified jsfiddle demo: http://jsfiddle.net/BQuPz/4/
// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();
// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
over: function(){
// Find the hovered menu's sub-menu
var $submenu = $(this).find('.sub-menu');
// Stop the animation and fade out the other submenus
$('.sub-menu').not($submenu).stop(true,true).fadeOut(260);
// Fade in the current one
$submenu.fadeIn(260);
}
});
// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
// Fade out all inactive submenus
$('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);
// Fade in the active one
$('.current-menu-parent .sub-menu').fadeIn(260);
});
Instead of using animate in $(this).find("ul").animate({'opacity': '1'}, 250);
I would have used fadeIn and fadeOut functions with callbacks. Then you're sure your fadeIn animation begins after the fadeout ends
element.fadeOut(250,function(){otherElement.fadeIn(250)})

Categories

Resources