I have data-fullscreen="true" on my fixed header for a jQuery Mobile app. It's "see-thru" on top of my content, so I am hoping I can turn it solid on the page load, then see-thru when the user starts scrolling (or solid only when scrolled to the top).
Related
I have a button in bottom part of my website. On ios devices in safari browser, when i try to click it, it first opens footer section of browser and then i have to tap again to click the button. How can i click button in one tap?
Refer this GIF: https://i.stack.imgur.com/HyciL.gif
height: 100vh (this will set your content to have maximum possible height)
overflow-y: scroll (this will make that div/element scrollable and hence browser won't notice that you are scrolling when actually you are scrolling.)
Due to ios safari's default behaviour when you scroll on page it automatically hides header and footer of browser. Now if you have a button on bottom part of your website, you will have to tap twice to make it work. The first tap will trigger safari footer section (assuming you wanted to open footer section) and second tap will actually trigger click event on button.
One of main reason of this thing causing an issue is, whenever you scroll, safari notices that you have scrolled and you will keep scrolling. To show you maximum content on website it hides footer and addressbar. and that's why using overflow-y: scroll is mandatory.
P.S.
Because you are now scrolling within the div/element window.addEventListener('scroll', function()) won't work anymore. To fix that, you can use document.getElementById('your-div-id').addEventListener('scroll', function())
Apart from this window.pageYoffset will always be 0. To get pageYOffset, you can use getBoundingRect property of the div on which overflow-y:scroll was added.
For example:scrollPosition = document.getElementById('your-div-id').getBoundingClientRect().top
This will give you height from top of the div till you have scrolled.
Happy debugging
I have a layout with a div.header and a div.body with a form and some inputs inside.
The div.header is position absolute so does the div.body.
Both are at the same level, one below the other, have a height and it is possible to scroll when the content is larger than the height.
<div class="header">HEADER</div>
<div class="body">BODY</div>
So when the div.container has a lot of content, we can scroll the content. And the header will remain unchanged so it looks like stick to the top.
My question is on safari iOS, it seems like when the keyboard is opened after taping on a input, we suddenly can scroll the whole layout. And so the div.header shift up. Is there any way to disabled that ?
On android, only the div.body will be scrollable. And so the header looks sticky.
The default behavior in jquerymobile when I have header, content and footer (where header/footer are fixed) is that when I scroll the content the header/footer show/hide. I mean when you start scrolling the header/footer hides and when u stop scrolling the header/footer are shown again. On devices its looks very bad/none-user friendly. I want to avoid this show/hide effects of header/footer. Is there any thing thats available in jquerymobile or some of its plugin to avoid it? If nothing then I want to apply iScroll on the content. Can someone guide me how to make data-role="content" using full-screen height?
If this is what you are referring to, then you can just remove the data-position: fixed from the headers and footers. I tried it on the iPhone, and it is still buggy (seems to flicker whenever a touch event it generated, even if it is not necessary).
I'm creating a mock-up of a function to be added to a mobile version of a site. The idea is to have a horizontally scrolling footer of links with vertically scrolling content; in effect, recreating the functionality of the native iOS behavior when double-tapping the home button.
Problem: when the page loads, it appears the viewport is not getting recalculated to match the new content area height. This leaves an ugly blank area (apparently the size of the URL bar in iOS Safari) below the scrollable footer.
I've tried adding a timeout to recalculate the height (using the function in scrollview.js). When using a fixed-position footer, the footer behaves strangely but eventually reappears in the expected place - the blank space remains, however.
Link to jsfiddle code.
Link to imgur screenshot from my iPhone.
I came across this question. I see that both stickyHeader and scroller works kind of the same in the way that they both keep the header row visible and there's a scroller bar on the side. Could someone please kindly explain the difference between them?
The stickyHeader widget makes the table head "stick" to the top of the browser, or table container (if options are set), window as the user scrolls down the table; this is similar to the sticky menu some sites use for site navigation. Check out this demo especially the last one on that page which is an example of nested tables stacking the sticky headers while you scroll down the document. There is also a css3 version of this widget which uses css3 transforms to position the table head at the top of the browser window.
The scroller widget, on the other hand, has to make a copy of the table header placed above the table, hides the original table header, then makes the tbody of the table scrollable, within a fixed height. So, the browser window position doesn't change which the user is scrolling through the table content, just a scrollable window of content is seen. If you look at this demo, you'll see that the table body is scrollable, but the head does not "stick" to the browser window (unless you set the scroller_jumpToHeader which forces the table head to become visible while scrolling up the document.