I'm creating parallax images by creating fixed-positioned backgrounds on elements like this:
#element:before {
content: '';
background: url('sample.jpg') no-repeat;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
left: 0;
top: 0;
background-position: 68% center;
transform: translate3d(0,0,0);
}
Works great, except I noticed that when, on a mobile phone, the address bar comes into view, it actually throws off the positioning of my fixed elements. Does anyone know how to avoid this?
Thanks
position: fixed has a number of issues in mobile browsers. Unfortunately, it is usually best to avoid using it because of these issues. Here is an article that outlines these problems in more detail.
Essentially, you should try to use position: absolute instead.
This can be resolved by dynamically changing the height of the before element:
On the page, just a blank style tag with an ID to target:
<style id="values-styles" type="text/css">
</style>
Then the JS / jQuery:
var valuesStyles = jQuery('#values-styles');
// since window resize is called when the address bar is shown or hidden
jQuery(window).resize(function() {
valuesStyles.html("#values:before { height:" + jQuery(window).height() + "px;}");
});
Works perfectly!
best solution for me
I change 100vh to 100%
u can look at Here is an article that best solution
Related
So I'm doing a course where I have to use the z-index to tuck an image behind the div below:
Here's what it is supposed to look like: example
And here is what Mine looks like, even after copying the exact same code, with some tweaks too after reading how other people in my similar situation managed to solve it My version.
Here is the code for the stuff I had to change for it to look like the example:
#features{
padding: 7% 15%;
background-color: white;
position: relative;
}
.iphone-img{
transform: rotate(25deg);
position: absolute;
}
Every time I tried to slightly tweak the up and bottom values, the image's positioning would change drastically. I managed to get the exact positioning I wanted when adjusting with google inspect element, but when actually adjusting in vsc I did not manage to get the same result
There is no z-index in your code.
You need to add it, such as:
.element-background {
position: relative;
}
.element-phone {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
}
This code will position your phone image on top of the background, at the bottom and almost in the center.
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/
The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.
Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)
I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling).
I'm pretty sure it's due to a CSS declaration, but I don't know which.
To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.
From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/
I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.
HTML
<body class="home blog">
<div id="main">
<div id="scenes">
...
</div>
<div id="slidewrapper">
<div id="rightsec" class="mainsec">
...
</div>
<div id="leftsec" class="mainsec">
...
</div>
</div>
</div>
</body>
CSS (Sass)
html {
box-sizing: border-box;
font-size: 125%;
text-size-adjust: 100%;
line-height: 1.4;
}
body {
background: #000;
}
#main {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#scenes {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
width: 100%;
margin: auto;
pointer-events: none;
}
#slidewrapper {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.mainsec {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#leftsec {
z-index: 1;
left: calc(60px - 100%);
}
#rightsec {
z-index: 2;
right: calc(60px - 100%);
}
Cheers!
Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.
I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!
I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.
I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:
$(myElement).block({
overlayCSS: {
height: '10000px'
}
});
... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?
Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.
In XHTML the html and body elements are not quite as magical as in HTML. The body element doesn't fill the viewport (window) automatically, it's size is only as tall as it's contents.
To make an element fill the window you first have to make the html and body elements fill the window:
html, body { height: 100%; }
Then you can use height: 100%; on an element in the body to make it cover the full height.
Set position to absolute and height to 100%.
I have made a complete example for you, now you can use that in your application and and just hide it after ajax request completed.
Click here!
<div class="overlay"></div>
<div id="container">
content Whatever you want even you can delete this container
<div>
Worked for me! I changed absolute to fixed.
function showWaitPopup() {
var obj = document.getElementById('bkdiv');
if (obj) {
obj.style.display = 'block';
}
return true;
}
showWaitPopup();
div.bkdiv {
background-color: #000000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 2000;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 200%;
display: none;
}
<div class="bkdiv" id="bkdiv"></div>
The following code ended up working for me:
$("body").block({
message: '<h2>Loading...</h2>',
overlayCSS: {
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0'
}
});
body {
color: #004A6E;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I used the following post as a reference: Make div 100% height of browser window
the one modification that I had to do was adding left and right. My overlay was covering only the half of the screen.
Basically, I have to present a full-screen div on my page for various reasons. Now this is relatively straightforward in non-IE browsers (absolute positioning, top/left/right/bottom at 0px) and can be easily done on IE7 too (with some tweaking) however I just can't get it working on IE6.
What's weird that I can get it working in quirks mode but when I turn on standards compliance mode, the div does not fill horizontally the screen. Unfortunately, I need standards compliance mode for other elements on the page.
Here's my CSS:
div#myId
{
background-color: #3070cf;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%; /* Removing width or height doesn't help either */
height: 100%;
}
My demo page is basically a standards-compliant XHTML with the appropriate DOCTYPE having only this single div (id="myId") in its body.
Now I know that absolute positioning is generally not a good idea, but as I said, I really need it in this case. Anyone any suggestions?
Have you tried setting this as well?
html, body{
height: 100%;
width: 100%;
}
I have been able to accomplish such feats by first giving the body the following styles:
body
{
height: 100%;
width: 100%;
}
Then, the full size div can be given the following:
div#myId
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
This seems to work in most major browsers. Note too that IE will create a disabled scroll bar on the right of the page at all times. If you do not want this, you can add the following:
html
{
overflow: auto;
}