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).
Related
I'm using the "Setlist" theme on Big Cartel and I'm not sure how to enable the flickity arrows but I see it in the code at the bottom talking about a button
The reason I want the arrow/buttons is because on mobile the swipe motion is pretty buggy. You can check it out on my site shop.bbedits.com. It's either I fix the carousel or I disable vertical scrolling which I don't think is possible to do, only affecting the landing page.
As it can be seen in the gif from the link, I was able to add the refresh control to the scrollView but it is only shown for the first page. It still works for the other pages but it is not showing the refresh indicator which might be confusing for the user.
I have tried already a couple of ideas but nothing seems to work.
I am looking for a solution, which either only makes it possible to use the refresh control on the first page and disables vertical scrolling for the other pages or a solution which shows the refresh indicator at every page.
I would also like to disable the diagonal dragging. I added this in case there is a solution which solves both problems.
https://giphy.com/gifs/KfqJnVlwKE9fwFc07R/html5
Help will be very appreciated.
The indicator looks like it is probably added as a child of the scrollview, meaning it is scrolled along with the other contained views, and hence scrolled off-screen.
For an element you want to always be displayed over the scroll view add the indicator as a sibling of the scroll view (i.e. a subview of the scroll view's parent).
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.
I am using iscroll-probe.js to implement the pull-to-refresh and infinite load in a Phonegap application using the example given in this link.
I am loading the contents dynamically so iscroll is refreshed after the list items have been added.
Everything works perfectly for me except the situation when the total height of the list items is lesser than the screen height.
This is when the scroller is not required hence is disabled but it also disables the pull-to-refresh. This I think is how iscroll works as the scroller is disabled the moment I call the refresh method.
Does anyone know how to make pull-to-refresh work when the content height is smaller than the screen height.
For anyone still interested, I solved this problem by setting a min-height to the #scroller element.
I did this using jquery (I'm not sure if it can be done by using css only).
$('#scroller').css('min-height',($(window).height()+1)+'px');
That is: the #scroller element min-height is set to the window height + 1px.
This way the scroller is always enabled.
Please note that this instruction has to be executed before instantiating the iScroll element.
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.