How to get the height of a row in a flexbox If I had a flexbox container and within that container, there were 3 different rows would it be possible with maybe javascript to retrieve the height of each row, so for example if I wanted to get the height of the second row in the flexbox would that be a possibility?
You would be able to achieve this by creating an array with all the elements that have the same class, and then with a forEach you would be able to get the height of all these elements. For example:
let arrayName = document.querySelectorAll(".your-row");
//gets every single element that has the your-row class.
arrayName.forEach(element => console.log(element.clientHeight));
/* loops through the element and for each element it prints the height to the console
including padding but NOT the horizontal scrollbar height, border, or margin. */
If you want to get the height of the 2nd element for example, you would just need to use the same array and specify you want to get the 2nd one. For example:
let arrayName = document.querySelectorAll(".your-row");
//Getting all elements again.
console.log(arrayName[1].clientHeight);
// Log the 2nd elements height into the console.
Related
I try to insert several DIV elements into a main DIV - the amount of elements is dynamic and changes according to the number the user inserts.
My question is how to set the length and width of the DIV so that if I add a number of elements that should already be displayed in a wider view than the DIV then just the size of each element will decrease - but the main DIV size will not change.
I hope the question was understandable - how to insert a dynamic amount of elements (DIV) into the DIV??
By using flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Set your parent div to display:flex then set your children according to the ratios you need. If you want them all the same, set them all to flex: 1.
I have two elements. Both are dynamic. In Javascript or jQuery, I would like to grab the height of both of those elements and set the height of an element of the combined height of those two elements.
I know I can set one element of a another with:
$("#canvas-wrapper").height($("main.hero").height());
I tried to include a second element in area where the height gets grabbed such as:
$("div#canvas-wrapper").height($("header", "main.hero").height());
but that isn't working for me. Would I have to put two of those elements in an array?
Using both selectors does not give you the combined height, you have to make separate calls for each:
$("div#canvas-wrapper").height($("header").height() + $("main.hero").height());
Your code is syntactically wrong. You have to find each heights individually and add it together to get the heights.
To get the total height -
var totHeight = $("header").height() + $("main.hero").height();
To set it
$("div#canvas-wrapper").height(totHeight);
Or both in one sentence like this
$("div#canvas-wrapper").height($("header").height() + $("main.hero").height());
I have a ul that is set to display inline-block and list elements that are set to display inline block.
The ul is set to have a width of auto so it shrinks if the container does (responsive).
The list items are set to be auto width of their content which is set to whitespace nowrap and so if they dont all fit in a line they drop down to the next line.
I am trying to detect with jQuery if this is happening. So I am getting the inner width (using width()) of the ul and the calculating the total width of each li by getting each outerWidth() and adding them together. Then I check if the total li width is greater than the inner width of the ul.
But heres the problem, jQuery is returning a value of 933.6800003051758 for the nav's inner width and a value of 934 for the list items. So you'd think that the list items would be breaking onto a second line- but they aren't! So I suppose that the browser is rounding up the nav's innerwidth to be 934.
What I'd like to know is, if I round up the nav's inner width before I compare the value to the total list items width will that be reliable or will my function sometimes think the list items are not breaking on to a second line when in fact they are?
I am writing a script that takes the items in the navigation bar, and stretches each row except the last to the width of the menu's container. The process is basically:
-Find the menu container width
-Iterate through each item, adding the .outerWidth(true) to a variable containing the current row width
-When the current row width becomes greater than or equal to the container width run a few tests
--subtract .outerWidth(true) from current row width and add .innerWidth().
--if row width is still greater than container width, move to the next row array, and add the current item as the first item in the row,
--if the row width is equal to or less than the container width, add the item as the last item of the current row, and move to the next row array.
Once the rows have been created, calculated the necessary padding to add to each element by finding the difference between the container width and the row width and following the following formula:
this.addedPadding = Math.floor( this.difference / ( this.items.length * 2) );
then calculate the leftover space by:
this.leftovers = this.difference - (this.addedPadding * 2 * this.items.length);
Then proceed to iterate through all items, adding the added padding. Then take leftovers, iterate it downwards by 2's, adding 1px of padding to each side of the first element, then second, third, and so on until leftovers is equal to 1 or 0. If it equals one, add one px of padding to the padding-right of the last item in the row.
Iterate through each row, and repeat the process.
Now, the problem is, different browsers render font slightly differently, so the numbers don't always add up perfectly. My current solution is to change the container width by the necessary adjustment by the browser so that the rows render correctly. This doesn't even have consistent results. For instance, on the site I'm working on, in Chrome, the homepage renders incorrectly at first, but (at least on my computer) if you refresh, it renders correctly.
What would be the correct way to address this without having to change the containerWidth based on browser and content? Is there a way?
For an example of the issue, visit http://development.rjhallsted.com/login_system/browsing/projects/insidemt/
We're using the new css3 multi-column layout properties to get our text into newspaper columns. Each column gets a fixed width, and the column-count defaults to "auto", which means that the browser decides how many columns there are.
How do we get the actual number of columns as an integer in Javascript?
If we query the css "column-count" (or -moz-column-count) we get either "auto" or a blank as a result.
The secret is to put a small marker at the end of the content. You can programmatically add an empty span:
<span id="mymarker"></span>
then grab the span using a jquery $("#mymarker") and get the "left" property. Divide that number by the width of the columns (adjusted for column-gap), and that will tell you what column this last element is in. Math.ceil() on the value and you have the column count.
Divide the column container's scrollable width by visible width:
container.scrollWidth / container.offsetWidth
Try this:
$.fn.howMuchCols = function(){
return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};
$('.my-stuff-with-columns').howMuchCols();
Code explanation:
This code will create a function 'howMuchCols ' to each jQuery element.
You can't get the width of a element with columns using the conventional way, because his width is used to define each inner column size. To know how many columns the element have inside, you need to get his real width and divide by the columns size, then you will have the column amount.
The way to get the real width is to sum the X offset of the last child element of the columns container with it width, then, subtract it with the sum of the column container X offset.
In the code, I have added the size of one column after make the subtraction and division rather than use the pixel unit before the division (it does not make difference).
The Math.round must be there because not always the container size will be exactly divisible by his inner columns width.
could you set a class to each column such as class="another-column" and then use Jquery to select the classes and iterate them.
var count = 0;
$('.another-column').each(function(){
count++;
});
Warning, this is untested. If you could supply with some html/css3 code I could test it on jsfiddle