We know that, the default functionality of a space bar in browser is to scroll to down if no input is active. similarly shift+space bar scroll top.
In my app, I'm using Jquery dialog on which if I press space bar when no input is active the background is scrolled instead of the dialog.
So, I added tabIndex = -1 which works fine when the dialog height is big (Means when the dialog has a scrollbar). But it is not working when the dialog has no scrollbar (Only the background is scrolling)
<div id="contactContainer" class="default-dialog" tabindex="-1"></div>
I don't want the user to prevent the space bar typing when no input is active. The scrolling should work normal as I press the space bar. If there is no scrollbar on the dialog, nothing should happen if I press the space bar.
Is anybody faced the same situation? Please give me a suggestion
The issue is, I've a container class which has some overflow elements. I did the following before I open the dialog
$('body, .container').addClass('overflow-hidden');
and I removed the class in the onClose event of the dialog
CSS:
.overflow-hidden { overflow: hidden}
Related
I'm using UIKit to make a dropdown. The dropdown hovers over the content, which is wanted behaviour for me. When the button is so close to the bottom of the screen that it won't have enough space to show the dropdown itself totally, it pushes the screen focus down. I'm not quite sure what's causing this, the dropdown itself gets display:block; when the button is clicked, but it needs that to be visible.
Is there some way to open the dropdown, but without the screen jumping to the bottom? (So people can see they're missing content and their reaction should be to scroll down a bit?)
I made a Codepen to show what's happening. http://codepen.io/InstaK/pen/GWYwdM
I have a mobile web map application within an overflow: hidden body. There is a map legend which is partially hidden on the right side of the body and a menu which is partially hidden on the bottom of the body.
The idea is to click on the partially visible part of the control and have the control slide into view.
The bottom menu is higher than the body and should therefore be scrollable in the y direction.
The problem is that I can either prevent scrolling by preventing the default on the touchmove event handler or that I enable the scrolling which means that clicking on the menu allows to move the whole body of the application all over the shop.
The application can be accessed here https://geolytix.net/mobilemap
I use Google Chrome dev tools responsive view to test the touch scroll behaviour.
I disable the scrolling on the legend item but I cannot disable the scrolling on the large menu slider on the bottom.
What I am trying to prevent is that the user just pushes the menu off the screen like so:
One way would be to add to your css
html, body {position: fixed;}
to prevent the possibility of scrolling.
Now, to make your Menu scrollable you add to your css the following lines
#sliderPanel {height: 100%;overflow-y: scroll;}
You can now scroll the Menu on the y-Axis.
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I was viewing some Facebook photos. I observed this thing, when you click on an image, it opens as a modal overlay. The background is still hazily visible, the scroll pane is still there, but the scroll bar just disappears. Can anyone tell me how to do it? I mean, setting body's overflow to hidden will make the entire scroll pane disappear. Here the scrollpane is there, but the scrollbar is not..
i think what youre looking for is the osx-like scrollbar that fades out when not being used.
see Lion-like scrollbar with jQuery?
I'm developing modal windows with the ability of being scrollable, like pinterest ones. When they are fired define overflow: hidden on body and overflow: auto on the modal box container. This works very well on desktop browsers but my first test on iPad (and I assume that probably on iOS in general) reveals a problem:
When the scrolling of the modal ends, if the document is longer than the modal the scrolling continues.
I tried this with the intention of only accept scrolling if it is triggered by the modal or its container:
// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
if (($(e.target).attr('id') != id) &&
($(e.target).attr('id') != ('modal-'+id))) {
e.preventDefault();
}
});
And it really works doing strictly that. The modal scrolls and when it ends scrolling the page is possible only if you scroll inside the modal.
Do you have any idea?
Try it in your ipads if you want (you have to click on the modal button): http://www.onebigrobot.com/beta/altair/transforms-so
Thank you in advance!
Small changes are powerful!
All the problem is solved changing position: absolute by position: fixed on the modal container (and also on the dark mask of the background if needed). In fact with absolute positioning the modal only worked because the button was at the top of the page.
With fixed positioning desktop browsers works perfectly, and on the ipad something interesting occurs. When the scroll of the modal ends the scroll of the page begins to work but with the modal always on top well positioned.
I hope this question could be useful for someone.