I would like to compute the actual size of an Element using getBoundingClientRect(). If the Element is inside a container with a given size and overflow:scroll, than result of that method differs.
FIDDLE
How can I always get the total size of the element, no matter if inside a »overflow:scroll« context or not?
The height is always returned correctly, so i believe its the width that you are concerned about. In that case also, your fiddle is giving you the right size of the element.
Here's how -
Remember the rule - The width of the element unless specified will be 100% of the parent.
With the "default overflow" setting you are not setting the width of the parent wrapper and hence according to the rule it takes the 100% width of the parent which going up the chain will be the window width.
With "overflow hidden" and "scroll" you are adding a class "small" to wrapper div which has fixed height and width of 200px. So again applying the rule its width will be 100% of the parent which now is 200px.
Related
I am trying to center a list of floating elements, but since it's a masonry I can't make them inline. A container would be needed, that much is obvious, but I couldn't find anywhere how do make it do this:
Ignore the margins here, they don't matter, it's just so each separate child element can be seen. And yes, the parent isn't centered, but it could be. The important part is that it dynamically fits the child elements and its width isn't 100% all the time.
Already tried floating the parent, in that case the child elements only make a single column.
Why not just set the parent's width the product of that of the maximum numbers of children with each child's width (if the child's width is constant)?
var x = $(child).outerWidth();
$(window).resize(function() {
$(parent).width(Math.floor($(window).width() / x)*x);
});
I have a div and its initial position is 'relative'.
and i used width: 33%; for its width with regard to the parent div.
After clicking a button, it's position will become 'fixed'
I found out that the width will expand so that it is now taking the 33% of the document width.
Is there a way to prevent that from happening? I still want its width to maintain the 33% of its parent div upon clicking the button.
I am struggling to find out a jquery script that allows me to "memorize" its initial width when the document is ready. But so far the .width() is not applicable because it varies all the time.
you don't have to get its width, get its parent width, as I understood parent width will not change, get its width and divide it to 3. that will be what you want
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
I have defined min-width for div elements (float:left). I set their actual width from JavaScript based on window size using $('div.element').css('width','123')
This arrangement works well most of the time but breaks when the browser introduces a vertical scroll-bar, resizing the elements to less than min-width.
Can the elements be re-sized to less than min-width from JavaScript by changing just their width?
You should not be able to change an element's width to less than its specified min-width value. Here is a jsfiddle showing how this works, click on the divs to see their width after having it set in JavaScript: http://jsfiddle.net/jasper/sPen2/1/
I have an container element which is sort of a layout container for its children and based on some attributes I have to arrange children.
I need simple way to set outerHeight of an element, something like,
$(e).setOuterHeight(200);
jQuery's outerHeight does not set the height at all, indeed its a readonly method.
$(e).height(200); // this clips my element
In above method, I loose borders of input of type text.
My element's children are docked based on available space and some other criteria based on data that it holds, simple layouts like float,clear etc will not work because padding etc change dynamically based on sizes. I will finally end up using Table, even if I dont want to but have no choice, but anyway thanks for the help.
Now when element is sized to more then children then there is no problem, but sometimes container element may have lesser height then the children and that time, I need to increase the size.
function calculateSize(e){
var s = {
width: $(e).innerWidth(),
height: 0
};
var ae = new Enumerator(e.children);
while(ae.next()){
var child = ae.current();
// I have tried all alternatives
// for following lines
// child.clientHeight || child.offsetHeight
// $(child).outerHeight()
// $(child).innerHeight()
s.height += $(child).outerHeight();
}
if(s.height > $(e).height()){
$(e).height(s.height);
}
}
function layoutChildren(e){
....
/// for every child c
/// some steps before
var heightForChildren =
calculatedWithPadMarginBorder(availableHeight,c);
/// tried combinations
$(c).height(heightForChildren);
/// last statement fails for button
/// as button's padding cuts itself
/// removing padding in calculation
/// cuts other input elements !!
/// some steps after
....
}
I need some explanation of how to calculate runtime height/width including/excluding padding/margin/border etc and how to set it correctly so that I dont run into problems. I cant keep on trying all permutations combinations as I dont see a correct documentation even on jQuery website.
Fixed height calculations are fine, but this is kind of a dynamic element which resizes itself and arranges children in specific order.
Problem is there is no way to set outerHeight, when we set height/width of an element, the height/width is actually inner height/width without taking margin into consideration, while when we want to resize parent, we need outerHeight, but we cannot set back the outerHeight that easily.
My calculateSize and layoutChildren are two separate methods and two separate algorithms because parent will be resized to sum of all children's height. And then height is simply divided by no. of children stacked one above other. My calculation is perfect, but in my layoutChildren method I have "outerHeight" and "outerWidth" of element and have no idea on how to set it correctly by using jQuery or any other way.
.outerHeight( value )
version added: 1.8.0
you can use jQuery.outerHeight(value) to set the value of an element's outer height. Ex: $foo.outerHeight( 200 )
If you don't have a special requirement, a standard element by default sizes its height to match its children. If you style the to float:left or float:right its default width will then also be that to contain all its children.
Ok, this is strange but this is the Answer.
There are weird controls,
SELECT
BUTTON (INPUT[type=submit|reset|button])
WebKit Browsers
Padding and Border are considered as part of OuterWidth for all controls
Padding and Border must be added to Width as OuterWidth for all controls
Padding and Border are considered as part of InnerWidth for "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"
Non WebKit Browsers
Padding and Border are considered as part of OuterWidth for all non "weird controls"
Padding and Border must be added to Width as OuterWidth for all non "weird controls"
Padding and Border are considered as part of InnerWidth for all non "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"
I would be happy to help, but I simply do not understand your question.
In regards to the documentation of the dimensions methods of jQuery I found that http://api.jquery.com/category/css/ holds documentation on both innerWidth(), innerHeight(), outerWidth() and outerHeight().
I hope this helps, otherwise, try reading through your question, making it more obvious what you need the answer for.