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.
Related
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
I have nav bar and I'm using js to make my nav bar position fixed. After scrolling down because i adding width 100% my nav bar stretch more then it should and it goes over my layout
my script
$(window).on("scroll", function(){
if ($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
Css
.sticky {
position: fixed;
top: 0;
width: 100%;
}
link to website so you can see what is happening is click here
I recomend you to use the position stick property
For example: nav { position: sticky; top: 0px; }. You should use it inside a container with height defined.
Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#Sticky_positioning
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here you just can give the width value in pixels, what you want. Or if you wanna use it with relative values, you can make a container for it, because it will count the position from the parent element, give a fix width value to the container, and add your element to it.
.sticky {
position: fixed;
top: 0;
width: 100%;
}
could be your problem here.
Change 100% to the actual width you want, because your object is leaving the header object with a static positioning and as so the width isn't regulated any more. This fix is quick but also dirty. Consider changes in your layout have to be applied to all divs with static width, as well as responsive features are harder to implement. Option B would be a much better solution here.
Another solution is to insert a between the page div and your objects and set the fixed width there. Sub-divs allow for aligning objects. Inside objects at 100% width will line up to the next div up in the document tree.
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
I have setup streched background on the homepage of https://picup.it through the class
<div class="bg-background">
Which is defined as below:
.bg-background {
height: 100%;
}
.bg-background:after{
background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
};
However, it looks slight different on localhost. In production (picup.it) background image is stretched to the screen size - you can observer that after scrolling down a div with panel is going out of the background image.
On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.
Why? Same with Chromium and Firefox.
add a background image to your body and fix that image
body
{
background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;
}
try this syntax instead
.bg-background {
background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
height:565px; /* just pick a random height */
width:100%;
position:absolute;
opacity: 0.6;
background-size:100%;
z-index: -1;
}
It may also due to you didnt specify a height, thus it scaled differently.
second explanation, upon inspecting your html dom struture you did.
<body>
<div class='bg-background'>
<!--- html content -->
</div>
</body>
should be this instead
<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
Do you have any browser extension? It might be CSS code is being injected into the page.
Second idea:
You could try changing your code into:
background-image: url('images/picup-bg-01.jpg');
for one, and keep:
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
EDIT:
If you use the Tryit Editor from the w3schools website, you'll see that your CSS code appears exactly as it does on your website (with the unstretched height), whereas using background-image in the same editor does provide you with the expected 100% height size.
EDIT #2:
Actually, it's not exactly what I said while writing EDIT #1. If I use your style code for the body of the page in the editor I get what you currently have on your website. If I use it in a div, however, it is properly scaled.
The code I provided seems to be working on both scenarios, though.
I do not understand what happened but suddenly my page do not scroll down to view the rest of the content...
check it out: www.guestinnation.com/hotels.html
As you can see using the inspect element functionality, the div is much longer than it appears...
Before this I had set a height for the div of 60% of the page and used the overflow:scroll, but then i decided that I simply wanted it to be like the homepage, so I cancelled the height=60% and overflow:scroll, but it ended up being like you see...
Thank you in advance!
Edited
change two position on your css :
#main{
position: relative; // change it from fixed
}
#menumain2 {
position: absolute; // change it from fixed
}
#menumain {
position: absolute; // change it from fixed
}
Do this :
#main
{
position: relative;
}
#menumain
{
position: absolute;
}
#menumain2
{
position: absolute;
}
Your page scroll is gone because you used position: fixed; to center your main content. that means that the element is positioned relative to the browser window.
Try something like that for a mock-up.
<body>
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
</body>
.wrapper{
margin: 0 auto;
position: relative /* Just in case */
width: 960px; }
That's how I'll start.
Or if you have problems starting a website try some HTML starter packs, the web is full of them.