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.
Related
Is it possible to prevent the page from scrolling while dragging items from mobile devices?
Even the sortable demo page has this problem (if you load it from an android/iphone/ipad): http://www.telerik.com/kendo-angular-ui/components/sortable/
Dragging sideways is less of an issue due to no scroll being necessary due to the width but vertical dragging is not working as I would expect.
It's pretty "brute force" and could limit your ability to drag an element to a position outside the current viewport, but adding a class with the style or directly adding the style of overflow: hidden to the html element while the item drag is active will prevent scrolling.
I've done this for modal windows to prevent the page in the back from scrolling while the modal is active.
Last time I used it a cross-browser issue required the use of overflow: hidden !important if it's not working for you.
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 have a website that includes an image gallery that turns into a slideshow on click. The website is divided into 4 vertical sections and you navigate through it (jumping up/down from one section to the next) with a smooth scroll effect by clicking on the main navigation menu.
Everything works perfect with Firefox, but when I open it with Chrome 2 major problems:
1. The page keeps bouncing up and down like a yo-yo whenever you're in the "projects" section. Click on "Projects" in the main nav menu and you will see what I mean.
2. The slideshow doesn't work properly. Click on "Artwork". Then click on any image. You'll see that if you do this in Firefox the navigation menu is hidden behind the slides. However, with Chrome they are in the front. I have set the Z-index of the slides with #slideshow img {z-index: 1000} so I really have no idea why this is happening.
You will find my website here:
http://ninetieschild.github.io/my-site/
Thanks so much.
Issue:
$window.bind("scroll resize", function() {`
is wrong. It keeps auto executing continuously.
As this statement is always true
if(scrollTop > $('#services').offset().top-$(window).height()+300 && scrollTop < $('#about').offset().top-$(window).height()+$('#cogs').height()){
transform functionality after changes window size/scroll so the function gets executed again.
What are you trying to accomplish?
You just want to click on me menu and get scroll to that specific sections?
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.
you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')
The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).
you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that