I'm unable to get the border width of an element. I tried the following but it shows empty results. Check http://jsfiddle.net/s7YAN/14/
$('div').css('borderWidth');
borderWidth is syntactic sugar for setting each border's width independently. You can't assume that every border's width is the same, so you need to ask for a specific border's width.
$("div").css("borderTopWidth");
For border-width, you need to specify the side of the border. borderWidth/border-width is a shortcut for all of the border-width's at once.
$( function() {
alert($('div').css("border-top-width"));
});
http://jsfiddle.net/ZsSmp/
Also, you need to specify more than a border width for it to be valid. Just specifying a border-width does not make a border. It needs a color and style, too:
border: 2px solid black;
The problem is you don't define the border-style in your CSS, so it's default to none, whose width is 0px.
Also, you should specify which border (left, top) for border-width is just a shortcut for all borders.
Related
First of all the JSfiddle
I'm trying to make the div (or the element inside the div) background to take the image width and set the background width to it. Because I'm using jQuery position I must use the position: absolute property which for some reason disables the background-size in css and backgroundSize in jQuery. It can only work with those properties when I delete the position property which disable the jQuery position. I tried margin/padding it didn't work either.
HTML(Wont let me add a picture so couldn't add it)
JS/jQuery
$('#ShortText').css({
left: screen.width * .4,
top: screen.height * .4,
})
CSS
#ShortText{
position:absolute;
background-color: rgba(255, 255, 255,.6);
background-size:100%;
}
My final goal is one of those slideshow images with text on them which when you hover over the text more text shows and I need the background because I don't want to set different color to every text on every picture
EDIT:
Add code & fixed jsfiddle
&more info
Your position is absolute, this is not allowing things to change. Changing 'absolute' to 'relative' should fix this. It worked for me in your jsFiddle just by changing that property.
This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.
Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?
See: jsfiddle for an example of how everything returns the width of the element without the shadow.
EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.
You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.
My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:
104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width
104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height
Use a shadowParent class
Here's another technique which worked well in one specific case for me:
Make a shadow parent class which affects it's height, having the same values as the shadow of the child. If you need to, make a new parent div just for this purpose. You can use CSS classes for this, for example: shadow and shadowParent.
Then whenever you need height+shadow, just get the height of the parent.
Advantages:
Less complexity in JS trying to figure out height.
You control the values in one place (wherever you define the CSS
values).
In this case, I simply set some padding on the parent, to account for the childs' shadow. Then I get the height of the parent.
/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
box-shadow: 0px 10px 10px black;
}
.shadowParent {
/* Apply matching values to some property that affects parent height. */
/* I used padding, which worked for my context. */
padding-bottom: 10px; /* Value matches shadow values. */
}
<div id="wrapper" class="shadowParent">
<div id="content" class="shadow">
Content + shadow
</div>
</div>
Using:
$(my_div).width(window.innerWidth)
Does not provide the desired result, because it does not account for the vertical scrollbar, so the element overflows the window, creating a horizontal scrollbar, as illustred below.
Illustration http://dl.dropboxusercontent.com/u/62862049/Screenshots/om.png
You could use width:100%
<div style="width:100%;height:1500px;background:red"></div>
Demo
window.innerWidth includes the width of the vertical scrollbar in some versions of Firefox:
https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
however, w3schools seems to disagree (it says it doesn't include the width of the scrollbar):
http://www.w3schools.com/jsref/prop_win_innerheight.asp
There's even a bug concerning this in the Mozilla bug tracker:
https://bugzilla.mozilla.org/show_bug.cgi?id=156388#c14
The confusion above has been cleared a bit with CSS3, which has a specific property to calculate widths, box-sizing. Set box-sizing like this:
box-sizing: border-box
Which does the following (quoted from w3schools):
The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
You can use width:100% as noted, but bear in mind that this will ALSO include any extra spacing and padding you got - however, in CSS3-enabled browsers, this is resolved with the correct box-sizing property, as noted above. So, if you got, say a div like:
<div style="width:100%; padding: 20px;">
<div style="width:100%; background:red">Test</div>
</div>
The inner div will go off-bounds according to the CSS21 spec. Here's a jsFiddle that illustrates this problem.
So, make sure that you don't have any padding to avoid such issues.
If you want to use jQuery to get the width of the window, you could use jQuery's width() method (or css("width")).
Could you use
$(my_div).css('width', '100%');
?
$(my_div).css("width", "100%");
or
#my_div {
width: 100%;
}
You're also probably going to want to make sure your body or parent div has no padding or margin:
body {
padding: 0;
margin: 0;
}
When you apply border-collapse: collapse; to a table to "meld" its cells' borders together, it starts causing problems in determining the widths of table cells in Javascript. For example, look at this page:
http://game-point.net/misc/browserTests/scratchpads/jsTableWidth/
There are two tables, one with collapsed borders and one without. If you click on a row in the one without collapsed borders, jQuery's innerWidth and outerWidth functions report what I would expect to see (the content width, and the content plus the border width respectively; there is no padding).
However, if you click on a row in the table with collapsed borders, you get browser-inconsistent behaviour, especially on the clientWidth property. In Firefox, clientWidth is the same as width(). In IE and Chrome, it's 1 pixel higher, and in Opera, it's the same as width(), but Opera's width() is too small. In fact, the width() is one pixel too small in all the browsers I've tested except for Firefox. So if you take a screenshot and the content is actually 80px, width() is 79px (jQuery gets it from the calculated CSS value). Why is this?
I'm wanting to get the width of the actual content. I can't seem to use width() because only Firefox gets that right with collapsed borders. I can't use outerWidth() because that includes the borders (or maybe just one border, seeing as it's only 1px larger than the actual content width). I can't use clientWidth because its value is inconsistent between browsers. What should I do and why is width() 1px too short in most browsers when borders are collapsed?
In the collapsed border model, cells are not just "melded" they are shared by adjacent cells.
So say you have markup like this:
<table style="border-collapse: collapse">
<tr>
<td style="border: 1px solid black; width: 100px">
<td style="border: 1px solid black; width: 100px">
</tr>
</table>
In the collapsed border model, the width of this table is 102px. There's 0.5px of border that's actually outside the table, then 0.5px of border, then 100px of cell, then 1px of border, then 100px of cell, then 0.5px of border, then 0.5px of border outside the table. See the picture at http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
So given that, what should a UA return for the various widths of the first cell? Should it be 100px? 101px? 102px? Something else? Simply returning the content width plus the border widths would return 102px, but the actual space taken up by the cell is only 101px...
Furthermore, if jQuery is computing the content width itself it could run into this problem too, if it doesn't special-case border-collapsed cells somehow.
And there is no real spec for clientWidth, much less jQuery's width() and such, of course. That sort of explains why the results you see are all over the place.
As for what you should do, if you actually know exactly what's going on with your borders, you should probably getBoundingClientRect().width (assuming browsers don't mess that up) and subtract off the half-widths of the borders. If you need this to work with various different border widths, I'm not sure there's a great solution.
I think the problem in every browser but Opera is actually something jQuery is doing with its width() function; it has custom hooks for width and height and it doesn't always return the true computed width. When I use window.getComputedStyle to get the widths of these table cells, it does indeed give me the proper rendered width. I am going to report Opera's window.getComputedStyle output as a bug, because it doesn't seem to give you the proper rendered width even when you bypass jQuery.
This is my jsfiddle:
http://jsfiddle.net/BTYA7/4/
At the bottom of the white input box we can see that there is about 5px of padding / margin between the border and the white box. I have tried to use chrome developer tools but I cant see where it is coming from, can anyone help me pinpoint it?
It seems to be on this:
<div class="uEditor" style="">
But in the metric window there is no padding
That is because of the line-height property .. Set it to 0
.uEditor
{
line-height: 0;
}
Check FIDDLE
You can change the line-height to 0 as Sushanth suggested. But line-height is inheritable so you would have to change it back to normal value for the child elements.
Therefore I suggest you change the background colour on the .uEditor to white and leave the line-height unchanged.
See this jsfiddle.