Does anyone know how to fix this problem. The only browser that works correctly is Firefox; in Chrome and Edge it doesn't work. When I resize the screen the box changes the position. Is there some solution?
Screenshot
HTML
<div class="box" style="background:#F00; height:200px;"></div>
<div class="box" style="background:#F0F; width:25%"></div>
<div class="box" style="background:#FF0; width:25%"></div>
<div class="box" style="background:#00F; width:25%"></div>
<div class="box" style="background:#55F; width:25%"></div>
CSS
.box {
width: 50%;
height: 100px;
float: left
}
JavaScript
$(window).resize(resize)
function resize() {
$(".box").each(function() {
$(this).height( $(this).width() * 0.5)
});
}
Here's the Codepen link:
http://codepen.io/Tufik/pen/rxyQmV
UPDATE---------
I modified the CodePen to show a more complex structure. The problem is when you resize the screen browser, the divs don't respect the correct position, some divs jump to the next line.
This is an old problem. I think it's because HTML is not pixel perfect. But I want to know if there is some easy solution different to use masonry.js or any plugins. Firefox work great, but Chrome or Edge not.
Problem: Unpredictable browser rounding of integers
Each browser calculates numbers differently. For widths and heights, the browser also rounds to the nearest integer for layout. So, the computed pixel-width of each floated box may have a different initial value after converting from percentage and filling out the container. Calculating on these numbers can lead to unpredictable results.
Here is an example of how the values are being calculated in your setup (resize the browser and watch the values change):
function resize() {
$(".box").each(function() {
var height = $(this).width() * 0.5;
$(this)
.height(height)
.html("<code>height: " + $(this).height() + "px (rounded from " + height + ")</code>");
});
}
$(window).resize(resize);
resize();
.box { float: left; }
.box-large {
width: 50%;
height: 200px;
}
.box-small {
width: 25%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>
Solution: uniformly apply your own rounded integer
One way to solve this is to create your own new height value, round it to a whole integer and apply it uniformly to each box instead of applying the decimal value and relying on the browser to do the rounding. The best way to do this is to calculate the new height value from one box and apply it to the others, instead of doing a calculation on each.
Because you have two different sized boxes, we do this calculation twice: once for the large box and once for the small box. The calculated large height value gets applied to all large boxes (only one in this case) and the calculated small height value gets applied to all small boxes.
Example:
function resize() {
var $larges = $('.box-large'), // Get all large boxes
$lgFirst = $($larges.get(0)), // Get first large box
lgHeight = Math.floor( // Round down before the browser screws it up
$lgFirst.width() / 2 // Calculate new height
),
$smalls = $('.box-small'), // Get all small boxes
$smFirst = $($smalls.get(0)), // Get first small box
smHeight = Math.floor( // Round down before the browser screws it up
$smFirst.width() / 2 // Calculate new height
),
// Function returns a function to keep things DRY
setHeight = function(height) {
// This function is returned to the .each() call later
return function () {
$(this)
.height(height)
.html("<code>height: " + height + "px</code>");
}
};
// Set height of all large boxes to new large height
$larges.each(setHeight(lgHeight));
// Set height of all small boxes to new small height
$smalls.each(setHeight(smHeight));
}
$(window).resize(resize);
resize();
.box { float: left; }
.box-large {
width: 50%;
height: 200px;
}
.box-small {
width: 25%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>
I'm not sure whether this answers your question, but I think css flex box is what you are looking for. you don't need javascript to do this.
The below code will align your divs all in one line and also provides responsiveness using flex box(Not exact layout you are looking but im sure you will be able to figure it out)
For more info please refer this article
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
height: 200px;
flex-grow: 1
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1
}
.big {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div class="big" style="background:#F00;">
1
</div>
</div>
<div class="column">
<div class="big" style="background:#F0F;">
2
</div>
<div class="big" style="background:#00F;">
3
</div>
</div>
<div class="column">
<div class="big " style="background:#FF0; ">
4
</div>
<div class="big" style="background:#55F;">
5
</div>
</div>
</div>
</body>
</html>
Related
I have two columns in a row with bootstrap 4. I want to use the whole screen to show the image. This is my code:
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Everything is working good and responsive but this is the result I get from this code:
The preferred result I want is this:
The picture I use the dimension are 6000 X 4000
The solutions I have tried:
html, body {
height: 100%;
}
I have inspected the browser with the Google dev tool and I can see the the body is 100% but still not the result I want.
I have used h-100 from bootstrap and still get the same result.
I have used height: 100vh; but on smaller devices it's not responsive
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013
You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
SEO indexing (if you need it)
sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
Here's a solution which grabs the src attribute of the first <img> element in each .column-image and uses it as <div>s backgroundImage. For it to work, make sure the <div> has the image-column class:
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});
.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
#media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Note: even though it's used as both src of the <img> and background-image of the <div>, the resource (image) is only loaded once.
Here's a solution:
html, body,
.container-fluid .row,
.container-fluid .row .col-md-6,
.container-fluid .row .col-md-6 img {
height: 100vh !important;
}
Add example for the responsive mobile view as you made above, so I can write a solution.
I'm trying to put an image inside my circle chart, but what I'm trying is not working. I have tried to put an "img src" inside the div html5, but that doesn't work.
If someone can help me, that would be nice.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<canvas id="html" height="150" width="150" ></canvas>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>
If you take a look at the Chart.js documentation for doughnut charts, you'll notice there's nothing in there about background images. Background color is the best you get. That's likely because drawing actual photos on a canvas can be a pretty complicated task that is often not especially performant, so they don't include it out of the box.
So that being the case, whether you can still pull this off depends on exactly what you had in mind.
If you want to have different images for each different value on the doughnut, that's not going to happen, at least not while using Chart.js. (You could probably do that if you did the whole chart is pure CSS, though.)
If you just want a single image in the middle of the doughnut, though, what you could do is add an img tag or use a CSS background-image for some element and position that image/element on top of your chart. Since the canvas has to be given a static size anyway, this may work out alright for you; you may just need to experiment a bit to get the position and size just right.
In the snippet below, I've added a wrapper around the canvas and put the background image on a pseudo element of that wrapper (since you can't have pseudo content on the canvas itself). I've positioned the pseudo element to go in the middle of the doughnut.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
#canvas-wrapper {
position: relative;
}
#canvas-wrapper::after {
content: '';
display: block;
position: absolute;
top: 19px;
left: 19px;
width: 112px;
height: 112px;
border-radius: 50%;
background-image: url('https://picsum.photos/id/1042/300/450');
background-size: 140px auto;
background-position: center center;
background-repeat: no-repeat;
}
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<div id="canvas-wrapper">
<canvas id="html" height="150" width="150" ></canvas>
</div>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>
This question already has answers here:
three column layout equal height
(3 answers)
Closed 6 years ago.
I have three floating to the left divs, with 33.33%, each with a different content. I want to make a height of each of them to be same. I thought of setting the height of the first two divs, that are shorter to the height of the last one with javascript. So that it will response to a screen device, and on mobile and tablets will not run.
The there divs will be displayed as a price table on the website. Any suggestions of how could I achieve it?
Use flexbox:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
display: flex;
}
Select all target elements using suitable selector.
Get height(.height()) of all the elements in array using .map
get Max height from the selected elements using Math.max
Set the height of all the elements using .height(NEW_HEIGHT)
$('button').on('click', function() {
var allH = $('.target').map(function() {
return $(this).height();
});
var maxH = Math.max.apply(null, allH);
$('.target').height(maxH);
});
div {
float: left;
width: 33.33%;
background-color: green;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='target'>1
<br>
</div>
<div class='target'>2
<br>
<br>
<br>
</div>
<div class='target'>3
<br>
<br>
<br>
<br>
</div>
<button>Set Max Height</button>
So I've found similar questions but none that answer all the questions I have and I know there must be a simple jQuery answer to this. I've got multiple images that are being dynamically placed in their own containing div that have overflow:hidden, they need to fill their containing divs and be centered(horizontally and vertically) also. The containing divs will be different sizes as well.
So in short:
multiple different sized images fill and center in containing div.
containing divs will be different sizes.
will be used multiple times on a page.
images fill box proportionally
Hopefully this image helps explain what I'm after.
Click here to view the image.
HTML I'm using but can be changed
<div class="imageHolder">
<div class="first SlideImage">
<img src="..." alt="..."/>
</div>
<div class="second SlideImage">
<img src="..." alt="..."/>
</div>
<div class="third SlideImage">
<img src="..." alt="..."/>
</div>
</div>
And the CSS
.imageHandler{
float:left;
width:764px;
height:70px;
margin:1px 0px 0px;
}
.imageHolder .SlideImage{
float:left;
position:relative;
overflow:hidden;
}
.imageHolder .SlideImage img{
position:absolute;
}
.imageHolder .first.SlideImage{
width:381px;
height:339px;
margin-right:1px;
}
.imageHolder .second.SlideImage{margin-bottom:1px;}
.imageHolder .second.SlideImage, .imageHolder .third.SlideImage {
width: 382px;
height: 169px;
}
Ask me anything if this doesn't make sense,
thanks in advance
Here's a JQuery alternative to my CSS solution:
JSFiddle: http://jsfiddle.net/yczPs/
$(".SlideImage").each(function () {
var container = $(this),
img = $(this).find("img"),
margin;
if (img.width() / container.width() < img.height() / container.height()) {
img.css("width", container.width());
margin = -(img.height() * img.width() / container.width() - container.height()) / 2;
img.css("margin-top", margin);
} else {
img.css("height", container.height());
margin = -(img.width() * img.height() / container.height() - container.width()) / 2;
img.css("margin-left", margin);
}
});
I just coded that on the fly and haven't done any extensive testing, but it seems to be working fine for the few test cases I threw at it. Let me know if it isn't working properly for you.
Here is a simplest solution I could come up with :)
Full working example on JSFiddle.
http://jsfiddle.net/L3HhX/1/
$(document).ready(function() {
$('.center-trigger').click(function() {
centerImageInTheContainers();
});
function centerImageInTheContainers() {
$('.container').each(function(i, v) {
var container = $(this);
var myImg = $(this).find('img');
myImg.css('top', calculatePosition(container.height(), myImg.height()));
myImg.css('left', calculatePosition(container.width(), myImg.width()));
});
}
function calculatePosition(containerSize, imageSize) {
return 0 - ((imageSize - containerSize) / 2);
}
});
If I understand correctly, this can be done with pure CSS, granted that you 1) are OK using background images instead of <img> elements, and 2) don't need to support IE8 and below.
JSFiddle: http://jsfiddle.net/6nKKX/
HTML:
<div class="imageHolder">
<div class="first SlideImage"></div>
<div class="second SlideImage"></div>
<div class="third SlideImage"></div>
</div>
CSS: (The parts relevant to the solution)
.imageHolder .SlideImage {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.imageHolder .first.SlideImage {
background-image: url('...');
}
.imageHolder .second.SlideImage {
background-image: url('...');
}
etc.
Alternatively, you can set the background images inline in the HTML with <div class="first SlideImage" style="background-image: url('...');"></div>
Basically, background-size: cover; means scale the image until it covers the entire box (cropping whatever is outside of it), and background-position: center center; centers the image for you.
is there a way to get jquery masonry working with percentage width divs?
I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0
HTML markup:
<div class="boxes">
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-2">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-3">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
</div>
CSS properties:
.weight-1 {
width:25%;
}
.weight-2 {
width:50%;
}
.weight-3 {
width:75%;
}
.weight-4 {
width:100%;
}
Muchos gracias for any input,
J
forget the .wight stuff add only this in css
.box {
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
masonry js
$(function(){
var container = $('#boxes');
container.imagesLoaded(function(){
container.masonry({
itemSelector: '.box',
columnWidth: function( containerWidth ) {
return containerWidth /4;// depends how many boxes per row
}(), // () to execute the anonymous function right away and use its result
isAnimated: true
});
});
});
change holder div to
<div id="boxes" class="masonry clearfix">
and boxes to
<div class="box">...</div>
( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.
Use box-sizing to avoid drooping column issue.
i have same problem, try, try, and try, and this work for me.
.masonry-brick {
width:25%;/*or others percents*/
/*following properties, fix problem*/
margin-left:-1px;
transform:translateX(1px);
}
I had the same problem … solved it with css calc option. That works fine, but not on resizing the windows, then it gets a bit mad …
#media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}
#media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}
#media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}
If you want 25% width not 24.9% add margin-left:-1px!important; to your box