I have an issue on my mobile site with the address bar of Google Chrome. I have a fixed navbar on my website and at the moment i scroll down and the address bar dissapear, when i open my menu, a white space (size of the address bar) appears at the bottom and i need to scroll up to make the address bar appear thus removing the white space. This is my menu css:
#menu {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 10000;
padding: 0;
background-color: blue;
overflow-x: hidden;
overflow-y: auto;
}
Other web browsers are working fine on mobile, what can i do to get rid of that address bar blank space?
I have the same problem after upgrading my Chrome. I got it resolved by changing position to fixed.
https://developers.google.com/web/updates/2016/12/url-bar-resizing
Related
I am trying to hide the scrollbar of my iPhone but overflow: hidden doesn't seem to be working. I also tried touchmove(e) {e.preventDefault()} but if I drag from down to up, I still see the scrollbar appear.
If I do position: fixed, then my page jumps (for example: if I open a modal view with my addressbar and nav bar minimized, on doing position: fixed, the address bar and nav bar appears back causing a jump on the page.)
Any advice would be appreciated.
I have also tried adding the styling for the scrollbars like:
.hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0px;
background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-button {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
but still doesn't hide the scrollbar.
I have a header that has a fixed position of top: 0 etc. Which works perfectly on desktop and laptop. But on mobile as you scroll and the top of the browser disappears there is a big white space above the header until the top of the browser fully disappears then it snaps to the top. I want it to always be pushed up to the top of the window. Anyone know how to avoid this?
heres where you can see what I mean;
http://79.170.40.172/allianceworkforce.co.uk/
#nav_bar{
background-color: #404041;
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 60px;
z-index: 101;
}
I implemented the fancy box as usual:
<img src="img/fotos/architektur/thumbs/1.jpg">
<img src="img/fotos/architektur/thumbs/2.jpg">
It works totally cool on Desktops but on my iPad it only works with the left control. A move forward to the next image (right arrow) doesn't work... Why?
if "cyclic" is set to true, maybe there's an overlay issue
did you try to display the page in a desktop window resized to ipad resolution? maybe with "Pesticide" activated ? (it's extension for chrome, will make outlines on all elements)
.fancybox-overlay {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
/* z-index: 9999;*/
background: url('fancybox_overlay.png');
}
I have a jQuery slider which needs to be centered in my body; this slider acts as a changing background (fades into one another). I have no overflow problem on my computer (iMac), but on my nexus 7, my body is much wider to fit the whole image. In both cases, I have the latest version of Firefox.
Here's my CSS:
#grosse_photo {
position: absolute;
top: 0;
left: 50%;
margin-left: -552px;
height: 597px;
width: 100%;
max-width: 100%;
z-index: -1;
}
My images are all 1904px wide x 597px high.
I've tried making #grosse_photo relative and absolute position my images from there, but they don't center. I've also tried overflow-x: hidden to all elements (#grosse_photo, body and html) but don't seem to get anywhere.
If it helps any, this is the jQuery animation I'm using:
http://jonraasch.com/blog/a-simple-jquery-slideshow
It has served me well in the past, but this is the first time I'm using it as a background.
I have visited some sites where when I scroll half a page, a semi-transparent horizontal column of 100-150px height appears right at the bottom of the page with an image on the left and some message, links on the right.
How can I create it?
Its just a css rule.
#footer {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
Using Chrome, click CTRL-SHIFT I, then click on the magnifying glass in the bottom left-hand corner to inspect the element. That's the best way to see how they did it on the site you're looking at.
In IE, F12 gives you the Developer Tools, where the arrow selector tool does the same job. In Firefox, use Firebug.
Then just copy their HTML. And Javascript too if necessary.
Use an element with a style similar to following:
#footer {
opacity: 0.7;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: #330000;
}
and then lay things inside it as you wish.