I want to have to floated columns side-by side. If second column has contents then the first column should resize its content based on the second column, is that possible with CSS? Widths are not defined.
It's possible using javascript but not with straight CSS. Here are some ways to do it:
Using javascript:
var rightDiv = document.getElementById("straightJ2");
var rightWidth = rightDiv.clientWidth;
var leftDiv = document.getElementById("straightJ1");
if($('#straightJ2').text() || rightDiv.hasChildNodes()) {
leftDiv.style.width = rightWidth + "px";
}
Or more minimal (and possibly overwhelming/hard to follow) javascript:
if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}
Using jQuery:
if($('#secondColumnId').html() != '')
{
$('#firstColumnId').width($('#secondColumnId').width());
}
Each of these check the second div for text or a child element and change the width of the first if one of those conditions is met
All examples can be found used in this jsFiddle
Related
I've a rather complicated website design I'm working on. I have the following 4 containers (I call them that, but they don't have the .container class)
In a wide screen layout:
In a narrow screen layout:
The issue I'm having is matching the total height of the white, grey and yellow containers with the blue container on a wide screen layout:
The grey and yellow containers are in a .row div, so adding the style { display: inline-flex } makes them the same height on a narrow screen layout:
However, this moves them completely to the side in the wide screen layout and this wouldn't match the combined white, grey and yellow containers with the blue container:
I tried a JavaScript solution as #Paulie_D recommended.
$(window).load(function () {
NormalizeHeights();
});
window.onresize = function (event) {
NormalizeHeights();
}
function NormalizeHeights() {
if (window.innerWidth >= 768) {
var carousel = $(".carousel-container");
var dashTop = $(".dash-row-top");
var panelLeft = $(".dash-row-bottom .panel-lightgray");
var panelRight = $(".dash-row-bottom .panel-yellow");
var carouselHeight = parseFloat(carousel.css('height'));
var dashTopHeight = parseFloat(dashTop.css('height'));
var panelLeftHeight = parseFloat(panelLeft.css('height'));
var panelRightHeight = parseFloat(panelRight.css('height'));
var dashBottomHeight;
if (panelLeftHeight > panelRightHeight) {
dashBottomHeight = panelLeftHeight;
}
else {
dashBottomHeight = panelRightHeight;
}
if (carouselHeight > (dashTopHeight + dashBottomHeight)) {
var difference = carouselHeight - (dashTopHeight + dashBottomHeight);
panelLeft.css("height", (dashBottomHeight + difference));
panelRight.css("height", (dashBottomHeight + difference));
}
else {
var difference = (dashTopHeight + dashBottomHeight) - carouselHeight;
carousel.css("height", (carouselHeight + difference));
panelLeft.css("height", (dashBottomHeight));
panelRight.css("height", (dashBottomHeight));
}
}
}
This works, sort off, but it's extremely unlikable in my estimation.
I had a similar problem and the solution I found was rather ugly but worked for me.
I used divs that would clear formats BUT would their presence would be conditioned (using ng-if). Programmatically, I measured the width of the screen and set a threshold. If the width was above the threshold, I set the location of the divs, measured the height of the contents and, when applicable, forcefully changed the height of all the relevant divs to look the same (note that you would need to set this size update AFTER A TIMER is fired to let the rendering to complete).
Hope this gives you some ideas and remember: I was the first to call this ugly.
I have been trying to get the height of an image dynamically while adjusting the browser window.
I used console.log() to get the value to check if my results are correct, and somehow the result is always 0! What am I doing wrong?
$(function(){
var ScreenHeight = $(window).height();
var ImageHeight = $('#bkgImages').height();
var ImageMove = (ScreenHeight-ImageHeight)/2
$('#wrapper').slideDown(500);
$('#bkgScreen').animate({opacity: .5}, 700);
$('#bkgImages').css({top: "-" + ImageMove + "px"});
console.log(ImageHeight);
});
I manage to get the window height result working but not the div element height. The other issue is this calculates the result only once per session, where as I need to function to run every-time a user adjusts the browser window size. How do I go about doing that?
I think it depends on the css property of the div, and you may refer to answer here https://stackoverflow.com/a/10656669/693110.
In short, you need to specify the div to have display: inline-block; property.
Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.
E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):
there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:
Where top cells automatically collapse to cell content height. Is there anyway to achieve this?
This sets the last row of cells to the correct height (demo):
function grow(td) {
var table, target, high, low, mid;
td = $(td);
table = td.closest('table');
target = table.height();
low = td.height();
// find initial high
high = low;
while (table.height() <= target) {
td.height(high *= 2);
}
// binary search!
while (low + 1 < high) {
mid = low + Math.floor((high - low) / 2);
td.height(mid);
if (table.height() > target) {
high = mid;
} else {
low = mid;
}
}
td.height(low);
}
$('tr:last-child td').each(function() { grow(this); });
It should be trivial to convert this into plain JavaScript.
Update: For more complicated tables, you'll want to replace the last line with this (demo):
$.each($('td').get().reverse(), function() { grow(this); });
The idea is to call grow() on every cell, starting with the last row and working upwards.
considering table id="mytable" it would be:
$("#mytable").find("td").each(function(){
var ContentHeight = $($(this).html()).height();
$(this).height(ContentHeight);
});
at the end of the your page create a javascript code and let it do it for you:
<script type="text/javascript">
document.getElementById("idOfTd").style.height="100px";
</script>
I think it better create like this http://jsfiddle.net/miqdad/w9QYB/
I've got two columns and i need to add line between them. This is 1px solid color so i would love to achieve this with css.
The trick is that content is dynamicaly loaded, so sometimes the left column can have more text and sometimes right column can have more text. Of course if the size of coulmn would be always the same i would add the border to bigger one. But unfortunatly i don't.
So is there a way to achieve this or do i have combine it with php and maybe strlen or something?
You can find simple code for this problem here http://jsfiddle.net/M9TSs/
One way of doing it would be to have a border on both, and use a negative 1px margin to pull the right column over so that the borders overlap:
http://jsfiddle.net/7GCff/
I already solved this using JQuery...
I used this code and it worked great.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source : http://www.cssnewbie.com/equal-height-columns-with-jquery/
Makes all columns have the same height as the longest.
I have this html:
<div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>
I have floated all of these divs left. I set the width of #subNav and #feedBar, but on #feed I set its min-width . It takes the min-width even though the window is larger. Is there any way that with floating you can make the min-width work? I am trying to make a flexible layout on the page.
The following answer uses a JavaScript solution, in response to #Chromedude's comment (to the original question):
#David Is there any way to override this behavior? with javascript?
I'm sure there's a far more simple way of doing this (certainly with a JavaScript library), but this was the best I could come up with at this time of morning (in the UK):
var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px');
JS Fiddle demo.
Using jQuery (just as a suggestion as to the ease offered by a library):
var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth));
Use a grid system such as the one in Foundation 3. When placed on a div representing an element of the grid, min-width behaves just fine.
To get min-width to work without a grid, use a CSS rule that inserts an invisible pseudo-element with the desired minimum paragraph width.
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
}
Further details are at the source where I learned this.