On the mobile site I'm building, I need the top header to stay fixed positioned.
I am aware of the fixed position solution for Mobile Safari as seen here:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
I tried it and it works well. However, I was wondering if there's a single solution that works for all major smartphone's mobile browsers. Note: I don't need the footer to stay fixed, just the top header. So this should make it easier accommodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.
Thanks!
Important update
As of iOS 5, fixed positioning works fine on mobile. Similarly latest androids support it.
Old answer
I think iScroll is the most actively developed solution, it does support Android
But there are a few things to watch out for:
By enabling this hack you are disabling features people are used to like zoom.
It is adding a lot of complexity to your solution.
For these reasons JQtouch decided not to use it:
Not a problem. It is not currently
supported in jQTouch. Not sure how
familiar you are, but the main problem
here is that mobile Safari does not
support position: fixed. A few people
have worked on implementations of
this, most notably
Cubiq
and
Doctyper.
Both feel wrong to me,
hence why I don't do by default, but
you're free to try to make an
extension which supports it-
Personally when dealing with stuff that needs fixed positioning on an iPhone I prefer to go with static positioning and just autoscroll to the bottom/top when changing the content dynamically.
I was facing the same problem for more than two weeks . And this solution worked for me. Just include
-webkit-backface-visibility: hidden;
in the css of the element along with position:fixed .
It will work fine
Following on from the link that Sam Saffron posted, it seems that a new version of iScroll (version 4) has resolved some of the problems Sam listed.
iScroll-4
In addition to all previous iScroll features, version 4 introduces:
Pinch / Zoom
Pull up/down to refresh
Improved speed and momentum
Snap to element
Customizable scrollbars
I have only looked at the demos on their site, so I can't vouch for it, but it looks good!
Related
So I've been working on browser compatibility. Unfortunately, when I first designed my site, I desigend the CSS aesthetically for Firefox only. Now I'm having all sorts of trouble trying to get it to look good in the other major browsers. However, when I fix the CSS positioning such as floating a box object to the right, IE8 forces it left. I checked my code on W3C and it's okay semantically. I use little to no javascript. It's a portfolio website. The screensize shifts everything around no matter what browser, yet there is no perfect CSS for this so how does one get things to stay in place? I'm not too familiar with JQuery, but this seems to be the closest I can get to an answer. Where would I plug this into my site to see if this works?
On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan
When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.
As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's browser?
Ideas? Thoughts? Thanks.
In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.
Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit
Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/
I'm not super familiar with iOS web app development, but iScroll looks promising.
This is just a simple CSS style:
.className{
position:fixed;
}
You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.
Here is that script you were talking about to make it work in mobile Safari:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch