I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.
Thank in advance!
This is not scrollable at all:http://maxeffenberger.de/test.html
This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html
This is the way I have achieved it:
html {
background-color: red;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
/* prevent overscroll bounce*/
background-color: lightgreen;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* iOS velocity scrolling */
}
Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
The only soltuion that worked for me was this :
Put the content of your body inside a wrapper with the following style :
.wrapper {
position: absolute;
top: 0.5px;
left: 0;
right: 0;
bottom: 0.5px;
overflow-x: hidden; /* or any other value */
overflow-y: auto; /* or any other value */
}
the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.
if someone still has this problem with the hiding address bar, this is how its worked for me.
html, body {
height: 100%;
}
body {
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: scroll;
}
.background {
position: fixed;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.
This does it for me in iOS 15. Though my web app disables zooming. Both the top bar and bottom bar are always full size.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
So for it was the problem, that I want to avoid the scroll effect on a certain element. For this element I just set:
.disable-scroll {
overflow-y: hidden;
touch-action: pan-x;
}
It works on Chrome and the Xiaomi Default Browser but not Firefox.
The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API
The following worked for me:
HTML
<body>
<div> This is the container for all content. </div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
⋮
}
body > div {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: CALC(100% + 1px);
overflow-x: hidden;
overflow-y: auto;
⋮
}
Another approach with customized scrollbar:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bdbdbd;
}
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-y: auto;
}
Use window.innerHeight to set boundaries for your site
You can set html and body or your wrapper to
var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
Keep in mind, that it needs to be updated on every resize!
window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar).
You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).
In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling.
Have a look at.
This is also my solution to problems like those above.
2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.
On mobile:
Android 7.1.1/ Chrome 61.0
iOS 9.3.5/ Safari
=> now the browser bar is no longer hiding on scroll- and swipe-events.
Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.
With a javascript window.scrollTo(0, 1); you can fix the problem.
Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.
Related
I have a project with a lot of image content, and in the mobile design there are a lot of blocks with photos and swiper functionality https://swiperjs.com. In the chrome browser on mobile devices when there are a lot of elements with swiper, footer with fixed position starts jumping up and down in the moment of hiding or showing of the address bar.
Gif with the bug on mobile: https://giphy.com/embed/PJ4sLlwts4ziBbCqcX
..on tablet: https://giphy.com/gifs/ZvVenstP3fTHtKlqGs
There are no problems in other browsers like Safari on iPhone or Samsung Internet (which has the same feature with hiding of the address bar) on Android mobile.
Gif with Samsung Internet: https://giphy.com/gifs/AALHRFlsn9Ow7WrtMK
I suppose the problem exists because of the lag in the rendering of a complex html structure or heavy js-processing like hidding of pictures and maybe this is not exactly a problem of swiper lib. But this problem appears only in the mobile chrome.
I also see the similar problem on instagram which uses "swiper" functionality:
https://giphy.com/gifs/QU8RECMfJG0OR7GO2h
But it's not so visible as in my case.
css of footer:
.footer {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
z-index: 10;
}
I tried position: sticky, but it didn't help.
I've made a live example: https://run.plnkr.co/plunks/wCEUiMEmUD3f2B9u/ (https://plnkr.co/edit/wCEUiMEmUD3f2B9u) and angular repo: https://github.com/xfuturomax/swiper-fixed-footer-demo
Styles and html were taken from the demo code: https://github.com/nolimits4web/swiper/blob/master/demos/010-default.html
Have you got any ideas how I can fix this problem?
UPDATE:
I've tried like this: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
top: calc(var(--vh, 1vh) * 100 - 44px); +
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
but it didn't help
I've noticed that even without the footer I see some lag on hiding address bar: https://giphy.com/gifs/iNQGGynwTdrmB8zRPB , where green - background of html tag.
html {
background-color: green;
}
One of the solutions - inner scroll on main wrapper, it works well, but address bar now doesn't hide on scroll. This is the only solution at the moment.
#media (max-width: 895px) {
html {
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
position: fixed;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.main-wrapper {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
}
Try Adding -webkit-backface-visibility: hidden; to the .footer
This is not my script.
I tried editing this script so when my pictures are clicked, they would not be larger than the device's resolution, and they would be centered in the screen. Unfortunately, what I've tried places them on the top-left and makes them smaller than the resolution.
I've tried margin auto, max-width / height, and removing top:0; left:0;
Here's where the script is deployed: http://idealportraits.com/
When I click an image on the PC, the original code works well. When I use my phone and tap an image, depending whether the image is larger vertically or horizontally, it becomes much too large and goes off-screen.
How do I make the image open as the full resolution (width or height, whichever is reached first) of the device being used, not larger, and centered in the screen?
<!-- Images enlarge on click -->
<script type="text/javascript">
function showImage(smSrc, lgSrc) {
document.getElementById('largeImg').src = smSrc;
showLargeImagePanel();
unselectAll();
setTimeout(function() {
document.getElementById('largeImg').src = lgSrc;
}, 1)
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.display = 'block';
}
function unselectAll() {
if(document.selection)
document.selection.empty();
if(window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<style type="text/css">
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<!-- End script -->
Just as a work around. I have typed up a quick CSS only onclick event for your images. So when you click on the images, it should expand them to 100% height/width, and also be centred on the screen.
It also means your have to copy/paste the relevant bits onto your piece of code, But why use JS when you can use CSS, after all people do disable Javascript sometimes.
http://codepen.io/Ballard/pen/JRjAod
.box {
width: 700px;
height: 700px;
background-color: #000;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
}
.inbox {
text-align: center;
vertical-align: middle;
line-height: 350px;
width: 350px;
height: 350px;
background-color: #fff;
color: #000;
align-self: center;
}
#btnctrl {
display: none;
}
#btnctrl:checked + label > .fb {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
overflow: auto;
}
<div class="box">
<div class="inbox">
<input type="checkbox" id="btnctrl"/>
<label class="btn" for="btnctrl"><img src="https://s19.postimg.org/777mf3pdv/facebook.png" class="fb"></label>
</div>
</div>
Let me know if this is any good for you, may save alot of scripting time.
By the sounds of it, you might be dealing with the old Android position: fixed problem. Try this.
If that doesn't solve the problem, try setting 100% width and height on the document/container and then using max-width and max-height for the images.
I'm not providing this in the comment section, because I don't have enough reputation to post comments.
From what i can see, the problem is not just with the script. e.g. if you hold your mobile device in landscape mode and click on the images you will see that all large images are fully visible when clicked(they may not fill the screen though).
At the moment the HTML for the large images seem to be hardcoded with a height of 100%, you will need to remove that and set that in Javascript by checking the ratio, if it is portrait image then set the height to be 100% and if it is a landscape image then set the width to 100%
Quick background:
I'm trying to make a mobile-friendly widget. My customers have non-mobile friendly pages, and this isn't likely to change anytime soon.
Attempted solution:
I figured this wouldn't be so bad. Just remove the widget from the page flow by using position:fixed, insert a viewport meta tag, and presto! ...right?
See this here fiddle.
The Problem:
The attempted a solution breaks on some mobile devices. When using a co-worker's phone, they were able to scroll away from the supposedly position:fixed element! (Phone in question is Android 4 or 5, so it's not the 2.1-2.3 bug.) I'm pretty sure this same behavior occurs on iPhones.
Essentially, it seems to be behaving as though it were position:absolute on the top-left corner of the page.
Attempted Solution Details:
I start by appending the viewport meta tag with javascript:
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
Let's just assume a very basic HTML template:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
and following CSS:
.hide-overflow {
overflow: hidden;
}
.overlay {
position: fixed;
-webkit-backface-visibility:hidden; /* Not that this does anything */
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table;
overflow: hidden;
z-index: 1000;
}
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
width: 800px;
height: 500px;
}
#media (max-width: 800px) {
.overlay * {
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
Of course, I didn't think this would be enough. I also added the following javascript to prevent scrolling on the <body> and outer-most <div> element:
// This only shows up when the widget is activated--it's removed on deactivation.
$('body').addClass('hide-overflow');// Just adds overflow:hidden, in case you forgot ;)
$('body > div').addClass('hide-overflow');
On my phone's (Galaxy Tablet Note) default browser, this works great! No problems! As mentioned before, on iPhones, questionable Android devices, etc., you can scroll away from the position:fixed element as though it were actually position: absolute. How do I get position:fixed to work?
The solution was a bit simpler than I'd thought. Using javascript, I was already appending my hide-overflow class to the body and first div element. That class looked like this:
.hide-overflow {
overflow: hidden;
}
What fixed my problem was changing it to the following:
.hide-overflow {
overflow: hidden;
width: 100% !important;
height: 100% !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
That's it! Just add this class to the <body> tag when the widget shows, and remove it when the widget is hidden.
Here's the working fiddle.
I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom
EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html
Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!
I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.