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.
Related
I am working on a function where I have to hide the sticky footer once it reach an element -> #line-before-related-article.
When I use $(document) the sticky footer disappears when I start scrolling down, which is not what I want.
When I use $(window) the sticky footer disappears before of reaching #line-before-related-article, which is almost what I need. I want the sticky footer disappearing ONLY when it reaches the div with the id #line-before-related-article
$(window).scroll(function() {
if ($(this).scrollTop() + $(this).height() >= $('#line-before-related-article').position().top) {
console.log(console.log($('#line-before-related-article').position().top))
$('.sticky-footer').hide();
}
});
I think my issue will be fix once my function works using $(document) properly.
Any suggestions?
The window object carries the scroll property and fires the corresponding event about the browser. As you see on its name, the document object refers to the DOM elements from the top to the bottom.
scrolling the content in the browser does not fire an event on a DOM object!
you have to enable the scrolling feature by playing with CSS
here is the explanation from jquery website:
https://api.jquery.com/scroll/
The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).
when your element does not have scrolling feature, it will not carry the scroll event capability.
you have to take care of the CSS code to enable the scroll event.
I have dialog box which comes on clicking a button. In the dialog box i have a button and other content. I want to make that button position fixed inside dialog pop-up.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('#footer_buttons').addClass('sticky');
}
else {
$('##footer_buttons').removeClass('sticky');
}
});
<style>
.sticky{
position : fixed;
}
</style>
I used above code to make the button position fix, it worked outside the dialog box but not working when the same code is used inside the dialog box. I can make a button fix by adding a min-height to dialog and make the dialog content scrollable. But I don't want to add any scroll to the content inside dialog box.
Can any one help me out. Thanks in advance
From MDN CSS position property:
fixed:
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
So it doesn't matter where your element is. If you apply the fixed position, the top, left, right, bottom values are relative to the screen's viewport (visible area in browser).
In your case you should use absolute positioning and set the position using two of the four positioning properties: top, right, bottom, left. Don't forget to add position: relative or absolute to the modal container.
when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text.
Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar?
I am using jsPlumb.draggable() to enable dragging.
jsfiddle: http://jsfiddle.net/7PuN3/2/
I would stop/start dragging:
$(function(){
$('#1 .button_wrap').on('click', function(e){
e.stopPropagation();
$(".info").html(newHtml).show();
jsPlumb.setDraggable("1", false)
});});
$(function(){
$("#1").on("click", ".info .ui-icon-close", function(){
$(".info").hide();
jsPlumb.setDraggable("1", true)
});
});
then in your css add this class, not to let the div fade when dragging is disabled:
.ui-state-disabled{opacity: 1;}
Quick look suggests to me, use relative or absolute positioning not fixed on button wrap. On my mobile it seems to work fine though.
I have an weird issue in IE8. I have a bunch of div's in an area. Each div has the same structure. Here is the basic structure.
<div class="brandImage">
<div style="display:none;">
<a><img/></a>
<div><span>See More</span></div>
</div>
</div>
Each brandImage div has an on hover listener which will give the inner div a display:block reveling the image and allowing the user to click through.
All these "tiles" are contained in a div with a set height and is scroll-able using the jquery.mCustomScrollbar plugin.
It works with all the tiles above the fold, however, when a you start to scroll down below the fold, if you click on one of the tiles, on mousedown will cause the container to scroll up. If the container does not have to scroll very far or you release the mouse button fast enough to complete the click it will work.
My question is what could be causing the scroll up on the mousedown event?
The plugin defaulted to scroll on focus. The function that was called on focusin. This was scrolling the container. Here is the code from the plugin.
/*scrolling on element focus (e.g. via TAB key)*/
if($this.data("autoScrollOnFocus")){
if(!$this.data("bindEvent_focusin")){
mCustomScrollBox.bind("focusin",function(){
mCustomScrollBox.scrollTop(0).scrollLeft(0);
var focusedElem=$(document.activeElement);
if(focusedElem.is("input,textarea,select,button,a[tabindex],area,object")){
var mCSB_containerPos=mCSB_container.position().top,
focusedElemPos=focusedElem.position().top,
visibleLimit=mCustomScrollBox.height()-focusedElem.outerHeight();
if($this.data("horizontalScroll")){
mCSB_containerPos=mCSB_container.position().left;
focusedElemPos=focusedElem.position().left;
visibleLimit=mCustomScrollBox.width()-focusedElem.outerWidth();
}
if(mCSB_containerPos+focusedElemPos<0 || mCSB_containerPos+focusedElemPos>visibleLimit){
$this.mCustomScrollbar("scrollTo",focusedElemPos,{trigger:"internal"});
}
}
});
$this.data({"bindEvent_focusin":true});
}
}
When I initialize the plugin, I set autoScrollOnFocus to false and there was no issue.
So i want to disable the window scrolling on mousedown+mousemove, i searched everywhere, but i can't find anything.
body { overflow: hidden } doesn't work, you can still scroll if you press the mouse, and you go down.
The problem i have, is that on clicking on an image thumb, it opens a positioned absolute div (100% height & width and a 50% black transparent .png) that shows the original image, and when i press the left mouse button and i move down, all the items behind the absolute div, start to scroll down.
Here is an example of what is happening. http://jsfiddle.net/T2qBw/1/
(Click the black div, a position fixed div opens, press left click, and move down).
Thanks in advance.
PS: I apologize if i made any grammar or spelling mistake. (English isn't my native language)
$(".open-overlay").click(function(){
$(".overlay").css("display","block");
$("body").css({overflow:'hidden'});
$(window).on('mousedown', function(e) {
e.preventDefault();
})
});
Don't forget unbind mouse event
$(window).off('mousedown')