I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE
Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.
Related
I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?
Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api
I have a problem with ScrollTo, my problem is that it works fine the first time i click on a link but not after when i click on a diffrent link.
Other information.
The elements i want to scrollto, is first gonna show up when i click a button, then all the elements gets animated and shows up on the page.
See below code
see image
$(document).ready(function ($) {
$("ul.sitecheck-navigation li.seo-optimering-sitechek").click(function (event) {
event.preventDefault();
scrollPageTo($('.meta-sitechek'));
});
$("ul.sitecheck-navigation li.newstuff-sitechek").click(function (event) {
scrollPageTo($('.newstuff-sitechek'));
});
function scrollPageTo($target) {
var scrollHeight = document.body.scrollHeight;
$(window).stop(true).scrollTo($target, {
duration: 600,
progress: function() {
// If the page scroll height changes, scroll afresh to the shifted target
if (scrollHeight !== document.body.scrollHeight) scrollPageTo($target);
}
});
return false;
}
});
It works fine when i click on a link for the first time, it scrolls to my div with the correct class.
But when i click again on a diffrent link, it only scrolls about 10px down when it should go up.
Anybody have any idea how that could be?
Got it solved thanks Frédéric. It was my calling off divs there where wrong after i added .list-result to my scrollto it works :)
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
I've tried overflow:hidden but it causes a white flash on each event, there doesn't seem to be a solution. So i'm attemping the javascript way
document.ontouchmove = function(e) { e.preventDefault(); };
and
document.ontouchmove = function(e) { return true; }
But that doesn't seem to work if your already activly on the scroll..
Any ideas people?
cheers!
I don't know if you're using jQuery, but if you do you could try this:
document.ontouchmove = function(e) {
jQuery('.classOrIdOfYourDiv').css({'overflow':'hidden'});
};
Ofcourse you should remove it when the block is release.
Maybe you can give an example in Fiddle?
here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });