How to prevent mouse scrolling and preserve menu navigation? - javascript

Can anybody help me?
I need to prevent mouse scrolling and preserve menu navigation. Demo website here Jquery script and code here.
I've already tried with 'overflow : hidden' (in CSS or JS) but it streangely desable the menu as well...
// Scroll Spy
$(window).scroll(function() {
var top = $(window).scrollLeft() + 100; // Take into account height of fixed menu
$(".container").each(function() {
var c_top = $(this).offset().top;
var c_bot = c_top + $(this).height();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((top > c_top) && (top < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
}
else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a").slideToPos();
}
}
});
});

I solved the problem like this :
<script type="text/javascript">
function stop()
{
return false;
}
document.onmousewheel=stop;
It prevents mouse scrolling, preserving menu navigation.
Hope will help!

Related

Why is "scrollTop" function not working correctly on live site but works on local host?

This is a #id link to one page:
This is the #id link to another:
I have WP Rocket Installed, have tried to disable the JS settings but it didn't work either.
I am a novice so your advise is much appreciated.
// PAGE SCROLLER
// PUSHES ANCHOR BELOW DEPTH OF NAVBAR
(function($){
$(document).ready(function () {
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
if (screen.width <= 320) {
var fromTop = 120;
} else if (screen.width <= 768) {
var fromTop = 124;
} else {
var fromTop = 90;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);
// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);
});
})(jQuery);
First you need to check the error $ is not a function (https://prnt.sc/12ald0n) and need to solve it. For better example you can take reference from here https://api.jquery.com/scrolltop/ to scroll top functionality.

Scrolling Add Class Over Value Only Once

I stumbled upon an issue with a menu that I want to open by adding a "Open" class when scrolled above certain value. The issue is that I want it to open only ONCE after that value so it appears for the user, and then is up to the user to open and close it by a toggle.
I used this method:
<script type="text/javascript">
jQuery(function() {
//caches a jQuery object containing the header element
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 1150) {
jQuery(".menubar").addClass("open");
}
});
});
</script>
The issue is that after the 1150 value, it keeps poping up after every scroll within this value.
How do I make it stop and make this event happen only once?
Thank you in advance!
Check if the class is already existing. Or use a variable if the class changes too easily:
var isOpened = false;
jQuery(function() {
//caches a jQuery object containing the header element
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
// The original if statement, testing for `.hasClass()`
// if (scroll >= 1150 && !$(".menubar").hasClass()) {
if (scroll >= 1150 && !isOpened) {
isOpened = true;
jQuery(".menubar").addClass("open");
}
});
});
You can set a flag and then just check against that flag.
jQuery(function() {
var menuBarOpenedOnce = 0;
//caches a jQuery object containing the header element
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 1150 && menuBarOpenedOnce === 0) {
jQuery(".menubar").addClass("open");
menuBarOpenedOnce = 1;
}
});
});

Restore scroll position after mobile menu is closed

I'm having a mobile menu that opens and closes using jquery by adding a css class that has display:block while the menu div has display:none.
The jquery code has a part where it is supposed to close the menu when a click is registered outside the menu div. Everything works execept the: $("body").scrollTop(scrollpos) . This was supposed to scroll the user back where he left off after the scrollTop(0) took place and the menu has closed, but it does not scroll at all the scroll is stuck at the top. Any help will be appreciated. Thank you.
EDIT: Here is an example: https://jsfiddle.net/mufwwudj/
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
menutoggle.click(function () {
var scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});
});
One problem here is that you are assigning a new mouseup event every time the menutoggle.click function runs.
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
Only the first one passes the conditional, even though each one will fire and scrollpos will always equal whatever it was in the first mouseup event listener.
I don't know how you are testing it, or what the HTML looks like but if you are at the top of the page the first time you click it, scrollpos in the mouseup event will always be 0.
Try assigning the mouseup event once, and putting scrollpos outside both so it can be accessed in both.
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
var scrollpos;
menutoggle.click(function () {
scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
});
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});
function ScrollOnTopo() {
window.scrollTo(0, 0); //It scrolls page at top
}
This function may be useful to you.

JQuery: scrollTop() exactly

Want to recognize if the user scrolls up or down with this snippet
$('#songs-ul').bind('mousewheel', function(e){
if(scrolling != 1){
alert($("#songs-ul").scrollTop());
if($("#songs-ul").scrollTop() > scrollheight){_runter();}
if($("#songs-ul").scrollTop() < scrollheight){_rauf();}
//scrollheight = $("#songs-ul").scrollTop();
}
});
But if the user scrolls "one time", it is no change - just at a second scroll it changes.
For a preview: http://www.limesoft-solutions.com/jukebox/index.php?list=1&yt=1
(it's the song list under the search field with "Suchen" text)
Has anybody a tip for it? :)
Thanks!
You can use something like this to determine if the user is scrolling up or down:
(function () {
var previousScroll = 0;
$('#songs-ul').scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
alert('Im scrolling down');
//add your code here
}
else {
alert('Im scrollign up');
//add your code here
}
previousScroll = currentScroll;
});
}());
Here is an Example Fiddle

mouseenter bubbling when mousehover multiple times

how to prevent bubbling or "out of control" when user hover(mouseenter) multiple times . When user hover i'm using slideDown and slideUp for mouseleave and delay i set 250. I can only fix this if delay i set to 1 ms. Below is my script :
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
You can check my JsFiddle here
Reproduce a Problem
Hover Catalogue multiple times and stop hover(but point your cursor at Catalogue), you will see the dropdown will hide but actually it should slide down.
I think your issue is caused by the is_opened flag and then the animation being run along side changing the left css property
If you change your mouse enter and leave js to the following
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
it should work: Example

Categories