Develop Reference

How to disable body scrolling when a particular button is clicked

I created a HTML page with menu & content.
Everything is working fine for desktop, but when menu is clicked in mobile, the content of the body overlaps with menu items when scrolled (when menu is scrolled, the content is also scrolling).
I tried using overflow: hidden and position:fixed,
but it is making entire page non-scrollable, even when the button is not clicked.
Can anyone please help me with this ?
I tried the following :
My JS :
$(document).ready(function () {
$("#mobile-toggle").click(function () {
$('body').css('overflow', 'hidden');
});
});
My button :
<button id="mobile-toggle" class="mobile-toggle">
_('mobile-toggle')<span></span>
</button>
It is disabling scrolling when clicked, but it's not working on mobile.

You need to rework your css so that it is responsive - here would be a good start Responsive Design

Try to target the html element with your selector too:
$('body,html').css('overflow', 'hidden');

Using Javascript to toggle an overlay on and off

I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.

Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.

if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.

Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");

Scroll back to a DIV's position from JS/Jquery

I have a series of expandable content DIVs that are collapsed initially and expands upon clicking on another DIV with a heading text. See the code sample below.
<div id="post">
<div class="heading" onclick="opendiv()">...Heading...</div>
<div class="body">.....Lengthy content.....</div>
</div>
....
....
'body' class initially hides the 'body' DIV having a 'lengthy content'.
When clicked on the 'heading' DIV, 'body' DIV expands making the web page scrollable.
Remember that there are 5 or more such expandable DIV sets above and below this set.
When the 'body' section is clicked, the page must scroll back to its 'heading' DIV location.
Here is the js script I use to expand and collapse above DIVs. But this scrolling back to a given DIV does not work.
function opendiv() {
$('html,body').animate({scrollTop: $("div#post div.heading").offset().top});
if ($("div#post div.body").css("display") == "block") {
$("div#post div.body").hide();
} else {
$("div#post div.body").show();
}
}

You didn't add any event listeners to the .body div
<div class="body" onclick="gotoHead()">.....Lengthy content.....</div>
then your gotoHead() function might look like this
function gotoHead() {
document.body.scrollTop = $('#post .heading').offset().top;
}

Based on your description there are a few issues with the way you coded the script. One is that there is no click event for the .body div. The second is that you are coding your javascript click events directly in to the HTML. Typically unless it must be done this way it is better to declare your events in your JavaScript, which is generally easier to go back and edit for new functionality.
Here is a refresh of what you did:
$('.heading').click(function(e){
// hide or show the corresponding .body div
$(this).parent().children('div.body').toggle();
});
$('.body').click(function(e){
// scroll to the corresponding .heading div
$('html,body').animate({
scrollTop: $(this).parent().children('div.heading').offset().top
});
});
You can also see this in action here:
http://jsfiddle.net/joncox/pmeEs/

How can I position screen to show toggle element when opened?

I'm using the following code for a simple toggle button to show/hide some extra content:
$(".toggle .button").click(function() {
$(this).next().slideToggle('fast');
});
The problem is if the toggle is at the bottom of the screen, the user has to then scroll down to view the newly opened toggle content. So my question is: how can I make it so the toggled data is automatically shown to the user by jumping the window to the correct position when they click the toggle?
Thanks

You can use animate to do the job:
$('html,body').animate(
{scrollTop: $('#your-content-id').offset().top},
'slow'
);

jQuery/CSS: fixed overlay should not allow scrolling of background?

i have a overlay box that is fixed and centered on the screen. The page itself is rather long and has a vertical scrollbar.
I'd like to disable scrolling of the page itself once the overlay is shown. However I can't disable scroll completely because some overlays do have overflow-y:scroll for themselves. So the content in the overlay should be scrolled but the page itself should be stuck.
Any idea how to solve that with jquery or css?

The quickest and dirtiest way I can think of is to attach an event listener to the window for scroll events, and preventDefault() if your overlay is visible.
like so (using jquery).
window.addEventListener('scroll', function(e){
var el = $('.overlay.active');
if( el.length > 0 ){
e.preventDefault();
}
});
Hope this is what your looking for.

You can set the body to overflow: hidden. This will prevent scrolling. Child's overflow declarations stay unaffected. I have done a little fiddle.

Just an adjustment to Marc's jQuery solution. My code disables the body scroll as the overlay appears, then when the body or overlay close button is clicked, the body scroll is re-enabled.
/*We disable the scroll*/
$(function() {
/*This is where we specify what button is being clicked to open the
overlay, change at will.*/
$('#overlay1').click(function() {
/*This is where we specify what part of the page is gonna disable the
scroll, in this case the body.*/
$('body')
.css('overflow', 'hidden');
});
/*Now we re-enable the scroll*/
/*This is where we specify the the part of the overlay that is being
clicked to close it, in this case, the body and the .close, change at will.*/
$('body, .close').click(function() {
/*This is where we specify the part of the page we are re-enabling
the scroll, in this case the body.*/
$('body')
.css('overflow', 'visible');
});
});
Here's a little JSFiddle of my script in action.

You can position your overlay as a {position: fixed;}. That will keep your overlay in your screen even if your page scrolls.

You could create an full width and full height container, with position: fixed. And inside this container create your actual overlay with info. The container basically blinds the user from scrolling or interacting with the page.