Facebook style fixed header - javascript

On my site, http://www.merkato.hu, the header has a fixed position. On desktop browsers, this works well - but on mobile devices, zooming the page makes the header unusable due to the fixed positioning.
I have tried a method for making the height and html absolute positioned to header and content, and overflow set to scroll - but there are scripts which need the body to be scrollable.
What is the best way to accomplish a fixed-header for mobile? None of what I'm finding seems worthwhile for iDevices.

This is a difficult problem. Support for fixed positioning is broken or missing in most mobile devices. First mobile browsers that support that came with devices produced this year, or so.
I remember that jQuery Mobile team struggled with fixed headers and footers for quite a while.
They got it working, so I recommend either using jQuery Mobile (or some other framework that can do that obviously) or digging into their JS and CSS to find out how that works.
Anyway, without about 20 different test devices you won't be able to be sure it works. So unless you have a respectable budget, you have to stick to the well-tested open-source solutions.

Related

CSS properties not working on certain mobile devices

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.

Stuttering Translate3D when using rellax.js on mobile browsers

I am currently working on my portfolio site, and I wanted to have some kind of parallax effect. So after I researched I bit, I found rellax.js, which claims to work on mobile browsers too. But now when I view my site on a mobile browser, it is stuttering. I was wondering if this is an Issue from my site, or if it is a general problem with this plugin(even though the example site of rellax.js works perfectly fine on mobile Browsers).
Where to look (and how to recreate) for the stuttering effect: The plugin affects the Header part of the site as well as the card that is somewhat overlapping the header on scrolling. To achieve the effect just scroll the site down and up.
I hope I provided enough information about my problem. The problem can't be recreated on a site like jsfiddle or codepen, because I don't know what is causing it.

Site not loading properly on mobile

I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.

Need a simple custom scrollbar

I have a div that is overflow-y: hidden; overflow-x: auto; and rendering a scrollbar exactly the way I want. I have all of the scrolling functionality and everything I want perfect already. Now, all I want to do is replace the default browser scrollbar with a custom one.
It needs to work in PC IE7+ and Firefox and Mac Safari so it'll need to be JavaScript or jQuery. I've already tried four different plugins that I've found, but none of them worked either because of the version of jQuery (1.6.2), didn't work in all the browsers necessary, or wouldn't work for a horizontal scrollbar, etc. The ones I tried were jQuery UI's slider, jQuery Custom Scrollbar, Tiny Scrollbar and jScrollPane.
I'm hoping there's a simple plugin out there, but I can't seem to find it.
I've used Flexcroll several times and it works great. Good browser support and it handles touch events for mobile devices as well.
The appearance of the scrollbars is handled with a sprite that's pretty easy to customize. It's 17.5KB which comes out to about 8KB when it's compressed so it's nice not having the overhead of a whole library when this is all you want.
http://www.hesido.com/web.php?page=customscrollbar

Best method to determine if viewport or 'standard' browser

So, by now we all know that iOS mobile Safari uses viewports (as does Android browser), rather than a 'standard' browser window. And this causes issues with overflow:hidden, and position:fixed.
This unfortunately is the same case with the iPad. I presume this is the case for other Android tablets too.
Rather than browser sniffing each time, is there an easy way to determine if the browser has a viewport or if it is standard?
Unfortunately, there's currently no good fix for mobile browsers' lack of support for position:fixed. The reason position:fixed is "broken" in the first place is because—among other things—no browser vendor knows exactly how to handle what happens when zooming in on the document. If you have some time to do some reading, I highly recommend the following articles, which will explain browser viewports and the problems surrounding fixed positioning on mobile in great, painstaking detail:
A tale of two viewports – part two — how viewports work and the problem of mobile browsers. (If you're not familiar with viewports in desktop browsers or want the background info, see also part one.)
The fifth position value does a fantastic job of explaining the problems surrounding position:fixed in a mobile browser, and suggests we might need a new position value – device-fixed.
Those articles will give you the why, but not the how to fix it. For a truly fixed position, you're mostly out of luck. However, if your goal is to have a fixed toolbar below scrolling content, there are a few ways to hack it. I've had success with iScroll.
Edit: The correct way to determine if you are running on a touch-based device is the following feature detection:
var isTouch = ('ontouchstart' in window);
ontouchstart is an event fired in mobile Safari and the Android browser. It is not present on desktop browsers, where you can just use overflow:auto and have regular scrollbars. If isTouch is true, you can then use iScroll.
Try media queries: you can include stylesheets, or apply parts of a stylesheet conditionally, based on the device and viewport dimensions the browser reports.
This article gives a decent enough introduction: http://www.alistapart.com/articles/responsive-web-design/

Categories