I am trying to make a grid system using jquery masonry. But i have space problem.
I crated this DEMO from codepen.io
If you are using a widescreen computer please narrow browser. When you narrow your browser then a large gap on the right side emerges. Anyone can help me about that problem ?
HTML
<div class="kesif-wrp">
<div class="kesif-alani">
<div class="kesif-gonderiler">
<div class="posts-holder">
<div class="kesif-gonderi-alani" style="height:300px;">1</div>
<div class="kesif-gonderi-alani" style="height:400px;">2</div>
<div class="kesif-gonderi-alani" style="height:400px;">3</div>
<div class="kesif-gonderi-alani" style="height:200px;">s4</div>
<div class="kesif-gonderi-alani" style="height:250px;">5</div>
<div class="kesif-gonderi-alani" style="height:150px;">6</div>
<div class="kesif-gonderi-alani" style="height:200px;">7</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color:#323949;
font-family: 'mstfont' !important;
margin: 0px ;
padding: 0px;
min-width:100%;
float:left;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
background-color:red;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin-right:20px;
margin-bottom:20px;
position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}
I solved the problem as follows.
CSS:
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin:10px;
}
.posts-holder {
position:relative;
margin: 10px auto;
}
JavaScript
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
Working DEMO
The large gap in right because of the position : absolute and top,left css property. All the containers are placed as per their applied classes by following the top,left properties.
Well - you need to change the style sheet completely to fix it once for all.
First of all - set the width of your container where you want to put them all say 1000px then, place your child containers(div's) by using setting the position and left,top properties. And if you need a responsive design then go for media queries.
Hope this helps..
Related
When I use a fixed header, it's shaking when adding my is-sticky
CSS class. It's starting with top:0; for it's animation when scrolling down. I want it to stay fixed smoothly on top in a way that will not cause noticeable jitter. For Example: http://www.lazada.com.my/
Here is my demo.
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
if( ! ($('#scroller').hasClass('is-sticky'))) {
$('#scroller')
.addClass('is-sticky')
.css('top',9)
.animate({
'top': 84
},'1000');
}
} else {
if($('#scroller').hasClass('is-sticky')) {
$('#scroller')
.removeClass('is-sticky')
.css('top',9)
.animate({
'top':84
},1000);
}
}
});
});
body{
height:1000px;
margin:0;
padding:0;
position:relative;
}
#scroller {
position: absolute;
left: 0;
top: 84px;
width: 100%;
z-index: 30;
background:#CCC;
height:20px;
}
#scroller.is-sticky {
position: fixed;
width: 100%;
left: 0;
top: 9px;
margin-top: -31px;
height: 53px;
z-index: 701;
background: #CCC;
opacity: .97;
filter: alpha(opacity = 97);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
<div id="scroller">Some controls</div>
</body>
The effect, from the website you linked, is actually quite easy to do.
Firstly, you want your header element to have position: fixed; there is no need to add this dynamically via javascript. It should have this property by default (as it shows in the website you linked).
What they are doing is hiding the top navigation which is within the header at a certain scroll point.
You can use jquery to do this very simply.
DEMO
var $el = $('header .two');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$el.addClass('hide');
} else {
$el.removeClass('hide');
}
});
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
header .one {
height: 20px;
width: 100%;
background: lime;
position: relative;
z-index: 10;
}
header .one.hide {
height: 0;
}
header .two {
background: red;
height: 40px;
position: relative;
z-index: 20;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
}
header .two.hide {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
main {
background: lightblue;
height: 1200px;
width: 100%;
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div class="one">div</div>
<div class="two">fixed</div>
</header>
<main>
content
</main>
<footer>footer</footer>
You have to check .scrollTop when is reached to 84. In addition, you don't need to use jquery .animate function, you can achieve that effect by css transition.
Jsfiddle
You can create a fixed navbar and divide it into two parts vertically and when user scroll just hide the above part with .slideUp() animation and when user again scrolls on top show it with .slideDown() animation.
Here is the code :
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
//check if it is visisble
if($('#nav-part-to-hide').is(':visible')) {
//if yes then lets hide it
$('#nav-part-to-hide').slideUp();
}
} else {
if(!$('#nav-part-to-hide').is(':visible')) {
$('#nav-part-to-hide').slideDown();
}
}
});
});
body
{
height:1000px;
}
#sticky-navbar
{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
}
#nav-part-to-hide
{
height:40px;
width:100%;
background:#333;
color:#fff;
}
#nav-part-stays
{
height:40px;
width:100%;
background:#bbb;
color:#333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="sticky-navbar">
<div id="nav-part-to-hide">
this conetent hides
</div>
<div id="nav-part-stays">
this conetent stays on page
</div>
</div>
</body>
I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}
For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN
Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.
I'm playing around with the google InfoWindow.
And almost everything is perfect. I'm Just missing something on the windows.
I always have a right and bottom white space.
I don't mind that much for the bottom one but I'd like to get rid of the right one.
Any idea how to do that ?
EDIT, here is the code:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
<div class="" style="overflow: auto;">
<div class="infoBox">
<div style="max-width: 352px; padding: 0px;">
<div id="info-map-element">
<div class="street">
<img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&location=37.7831059,-122.4446528&fov=90&heading=235&pitch=10&sensor=false" alt="">
<div class="shadow"></div>
<div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>
</div>
<div class="wrap clearfix">
<div class="item clearfix">
<small>2013-09-11</small>
<p>This is the a test of customer history purchases.</p>
<div class="row clearfix">
<div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
<div class="col-lg-7"> Purchase No. <span>123456789</span></div>
</div>
<div class="row clearfix">
<div class="col-lg-12"> Sell by My Online seller dot com</div>
</div>
</div>
<div class="row clearfix"></div>
</div>
</div>
</div>
</div>
</div>
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 13px;
font-weight: normal;
}#info-map-element .row > div {
font-size: inherit;
font-weight: inherit;
}
#info-map-element .shadow {
width: 100%;
height: 100%;
bottom: 0;
-webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
position: absolute;
font-style: normal;
font-weight: normal;
z-index: 1;
}
#map .gm-style {
font-family: inherit;
}#info-map-element .pagination {
margin: 10px 0 0;
}
.infoBox > img {
position: absolute;
top: 0px;
right: 25px;
display: block;
z-index: 3;
}
#info-map-element .pointer {
width:23px;
height:19px;
top: 99%;
left: 41%;
position:absolute;
display:block;
background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png');
}#info-map-element .wrap {
padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
background: #ececec;
}
#info-map-element .wrap .item {
padding: 10px;
}#legend strong {
float: left;
margin: 0 10px 0 0;
display: block;
}
EDTI #2:
So I can change the dom the way I want it with Jquery. Those 3 lines work"
$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');
But for some reason only the first line get executed.
The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.
.gm-style-iw-d {
overflow: hidden !important;
}
You need to first remove the infowindow background & shadow, then apply your own css.
JS part
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
CSS part (example)
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
Source
For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window.
Basically, overflow: scroll in .gm-style-iw-d element creates that space.
/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
visibility: hidden;
}
/* clear the paddings */
::ng-deep .gm-style .gm-style-iw-c {
padding: 0;
}
/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
overflow: auto !important;
}
You should stop to try fix height/width and set it auto.
Try to change this line:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
To this:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">
In the Css change:
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
To:
#map_newsfeed .gm-style-iw {
width: auto!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
It should solve your problem, if not, please show the full code (html/css).
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.
I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>
You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}
You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}