When I load the page, a modal immediately is displayed. However, about half the time, it's impossible to scroll. I can see the scrollbar on the side of the window, but it doesn't let you scroll. Also, zooming the window into 150% allows scrolling to work again.
How can I make it so the user can scroll up and down the modal? I'm using jQuery.
Modals will generally remove the scrollbar and male your page eesize due to the fact that when a modal is loaded, you normally overlay the body elements which remives and scrollbara, causing the body or wcreen width to adjust.
Related
I have some code using jQuery's scrollTop(0) method which is not working correctly on Chrome (Version 56.0.2924.87).
My code sets a 2 second timeout which does the following:
Scrolls to the top of the screen.
Un-hides a div which has 100% width and height and requests the user to complete some action.
Appends a class to the html tag which sets overflow: hidden.
Once users completes the action it will remove the class and hide the div so they can continue scrolling.
This is working relibaly on Firefox.
On Chrome, if the 2 second timeout executes while the user is not scrolling, then it works as expected. However, if the 2 second timeout is called while the user is in the middle of scrolling, it seems to freeze.
I have created this Plunker containing all the code. The issue does not occur if you test within the in-line demo window, you need to click on the Preview in a Separate Window (blue button top right inside the code demo).
In my demo, this is what happens if the timeout runs while I am not actively scrolling:
And this is what happens if the timeout is executed while I am scrolling down (mid-scroll):
How can I make this work reliably on Chrome even if the user is currently scrolling on the page?
Why you can not see the div when is display. When the event is called in the middle of the scrolling the scroll bar hidden and the div apper at the top of your page, but your viewport is not at the top position. If you set the div CSS position property to fixed it will work, css position. the fixed value of the position property is relative to the viewport.
So the problem is not on your jquery code.
code here
plunker
And check this:
Scrolls to the top of the screen.
Once users complete the action it will remove the class and hide the div so they can continue scrolling.
I think it will be best if they can continue at the position the wear before.
What about if you add stop(). before the .scrollTop(0)?
$('html,body,document').stop().scrollTop(0);
I am not an expert, but may be worth a shot.
Hope it helps.
I'm using the Bootstrap modal on many buttons on the page. If I scroll down the page and click a button, naturally the modal will open visibly at the top of the window (not the document). All is well.
However, I want to be able to support the same functionality within very tall iframes. Let's say an iframe is 1000px tall. If I scroll down the top level document to say, halfway down the iframe, but I did not scroll the contents of the iframe at all, I'm running into an issue. If I click a button, the javascript thinks no scrolling has been done, and renders the modal at the top of the iframe document. Thus the modal is not on screen (I have to scroll the top-level document up in order to see it).
Assuming that the parent window and iframe contents are on different domains (so same origin policy applies), is there any way for me to detect where to position the modal so that it's always viewable without scrolling the parent or iframe documents?
You can use this code snippet. Modal will we shown 60px bellow the top edge of user's viewport. And if content of modal is taller, than user's screen he will be able just to scroll the page to see it. But modal should have position: absolute
$("#showPopup").click(function() {
var posX = 60 + $(window).scrollTop();
$("#popupToShow")
.css({top: posX} )
.fadeIn(150);
});
I have a page with 20+ colorbox's, all with AJAX HTML requests and lots of scrolling in each colorbox.
If I scroll half way down 1 colorbox, then close it, then open a different colorbox - the new colorbox opens at the same position as the last colorbox. But I would like each colorbox's scrollbar to start from the top.
Does anyone know of any code that resets the scrollbar positioning to the top on each open?
Thanks
I am using jquery mobile in which I seperated the page content into three div's horizontally, that is each div is an page. I used this logic for loading the page with animation using jquery mobile load() method.
The problem is that I can able to see the page(first div) in which I can scroll, So that it is showing the second page(second div) which I dont want to see.
JS Code:
$(document).on("touchmove","#homePageContent",false);
The above code prevents the screen scrolling horizontally and vertically but I want to prevent only horizontall scrolling.
css overflow-x:hidden is also not working.
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.