I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.
About the code:
The popup itself is a fixed div that appears on the page (on click) when an anchor link is clicked, so the 'prevent scroll' action should occur when the anchor is clicked.
I have put random elements to represent that the content outside the popup is out of your control to style it; therefore it should not matter what this content is other than it being straight forward HTML elements.
The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.
Here is is: jsFiddle.
Your help is greatly appreciated!
You can change the overflow of the body and do something like this:
// shows pop up
$("#showPopup").click(function () {
$('body').css({
overflow: 'hidden'
});
$(".popup").fadeToggle(500);
$(".overlay").fadeToggle(500);
// selects anything but the popUp and its children and
$('body > *:not(.popup)').css({
"overflow-y": "hidden"
});
});
// closes pop up
$(".closePopup").click(function () {
$('body').css({
overflow: 'auto'
});
$(".overlay").fadeToggle(500);
$(".popup").fadeToggle(500);
$('body > *:not(.popup)').css({
"overflow-y": "scroll"
});
});
Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.
Related
http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.
Search for 1190 in semantic-UI.css. Override the value.
I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
I have created a popup div which pops up over the main page. It is position:fixed; and with overflow:scroll;.
The issue is, unless the user positions their mouse over this div, the scroll feature on touch mouses or scroll wheels, scrolls the parent window - not the div. The same applies to trackpads.
Is there a way to lock the scroll of the parent window, and set the div as the scroll through jQuery? I have found a lot of posts about the opposite - with people wishing to look the div scroll and use the parent.
Any help would be greatly appreciated.
If you want to use jquery, here's a way you can set the body's overflow to hidden whenever the popup occurs and undo that whenever the popup goes away:
css:
body.popup-open {
overflow: hidden;
}
and jquery:
$("#popup").on("show", function () {
$("body").addClass("popup-open");
}).on("hidden", function () {
$("body").removeClass("popup-open")
});
When I go to the Gallery page of this website: http://roxannelin.azurewebsites.net I am unable to scroll down until after I click on the page. I would like to be able to scroll down using the mouse wheel as soon as I land on this page.
I have tried setting the focus by placing a tabindex on the div and using jquery .focus() however this moves me to the 3rd tab (showreel) and messes up the layout.
How can I bind the scroll event to this particular div without the user having to do anything?
Try to use click trigger on your div or on any element inside your div, after DOM load:
$(function() {
$("#divId").trigger("click");
});
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>