I have a sticky header (position: fixed) inside and iFrame. The header stays sticky when the page is viewed alone. Unfortunately the page gets served up in an iFrame and I have no control over the parent page.
The sticky header when viewed inside the iFrame on iOS just scrolls with the rest of the page being iFramed in.
Any way to fix this? Everything I have read says to set the height and width of the iFrame to 100% but I can't access or change the iFrame code.
Related
I have a fixed top header, bottom footer, with content in the middle. Keep in mind, the header and footer have the safe area insets written to avoid the safe area content from clashing with the page components. Is it possible to attach the UIRefreshControl to the middle content only, if it is all under one element with an ID?
What is happening now is that I can pull the whole body, after attaching the UIRefreshControl to the WKWebView ScrollView. The refresh spinner will come from behind the header as needed, but it will require a long pull (pulling the whole body) and the spinner will not show fully before the refresh action has been called as the body starts from the top of screen (where the safe area starts).
Don't mind the glitching, its just the pulling effect while the whole page is refreshing (the refresh callback will be changed later).
What can be done to target the middle content only, in a WKWebView?
I have a site using jQuery Mobile pages. On desktop and tablet devices (#media only screen and (min-width: 800px)) I want to display the page like this:
My problems:
On some pages, the contents of the 'content' area will be higher than the available height between header and footer, and I would like the scrollbar ONLY for the content (header and footer are fixed).
On other pages, the contents of the 'content' area will have less height than the space between the header and footer. HOWEVER, I need the content area to be 100% of the available space between header and footer in order to lay out it's contents proportionally.
I've tried various jQuery and CSS (calc(...)) solutions, but it's getting quite hacky. Can you give me a simple solution?
the origin html is a jqm page with an fixed empty footer
after the jqm page loaded, using ajax to retrieve some data and put it in the footer
the footer's height expands and blocks some area of the page content, which originally would show just above the footer
What should I do to avoid this blocking?
The blocking illustration
i'm using jquery 1.1.0 and i have a custom header here
i've set the css of this header to be a height of 200px; (i hardcoded it for testing, if i place items in there to make it dynamically get to 200 px, it's the same thing)
the problem is when i transition to another page
$.mobile.changePage("#SurveyCreateView", "none", false, false);
the content on the second page basically ignores the height of the custom header i have. (so the content starts all the way at the top) if i resize the window or if i do a back, and navigate to the second view again, then everything is okay.
anybody have any idea how to fix this?
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.