I am using twitter bootstrap and I want to create an overlay to show loading overlay. For example a panel body or a well body will fill and center a text "loading" or image.
I created a jsfiddle application here.
<div class="col-md-5">
<div class="panel panel-info">
<div class="panel-heading">
Header
</div>
<div class="panel-body">
Body
<div class="loading-overlay">Loading</div>
</div>
</div>
</div>
<div class="well">
Well Body
<div class="loading-overlay">Loading</div>
</div>
.loading-overlay{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
background-color:rgba(0, 0, 0, 0.65);
color: white;
}
Bu overlay is filling all page. But I want it will fill only well element or panel body. or if I put it any other element.
sample code is here.
What you want to do here is set the container element to a relative position.
In this case, since both .panel-body and the .well are supposed to contain the overlay all you have to do is add the following rules:
.panel-body {
position: relative;
}
.well {
position: relative;
}
Here's the fiddle: http://jsfiddle.net/3er5qjgt/
That's because :
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
Is transformed into : Take all the place possible on the page.
You could change the position to relative, or change the way you handle this.
Make your parents relative:
.well, .panel-body {
position: relative;
}
JSFiddle Demo.
Add class relative to parent container , to show loading overlay separate for each section.
.panel-body, .well{
position:relative;
}
Here is the fiddle : http://jsfiddle.net/0r7ytrk1/5/
Related
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.
Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform
JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.
I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>
The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle
So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE
I'm currently building a responsive site and i need to have a hidden div which will slide in from the left after clicking a button in the the left side bar. Once this button has been pressed the side bar will be pushed across from the sliding content (Sliding from the left) and overlay the existing content or push across the content in the right hand side.
This is where the problem lies as it's a responsive site. I would like the sidebar in the 'siteInnerLeft' div to be pushed to the right hand side of the page when the new div slides in. So after the content has sliden in the previous content is no longer visible until the sliding content has slid back out.
Here is a my JSFiddle - http://jsfiddle.net/76xvB/2/
Hopefuly you can see what i'm trying to acheive. I've manaed to get it working until a point but the issue I have is the content sliding in is fixed and I don't want it to be fixed as there is more content to view and this removes the users ability to scroll.
I understand that 'position fixed' takes the element out of the document flow. So is this going to stop me acheiving what I want? If so, is there another way of doing it.
NOTE: The real site will have percentages not pixels because of it being responsive, this is a broken down version.
My current code:
HTML
<div id="siteWrapper">
<div id="siteInnerLeft">
<div id="homeNavLink">
<p>Click me</p>
</div>
</div>
<div id="siteInnerRight">
<div class="pushmenu-push">
<p>Current page content</p>
</div>
<div class="pushmenu pushmenu-left">
<p>Content to slide in from the left</p>
</div>
<div id="footer">
<p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
</div>
</div>
</div>
CSS
#siteWrapper{
max-width:500px;
margin:0 auto;
width:100%;
}
#siteInnerLeft{
background-color:green;
width:100px;
float:left;
position:fixed; /* Sidebar that needs to be fixed*/
}
#siteInnerRight{
width: 400px;
background-color:yellow;
float:left;
margin-left: 100px; /*Compensates for fixed header width */
}
.pushmenu {
background: #e9e8e0;
font-family: georgia,times news roman, times, serif;
position: fixed;
width:400px;
height: 100%;
top: 0;
z-index: 1000;
}
.pushmenu-push{
left: 0;
overflow-x: hidden;
position: relative;
width: 100%;
}
.pushmenu-left{
left:-400px;
}
.pushmenu-left.pushmenu-open {
left: 0px;
/* box-shadow: 5px 5px 5px #d9d8d0;*/
}
.pushmenu, .pushmenu-push {
transition: all 0.3s ease 0s;
}
#footer{
width:100%;
clear:both;
background-color:red;
}
jQuery
$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
Any suggestions would be most appreciated.
Thanks.
On completion of the transition, change the position of the sidebar so that it is not longer fixed. The answer on the following link breaks it down pretty well and has quality references:
Callback when CSS3 transition finishes
If the side-bar is fixed, you could create a scroll-bar inside for the content, so the text can be viewable; you could do this by adding overflow-y: auto; in the .pushmenucss class.
Another way would be to set the sidebar as position: absolute; and then dynamically change the top property from javascript when the user hits the sidebar's bottom.
Ex: the 1st Div:
<div style='position: fixed; width=100%'> ....</div>
Now i want to put another Div 5px right below the previous Div. So i did
<div style='padding-top:5px; width=100%'> ....</div>
But it didn't work, seem padding-top compare itself to the top of window but not to its previous Div. If i remove the position: fixed; in the 1st div then it will be fine, but i don't want that.
I want the 1st Div got position fixed & the 2nd Div's position is 5px right below the 1st one. So how to do that?
position: fixed removes the element from the regular flow. You can't use flow positioning anymore.
There are likely proper ways to do what you want, but I don't know what you want because you told us about Y, not X: https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem
I think I understand what you want. If you always know how high the header is you can just add an offset, padding and margin should both work.
<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>
If the header can change height adjust your CSS so that the header and content change their height and content respectively.
<div id="container" class="adjustheaderheight">
<div id="header">
<div id="content">Content goes here</div>
</div>
#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
height: 40px;
}
#container.adjustheaderheight #content {
margin-top: 40px;
}
If your header changes height dynamically you'll need to change the content offset dynamically although I would strongly advise you not to have a dynamic header.
Have you tried margin-top instead?
margin-top: 5px
You might wanna include both these divisions within another division and make this new outer division position fixed. Like this --->
<div style='position: fixed; width=100%'>
<div style='width=100%'> ....</div>
<div style='padding-top:5px; width=100%'> ....</div>
</div>
put the two divs in a wrapper posioned fixed. Also you have invalid css syntax width=100% must be width:100%.
<div style="position: fixed;">
<div style=' width:100%'> ....</div>
<div style='margin-top:5px; width:100%'> ....</div>
</div>
however, this makes the 2 divs fixed... and this might not be what you want. You could do the following:
<div style='position: fixed; width:100%'> ....</div>
<div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>
css values are just for example...
UPDATE:
is this what you want?
http://jsfiddle.net/kasperfish/K8N4f/1/
<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>
#fixed{
width:100%;
position:fixed;
background:yellow;
height:50px;
z-index:2;
}
#widget{
background:blue;
position: absolute;
top:55px;
margin-top:15px;
width:100%
}
If you have tried Margin and it doesn't work feel free to use padding as long as you don't have a background color or image within the div then you won't be able to tell the difference between the two ways of doing this.