I am using jquerymobile framework and i would like to stop scrolling conent while panel (menu) is open.
on this page: http://api.jquerymobile.com/panel/#option-positionFixed
it says how to position it to fixed, however you can still scroll down.
many thanks
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.
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 this example:
jsfiddle.net/6mNpp/
Is it possible, to prevent the scrolling of the left menu, when it is open and the whole site is scrolling? I mean, when I open the left menu and scroll the content, then the left menu is scrolling as well. How to make them with independent scrolling?
Thanks
Nik
You can set the panel fixed with CSS. With this, the left panel is not scrolling when the content is scrolling.
The code is the same that the JSFiddle, just add in the style, position:fixed
<div data-role="panel" id="defaultpanel" data-display="push" data-theme="b" style="overflow:auto; position: fixed;" data-animate="false">
Reference: Positioning Panels
More info...
JqueryMobile roadmap http://jquerymobile.com/roadmap/ says independent scolling should arrive in version 1.7
Another possible hack workaround maybe adding the divs via an iframe may offer a clumsy solution.
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.