I want the image (any image) height equal the window height even when I resize, I want to do it by jquery.
I used resize method in jquery but I don't get the results I need.
html:
<div class="header">
<div class="container">
</div>
</div>
css:
.container {
width: 1200px;
margin: auto;
}
.header {
background: url('https://preview.ibb.co/cu9YyH/download.jpg');
background-repeat: no-repeat;
}
jquery:
$(function () {
$(".header").height($(window).height());
$(window).resize(function () {
$(".header").height($(window).height());
});
});
There's no need for JS here. CSS alone will do the job, and is preferable for two reasons. Firstly this is a UI concern, so you shouldn't use JS as a crutch for that. Secondly, it performs better and you don't need to rely on the resize event to update the settings on the element.
To achieve what you need use vh (viewport height) units, like this:
html, body {
padding: 0;
margin: 0;
}
header {
background-color: #ccc;
height: 100vh;
}
div {
min-height: 50px;
}
<header>
I am the full-height header...
</header>
<div>
Some content here...
</div>
I have 2 containers placed side by side (floating). Both of these containers have multiples forms generated dinamically and I can’t know which one will be the highest.
So I use a simple script to calculate both divsheight and apply the highest to both. Easy enough and working fine:
$(document).ready(function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
});
The forms inside are responsive, so it will be displayed in 3, 2 or 1 column depending on window width. Simple and easy css:
.form {
float:left;
width:50%;
padding-right:20px;
}
#media (max-width: 800px) {
.form {
width:100%;
}
}
My problema is that I can’t seem to make the script work BOTH at resize and at ready function when the page is loaded and run the script anytime the user resize the window manually.
So far I have tried the solutions I have found here around but none Works so far and I have no idea why. I have tried:
$(document).ready(function() {
$(window).resize(function() {
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}).resize();
});
and
$(document).ready(myfunction);
$(window).on('resize',myfunction);
function myfunction() {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}
and
var callback = function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
};
$(document).ready(callback);
$(window).resize(callback);
But while still working when reloading the window, resizing when the containers grow (under 800px) doesn’t run the script (or the height value doesn’t change).
I’m not an expert at javascript / jquery so probably I’m missing something basic but after many hours I can’t find any solution.
Here is a JSFIDDLE with an example with the original script. Any Little help would be greetly apreciated.
The way you are handling the resize is correct, the issue is that you have already set the height of both of the divs previously, therefore they are no longer expanding/contracting to the size of their contents. I.E if the height of the divs was set to 286 on load the Math.max calculation will be using 286 when the window is resized.
To fix, reset the height before you calculate which is bigger:
$(window).resize(function() {
$(".left, .right").height('auto');
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left, .right").height(height);
}).resize();
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.left {
float: left;
width: 50%;
padding-right: 20px;
background-color: grey;
border: 1px solid;
}
.right {
float: left;
width: 50%;
background-color: grey;
}
.form {
float: left;
width: 50%;
padding-right: 20px;
}
input {
width: 100%;
}
#media (max-width: 800px) {
.form {
float: left;
width: 100%;
padding-right: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="left">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
<div class="right">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
I know we can use calc when lengths are defined:
flex-basis: calc(33.33% - 60px);
left: calc(50% - 25px);
height: calc(100em/5);
But what if a length is variable?
height: calc(100% - <<header with variable height>>);
OR
width: calc(100% - 50px - <<box with variable width>>);
Is there a standard way to do this in CSS?
I know the overall task is possible with flexbox and tables, but I'm wondering if CSS offers a simpler method. Flexbox, tables and simple Javascript are acceptable alternatives.
height demo
width demo
You can use CSS tables:
.wrapper {
display: table;
width: 100%;
margin: 15px 0;
}
.horizontal.wrapper > div {
display: table-cell;
white-space: nowrap; /* Prevent line wrapping */
border: 1px solid;
}
.left { width: 100px } /* Minimum width of 100px */
.center { width: 0; } /* Width given by contents */
.vertical.wrapper { height: 200px; }
.vertical.wrapper > div {
display: table-row;
}
.vertical.wrapper > div > span {
display: table-cell;
border: 1px solid;
}
.top { height: 100px; } /* Minimum heigth of 100px */
.middle { height: 0; } /* Height given by content */
.bottom { height: 100%; } /* As tall as possible */
<div class="horizontal wrapper">
<div class="left">100px wide</div>
<div class="center">Auto width, given by contents</div>
<div class="right">Remaining space</div>
</div>
<div class="vertical wrapper">
<div class="top"><span>100px tall</span></div>
<div class="middle"><span>Auto height, given by contents</span></div>
<div class="bottom"><span>Remaining space</span></div>
</div>
The horizontal case can also be achieved with floats:
#wrapper, .right { overflow: hidden; } /* Establish BFC */
#wrapper > div { border: 1px solid; }
.left, .middle { float: left; }
.left { width: 100px }
<div id="wrapper">
<div class="left">100px</div>
<div class="middle">Auto width, given by contents</div>
<div class="right">Remaining space</div>
</div>
Flexbox can do that.
Support is IE10 and up.
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
}
#top {
background-color: lightgreen;
}
#bottom {
background-color: lightblue;
flex: 1;
}
<div id="container">
<div id="top">green box variable height</div>
<div id="bottom">blue box no longer overflows browser window</div>
</div>
I'm looking for something simple and portable. In the same way a CSS
property can be easily applied across documents, I'm looking for
something similar in terms of ease-of-application for this function.
... isolated fix is preferred.
Horizontal:
This can be achieved using CSS only. As you do not prefer a flex layout solution, the next best bet would be a table layout.
A simple CSS snippet which you could drop into your project (and be done with) would look like this:
div.flexh {
display: table; box-sizing: border-box; padding: 0; margin: 0;
}
div.flexh > div {
display: table-cell; width: auto;
box-sizing: border-box; vertical-align: middle;
}
div.flexh > div:first-child {
/* Override your custom styling below */
min-width: 75px; width: 75px; max-width: 75px;
}
div.flexh > div:last-child { width: 100%; }
You can then add your site-specific styling to this base CSS as per site requirements. Like, nowrap etc.
Two apparent advantages of this solution are:
You do not need to change your markup and also do not need to decorate all children with classes. Just apply the class flexh to your parent div and that would be it.
Minimal Markup Required:
<div class="flexh">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
You are not limited to just three columns. You could have as many columns as need be. The first one will have fixed width, the last one will be flexible, and all the columns in-between would get content-based widths.
Demo Fiddle: http://jsfiddle.net/abhitalks/qqq4mq23/
Demo Snippet:
div.flexh {
display: table; box-sizing: border-box; padding: 0; margin: 0;
/* Override your custom styling below */
width: 80%; border: 2px solid black;
border-right: 2px dashed black;
font-size: 1em;
}
div.flexh > div {
display: table-cell; width: auto;
box-sizing: border-box; vertical-align: middle;
/* Override your custom styling below */
background-color: lightgreen; border: 1px solid #ddd;
padding: 15px 5px;
}
div.flexh > div:first-child {
/* Override your custom styling below */
min-width: 75px; width: 75px; max-width: 75px;
background-color: orange;
}
div.flexh > div:last-child {
width: 100%;
/* Override your custom styling below */
background: skyblue;
}
<div class="flexh">
<div>75px Fixed Width</div>
<div>Variable Content Width</div>
<div>Flexible Remaining Width</div>
</div>
<hr/>
<div class="flexh">
<div>75px Fixed Width</div>
<div><img src='//placehold.it/128x48/66c' /></div>
<div>Flexible Remaining Width</div>
</div>
<hr/>
<div class="flexh">
<div>75px Fixed Width</div>
<div>Variable TextWidth</div>
<div>
<img src='//placehold.it/128x48/66c' />
<p>Variable ContentWidth</p>
</div>
<div>Flexible Remaining Width</div>
</div>
Vertical:
This is a bit tricky to achieve without flex layout. A table layout would not work here mainly because, the table-row would not keep a fixed height as required by your use-case. The height on a table-row or table-cell is only an indicative of the minimum height required. If the space is constrained, or the content exceeds the available space, then the cell or row will increase its height depending on the content.
As per the specs here: http://www.w3.org/TR/CSS21/tables.html#height-layout
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells...
...the height of a cell box is the minimum height required by the
content
This effect can be seen here: http://jsfiddle.net/abhitalks/6eropud3/
(Resize the window pane and you will see that the first row will increase in height as the content cannot be fit into the specified height, hence defeating the purpose)
Therefore, you can restrict the height indirectly either using inner markup like a div element, or let go of the table-layout and calculate the height for the flexible one. In your use-case, you prefer not to change the markup, hence I am not proposing an inner markup.
The best-bet here would be to use the time-tested model of plain block-level divs with the height of the flexible one to be calculated. As you have already discovered that it is not possible with CSS, you will need a small JavaScript snippet to do that for you.
A simple JavaScript snippet (no jQuery) which you could wrap in a window.load and drop into your project (and be done with) would look like this:
var flexv = document.querySelectorAll('div.flexv');
/* iterate the instances on your page */
[].forEach.call(flexv, function(div) {
var children = [].slice.call(div.children), // get all children
flexChild = children.splice(-1, 1), // get the last child
usedHeight = 0, totalHeight = div.offsetHeight;
children.forEach(function(elem) {
usedHeight += elem.offsetHeight; // aggregate the height
});
/* assign the calculated height on the last child */
flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});
The CSS snippet is more or less like the horizontal one, sans table layout, which also you could just drop into your project and just add the additional site-specific styling. Minimal markup required remains the same.
Demo Fiddle 2: http://jsfiddle.net/abhitalks/Ltcuxdwf/
Demo Snippet:
document.addEventListener("load", flexit);
function flexit(e) {
var flexv = document.querySelectorAll('div.flexv');
[].forEach.call(flexv, function(div) {
var children = [].slice.call(div.children),
flexChild = children.splice(-1, 1),
usedHeight = 0, totalHeight = div.offsetHeight;
children.forEach(function(elem) {
usedHeight += elem.offsetHeight;
});
flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});
}
div.flexv {
display: inline-table; box-sizing: border-box; padding: 0; margin: 0;
overflow: hidden;
/* Override your custom styling below */
height: 320px; width: 20%; border: 1px solid black; font-size: 1em;
margin: 8px;
}
div.flexv > div {
display: block; height: auto; box-sizing: border-box;
overflow: hidden;
/* Override your custom styling below */
background-color: lightgreen; border: 1px solid #ddd;
padding: 5px 15px;
}
div.flexv > div:first-child {
/* Override your custom styling below */
min-height: 36px; height: 36px; max-height: 36px;
background-color: orange;
}
div.flexv > div:last-child {
height: 100%;
/* Override your custom styling below */
background: skyblue;
}
<div class="flexv">
<div>36px Fixed Height</div>
<div>Variable Content Height</div>
<div>Flexible Remaining Height</div>
</div>
<div class="flexv">
<div>36px Fixed Height</div>
<div><img src='//placehold.it/64x72/66c' /></div>
<div>Flexible Remaining Height</div>
</div>
<div class="flexv">
<div>36px Fixed Height</div>
<div>Variable Text Height</div>
<div>
<img src='//placehold.it/72x48/66c' />
<p>Variable Content Height</p>
</div>
<div>Flexible Remaining Height</div>
</div>
Note: As pointed out by #LGSon, the display: inline-table used for the demo does not play well with Firefox. This is only for a demo and should be replaced by either block or inline-block as per your use-case.
Updated
As I commented earlier, and besides flex, this is also solvable using display: table and here is a fiddle demo I made showing that.
If a fixed top also were required for the vertical demo, here is an update of my original display:table version: fiddle demo
Sometimes I haven't been able (or didn't want) to use either flex nor tables, and I have, on and off, looked into making use of css calc() and css attr().
Both come short though, as calc() can only use +-*/ and attr() can only return a string value, which can't be computed by calc().
My suggestion, using plain javascript, is based on that these 2 methods, at some point, might be extended so we can make better use of them.
This is how I would like see them work;
width: calc(100% - attr(this.style.left))
but as they don't, and I can't add it to my css either as it wouldn't validate properly (might even break the parsing, who knows) I added a variant as an attribute on the element instead, with some quirks to make it easier to compute.
And in this case (the 2 demos) it looks like this:
//height
<div id="bottom" data-calcattr="top,height,calc(100% - toppx)">...</div>
//width
<div class="box right" data-calcattr="left,width,calc(100% - leftpx)">...</div>
Together with below script, which by no means is fully developed/tested on all property combinations, it does adjust the div's size.
In short, when runned, it take the attribute, split it into an array, take the first item value as from which property to read, the second to which property to set and the third to which the read value gets inserted/replaced and assigned to the property to be set (hmmm, still working on a better way to express this, but hopefully the script is clear enough with whats going on).
Here is a fiddle showing both the height and width demo, integrated, making use of the same script.
function calcattr() {
var els = document.querySelectorAll('[data-calcattr]');
for (i = 0; i < els.length; i++) {
var what = els[i].getAttribute('data-calcattr');
if (what) {
what = what.split(',');
var rect = els[i].getBoundingClientRect();
var parentrect = els[i].parentNode.getBoundingClientRect();
var brd = window.getComputedStyle(els[i].parentNode,null).getPropertyValue('border-' + what[0] + '-width');
what[2] = what[2].replace(what[0],parseInt(rect[what[0]]-parentrect[what[0]]) - parseInt(brd));
els[i].setAttribute("style", what[1] + ":" + what[2]);
}
}
}
IN CSS
Although I've never tried it, I believe that this would work:
.top {
height:13px;
}
.main {
height:calc(100% - var(height));
}
http://www.creativebloq.com/netmag/why-you-need-use-css-variables-91412904
IN SASS
$top_height: 50px
.main {
height: calc(100% - $top_height)
}
Sass Variable in CSS calc() function
In both cases on container css you should put:
#container {
overflow: hidden;
}
But, it will hide the information that overflows the container. I think that is the point, since you put white-space: nowrap; it means that you don't want to change the height, so you have to hide the text that can't fits the container.
I am trying to make a page scale or mobile compatible I think is the term. The problem with my page right now is that it looks good at a certain size but when I drag the browser, the background picture of my page covers the "Services" Title the <section> portion.
Here is the jsFiddle: http://jsfiddle.net/eg18dfy0/4/ Not sure how useful this would be as local files are not included in here.
Normal:
Dragging:
Here is my code:
HTML snippet the matters:
<header>
<div class="background_image">
</div>
<div class="welcome-text-container">
<div class="row">
<div class="welcome-text1">Welcome!</div>
<div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
<div class="btn-row">
TELL ME MORE
</div>
</div>
</div>
</header>
<!-- services -->
<section id="services">
<div class="container">
<div class="service-title">Services</div>
<div class="service-caption">What we'll do for you</div>
</div>
</section>
CSS:
.background_image {
background-image: image-url("header-bg.jpg");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%;
position: absolute;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
/* Services */
#services {
padding-top: 110px;
margin-top: 75px;
}
.service-title {
text-align: center;
font-size: 55px;
font-weight: 700;
}
.service-caption {
text-align: center;
font-size: 20px;
}
This should solve your problem:
Fiddle illustrating fix
You're setting your background image in a div that's getting higher stacking priority based on document flow, so it's overlapping your subsequent divs.
Here's the CSS I added to solve the problem:
.container > div.background-image {
z-index: 1;
}
.container > div {
position: relative;
z-index: 2;
}
There are better ways to do this (i.e. not creating a separate div for a background image), but this will solve your issue without major changes to document structure.
All credit to http://placehold.it for the placeholder image. It's a life-saver if you're going to be solving CSS issues on StackOverflow.
Is it possible to animate two divs widths at the same time (one increasing, one decreasing) so that the parent containers overall width remains exactly the same.
As an example, a container div contains 5 child divs. Teh container div is 1000px wide and 4 of the child divs are 150px wide and another is 400px. I want to be able to animate the 400px div down to 150px and one of the 150px divs up to 400px;
The problem I am getting is that the parent container shrinks and expands as the animation completes - and it happens noticeable.
I am not looking for a plugin or anything for this, simply some advice on the best way of achieving this.
Many thanks in advance for any help.
EDIT:
The main problem is that every div on the right of the one being animated gets pulled to the left and then sent back out when complete.
Here is the code I am using
<style type='text/css'>
.panel-wrapper {
width: 954px;
height: 372px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.panel-wrapper .panel {
margin-right: 1px;
height: 100%;
width: 64px;
float: left;
background-color: #cacaca;
}
#home-panel {
width: 359px;
}
.panel.last {
margin-right: 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.panel').mouseenter(function() {
jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear');
jQuery('.panel-wrapper .open').removeClass('open');
jQuery(this).addClass('open');
jQuery(this).stop().animate({width:"359px"},400, 'linear');
});
});
//]]>
</script>
<div class='panel-wrapper'>
<div id='home-panel' class='panel open'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel last'>
</div>
</div>
Set the parent height to a fixed number of pixels will keep it from shrinking or expanding.
Include an empty div of 1000px width after the divs you want to antimate. That should keep the wrapper div from shrinking.