I am building a mobile website and need a fixed positioned button (for quick link to scroll to top) that should move across while scrolling the screen. fixed position is not supported by mobile browsers. Can anyone suggest the way around for the same. I am using twitter bootstrap. I have observed fixed position header and footers for mobile in jquery mobile framework but could use it in twitter bootstrap page.
Thanks in advance.
You can use a navbar-fixed-top or navbar-fixed-bottom navbar on your site and that will function properly on mobile devices. Refer to the Optional Display variations section under navbars http://twitter.github.com/bootstrap/components.html#navbar.
Related
I am currently developing a hybrid app in iOS that loads a website and has some other features (contacts, sharing, notifications...) using cordova plugins. I do have access to the content of the site that is being displayed by the iframe.
The normal way this is done is to load the website in an iframe. I have already done this in android and it works very well. In iOS however:
Safari messes up the size of the frame. I fixed this by setting the min-width css style to 100% for the frame.
Scrolling on the iframe is always set to "no" even if you specify "yes. I "fixed" this (so I thought) by using the only solution I could find which is to wrap the iframe in a div and scroll the div. This made the header (position:fixed) scroll with the page when it should be fixed to the top of the page and broke other things on the page that rely on scroll position to trigger an action. I also tried modifying the body of the content to contain css styles mentioned here but this didn't work either. I was back to square one.
I have spent a total of a week researching how to fix this with no avail. Recently I have discovered that loading my website in iOS's UIWebView or WKWebView works well to display the site exactly how I would expect.
That brings me to two possible solutions (and my question):
Maybe I missed something with the css style on the content of the site. I read that it is possible to get scrolling to work this way but I am sceptical because safari does not allow scrolling on an iframe.
(The likely solution but the one I cannot figure out) Make my cordova app use a one of iOS's webviews. This is what I am having problems with. I cannot figure out how to do this. Is a webview an iframe? How do I use one of these webviews in my app? What does the index.html (cordova specific file) look like when I use a webview instead of an iframe (because currently this is where my iframe is).
I solved this. Since I have access to the contents of the page, I added:
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
To the scrolling body of the page. This fixed my problem
I am trying to use the iOS smart app banner on my website. I am currently using jquery mobile 1.3.1 for development. The problem I'm having is jquery mobile automatically hides the address bar on page load. Since the smart app banner appears to be a part of the address bar, the user cannot see the smart app banner unless they scroll up. Is there anyway around this problem? Ideally the page would load and show the smart app banner and not the address bar. However, at this point I would be fine showing both on page load. I know the folks over at HTML5 Boilerplate have solved this issue. See:
Hiding address bar without hiding the smart app banner on iOS 6
The problem with this solution for me is turning off the hide address bar feature in jquery mobile. I can't seem to figure out how to accomplish without altering the jquery mobile core code. I don't really want to alter the jquery mobile code. Mainly because I don't like changing code that I have to update when a new version comes out. Plus I am pulling the jquery mobile file from jquery's CDN. I would like to find another way to solve this problem. Any ideas? Thank.
Add
window.oldScroll = window.scrollTo;
window.scrollTo = function(){return false;};
before you load jquery mobile. This will override Jquery mobile hiding. then you can use the helper.js by reassigning scrollTo after jquery mobile script.
We're trying to put a fixed navigation to scroll the different sections of a page.
i have 3 links to link to different sections of the same page. and the position of the div containing this links are fixed.i am caling a function when that link clicked.
We're using jquery scrollTo().to scroll.it is wrking fine on desktop applications.
Only on ipad, the first click pass without problem, but after this one, the on the navigation seems to be disabled. If we scroll, even a little bit, with the hand, then the link's work again.
I used:
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
ofter scrollto but no luck....
Please help me
Jquery mobile anchor linking will prevent you from doing that. you might have to write a custom js to do the scroll.
More here -
https://forum.jquery.com/topic/jquery-mobile-anchor-linking
I have created bottom fixed tabs using jquery mobile data-role="navbar" inside a JQ footer. The issue is it creates a div on runtime outside the page flow which is absolute, more than the height of the page content. This is getting created on runtime and appears only when the navbar code is written. Need some help on it.
First, are you viewing the website on a mobile device (and which mobile OS if so).
This issue has appeared in my experience, but only when using a standard web browser.
I have a page that is straight from the jQueryMobile site. I'm including a table of names, but on the iPad, it doesn't allow the user to pinch the screen size.
Please refer to this answer:
http://forum.jquery.com/topic/problem-with-the-zoom-on-ipad
In short, jQuery Mobile injects a fixed viewport size into the page.