I am working on a project using Ionic and AngularJs. I need to hide the address bar on scroll just like Facebook mobile. When we open Facebook in a mobile browser and scroll to the top it hides the address bar. I need the same thing in Ionic for all platforms - Android, IOS etc.
I am breaking my head for last 2 days on this. But I still haven't found
anything relevant. I tried many things but nothing worked out. Kindly
help me to get out of this and also suggest if it is not possible.
Related
I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.
I have a fully functionnal SPA website (Reactjs) which I just made responsive. Everything went smooth except that the site refuses any "scroll movement" on the body, preventing the mobile browser bottom bar to disappear. It is a one page website which I created to have everything displayed full-screen (no need to scroll anything), so I suppose that it is CSS linked, but I just have absolutely no clue on what is happening. Actually, on my Samsung S20+, only the opened burger menu accepts any page scroll movement, permitting me to hide those navigator bars (up and bottom). But once again, I see no specific CSS differences between that burger menu and the main page. Could anyone help me on this ? I'm so lost with it that I don't even know what kind of information I could add in this post except the URL of the website: https://www.epistolads.net.
NB: the sources maps are available on the website, for testing purpose
EDIT 1: just noticed that I can achieve the desired result (scroll on page to hide nav bar) by first zooming a little, if it speaks to anyone.
EDIT 2: Also, I may no "refresh the website" by scrolling "out of screen" up.
Ho mine, got it ! Some month ago, to be sure that no forgotten content gets out of the screen, I added a "overflow-y: hidden;" on the body of the index.html file itself! Changing it back to "auto" gave me back full control on mobile. In case of other people would meet the same problem...
All Dev, I am working on pull to refresh feature in my react native project. As we all know that react native itself providing a Refresh Control that we can us along with List and ScrollView but not with View 😉that's fine.
I notice that there’s no common gesture for refreshing the page data for both platform if we go with the Refresh Control because of fundamental different
After reading this articlehere:
For iOS, the Pull-to-Refresh embedded in as part of the list.
For Android, the Pull-to-Refresh is not part of the list, but on top
of it.
Now my question is there any way to implement the same gesture for refreshing on iOS platform either native side or react side. For android we have SwipeRefreshLayout but do we have any controller that help to achieve the same gesture in iOS platform?.
Below is the refresh image from android platform:(Gmail App)
Sorry in case of you can't understand the question. feel free to comment will update. Any suggestion and comments are welcome.
Thank you.
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
The landing page for site http://www.kisadesign.co.uk works for desktop but when viewed on mobile and tablet the ability to scroll has gone so all you can see is the navigation and top block. It's responding to the media queries but can't scroll down. Any ideas on how to fix this?
I'm not sure what jquery you use for the parallax scrolling but I use Skrollr for my website that it works pretty well for mobile devices.
https://github.com/Prinzhorn/skrollr