I have a stylesheet which defines default width for images. When I read the image width style with jQuery width() it returns the right width. It also returns the same width when I call css("width"). But if there is no width defined in the stylesheet the function css("width") will also return the computed width() value but won't say undefined or auto or something like that.
Any ideas how I could find out if style is or is not defined in the CSS code?
Solution works for me cross browser. Thanks to everyone for helping:
$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");
.default_width_check {
width: 12345;
}
I have a workaround idea that might work.
Define a class named default_width before all other style sheets:
.default_width { width: 1787px }
/* An arbitrary value unlikely to be an image's width, but not too large
in case the browser reserves memory for it */
to find out whether an image has a width set:
Clone it in jQuery: element = $("#img").clone()
give the cloned element the default_width class: element.addClass("default_width")
If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.
I'm not entirely sure whether this will work, but it might. Edit: As #bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.
No, the getComputedStyle() method on which jQuery's css() function depends cannot distinguish between an width computed from auto vs explicit widths. You can't tell if there was something set in the stylesheet, only from direct inline style="width: ..." (which is reflected in the element's .style.width property).
currentStyle works differently and will give you auto, however this is a non-standard IE extension.
If you really wanted to work it out, you could iterate over document.styleSheets, reading each of their declarations, getting the selector out and querying it to see whether your target element matched, then seeing if it contains a width rule. This would, however, be slow and not at all fun, especially as IE's styleSheet DOM differs from the other browsers. (And it still wouldn't cope with pseudo-elements and pseudo-classes, like :hover.)
You can use image.style.width (image should be your element). This returns an empty string if it's not defined in CSS.
You can check the element's style.cssText if the width is defined;
<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />
var pic = document.getElementById('pic');
alert(pic.style.cssText);
But please note of the following styles
border-width: 10px;
width: 10px;
you should only match the width not the border-width.
Related
I have a stylesheet which defines default width for images. When I read the image width style with jQuery width() it returns the right width. It also returns the same width when I call css("width"). But if there is no width defined in the stylesheet the function css("width") will also return the computed width() value but won't say undefined or auto or something like that.
Any ideas how I could find out if style is or is not defined in the CSS code?
Solution works for me cross browser. Thanks to everyone for helping:
$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");
.default_width_check {
width: 12345;
}
I have a workaround idea that might work.
Define a class named default_width before all other style sheets:
.default_width { width: 1787px }
/* An arbitrary value unlikely to be an image's width, but not too large
in case the browser reserves memory for it */
to find out whether an image has a width set:
Clone it in jQuery: element = $("#img").clone()
give the cloned element the default_width class: element.addClass("default_width")
If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.
I'm not entirely sure whether this will work, but it might. Edit: As #bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.
No, the getComputedStyle() method on which jQuery's css() function depends cannot distinguish between an width computed from auto vs explicit widths. You can't tell if there was something set in the stylesheet, only from direct inline style="width: ..." (which is reflected in the element's .style.width property).
currentStyle works differently and will give you auto, however this is a non-standard IE extension.
If you really wanted to work it out, you could iterate over document.styleSheets, reading each of their declarations, getting the selector out and querying it to see whether your target element matched, then seeing if it contains a width rule. This would, however, be slow and not at all fun, especially as IE's styleSheet DOM differs from the other browsers. (And it still wouldn't cope with pseudo-elements and pseudo-classes, like :hover.)
You can use image.style.width (image should be your element). This returns an empty string if it's not defined in CSS.
You can check the element's style.cssText if the width is defined;
<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />
var pic = document.getElementById('pic');
alert(pic.style.cssText);
But please note of the following styles
border-width: 10px;
width: 10px;
you should only match the width not the border-width.
I have a routine that sizes elements in a page to fit snugly within their parent. In most cases, it is working admirably, but in Firefox (JUST Firefox - Chrome, IE, etc are fine) it is fumbling on the first attempt in one particular instance - a div nested within a fieldset fails to resize on the first attempt, but succeeds on the second (and subsequent) attempts.
Each element is sized relative to its parent using the following:
function resizeChild(elem) {
// Get gutter based on margins, borders, padding, etc
var gutter = getGutter(elem); // returns obj with x and y properties
var parent = elem.parentElement;
var parentStyles = window.computedStyle(parent);
var targetWidth = (parseInt(parentStyles['width']) - gutter.x;
var widthPx = targetWidth + 'px';
// prototype.js setStyle shortcut
elem.setStyle({
width: widthPx,
maxWidth: widthPx,
minWidth: widthPx
});
}
I run this in a loop, iterating over every element with a particular CSS class.
According to the Firefox debugger, the outer element (the fieldset) is always being resized before the inner div. I can inspect the element, and see the style attributes being set appropriately. However, on the next iteration of the loop, when the parent is being evaluated (I can see in the javascript property inspector that the parent is indeed the fieldset), the value for width that is returned for the computed style is the previous, unmodified value, thus the inner div is resized incorrectly.
Can somebody shed some light on this please?
Edits after comments:
parent.clientWidth returns 0.
Not sure if this is relevant, but a parent div of the fieldset had display set to none shortly prior the resize operation being called. However, at the point at which the fieldset was resized, the display of the div was set to inline-block. I don't think this would make a difference, but then I'm not well educated on some of the particular behaviours of Firefox in this scenario.
I found a solution to this, although it's a little situational.
It seems that if the width of the parent element has been dynamically modified using prototype.js#Element.setStyle() (and, for all I know, other libraries that directly modify the style attribute), then the computedStyle() method won't reflect the change until all changes have completed.
The solution was to check to see if the parent element of the element being resized also had the CSS class that flagged the elements for resize, and if it did, get the size from the style attribute instead of using computedStyle(). Here's the full function, with modifications:
function resizeFullwidth() {
$$('*.fullWidth').each(function(elem, i) {
// Get gutter based on margins, borders, padding, etc
var gutter = getGutter(elem); // returns obj with x and y properties
var parent = elem.parentElement;
var parentStyles = (
parent.hasClassName('fullWidth')
? window.computedStyle(parent)
: parent.style);
var targetWidth = (parseInt(parentStyles['width']) - gutter.x;
var widthPx = targetWidth + 'px';
// prototype.js setStyle shortcut
elem.setStyle({
width: widthPx,
maxWidth: widthPx,
minWidth: widthPx
});
});
}
This now works correctly in all browsers :)
Thanks very much for your help, people :)
Have you tried var targetWidth = parent.clientWidth ?
See : MDN Element.clientWidth
I need to get the height of a textarea. Seemingly so simple but it's driving me mad.
I have been researching for ages on stackoverflow with no luck: textarea-value-height and jquery-js-get-the-scrollbar-height-of-an-textarea and javascript-how-to-get-the-height-of-text-inside-of-a-textarea, among many others.
This is how it looks currently:
This is how I want it to look, open a full height:
.
Here is my html:
<textarea id="history" class="input-xxlarge" placeholder="Enter the content ..." rows="13"></textarea>
CSS:
.input-xxlarge {
display: inline-block;
height: auto;
font-size: 12px;
width: 530px;
resize: none;
overflow: auto;
}
jQuery:
var textarea = $('#history');
I've tried (inter alia):
1. textarea.height() --> always returns 0
2. textarea.ready(function() { // wait for DOM to load
textarea.height();
}
3. getting scrollheight from textarea as an HTMLTextareaElement (i.e. DOM Element) --> returns 0
4. var contentSpan = textarea.wrapInner('<span>');
var height = contentSpan.height(); --> always returns 0
Please help, I'm at my wit's end!
Ok, I've found a solution. Whether it's the best solution, I don't know, but it works and that, frankly, is all I care about, having spent almost a day on this issue.
Here it is for anyone who faces the same problem:
Select the textarea:
var textarea = $('#history');
Get the textarea's text:
var text = textarea.text();
Create a temporary div:
var div = $('<div id="temp"></div>');
Set the temp div's width to be the same as the textarea. Very important else the text will be all on one line in the new temp div!:
div.css({
"width":"530px"
});
Insert the text into the new temp div:
div.text(text);
Append it to the DOM:
$('body').append(div);
Get the height of the div:
var divHeight = $('#temp').height();
Remove the temp div from the DOM:
div.remove();
Had a similar issue, in my case I wanted to have an expand button, that would toggle between two states (expanded/collapsed). After searching also for hours I finally came up with this solution:
Use the .prop to get the content height - works with dynamically filled textareas and then on a load command set it to your textarea.
Get the inner height:
var innerHeight = $('#MyTextarea').prop('scrollHeight');
Set it to your element
$('#MyTextarea').height(innerHeight);
Complete code with my expand button(I had min-height set on my textarea):
$(document).on("click", '.expand-textarea', function () {
$(this).toggleClass('Expanded');
if($(this).hasClass('Expanded'))
$($(this).data('target')).height(1);
else
$($(this).data('target')).height($($(this).data('target')).prop('scrollHeight'));
});
Modern answer: textarea sizing is a few lines of ES6 implementable two primary ways. It does not require (or benefit from) jQuery, nor does it require duplication of the content being sized.
As this is most often required to implement the functionality of auto-sizing, the code given below implements this feature. If your modal dialog containing the text area is not artificially constrained, but can adapt to the inner content size, this can be a perfect solution. E.g. don't specify the modal body's height and remove overflow-y directives. (Then no JS will be required to adjust the modal height at all.)
See the final section for additional details if you really, truly only actually need to fetch the height, not adapt the height of the textarea itself.
Line–Based
Pro: almost trivial. Pro: exploits existing user-agent behavior which does the heavy lifting (font metric calculations) for you. Con: impossible to animate. Con: extended to support constraints as per my codepen used to explore this problem, constraints are encoded into the HTML, not part of the CSS, as data attributes.
/* Lines must not wrap using this technique. */
textarea { overflow-x: auto; white-space: nowrap; resize: none }
for ( let elem of document.getElementsByTagName('textarea') ) {
// Prevent "jagged flashes" as lines are added.
elem.addEventListener('keydown', e => if ( e.which === 13 ) e.target.rows = e.target.rows + 1)
// React to the finalization of keyboard entry.
elem.addEventListener('keyup', e => e.target.rows = (elem.value.match(/\n/g) || "").length + 1)
}
Scrollable Region–Based
Pro: still almost trivial. Pro: animatable in CSS (i.e. using transition), though with some mild difficulty relating to collapsing back down. Pro: constraints defined in CSS through min-height and max-height. Con: unless carefully calculated, constraints may crop lines.
for ( let elem of document.getElementsByTagName('textarea') )
elem.addEventListener('keyup', e => {
e.target.style.height = 0 // SEE NOTE
e.target.style.height = e.target.scrollHeight + 'px'
})
A shocking percentage of the search results utilizing scrollHeight never consider the case of reducing size; for details, see below. Or they utilize events "in the wrong order" resulting in an apparent delay between entry and update, e.g. pressing enter… then any other key in order to update. Example.
Solution to Initial Question
The initial question specifically related to fetching the height of a textarea. The second approach to auto-sizing, there, demonstrates the solution to that specific question in relation to the actual content. scrollHeight contains the height of the element regardless of constraint, e.g. its inner content size.
Note: scrollHeight is technically the Math.max() of the element's outer height or the inner height, whichever is larger. Thus the initial assignment of zero height. Without this, the textarea would expand, but never collapse. Initial assignment of zero ensures you retrieve the actual inner content height. For sampling without alteration, remove the height override (assign '') or preserve (prior to) then restore after retrieval of scrolllHeight.
To calculate just the height of the element as-is, utilize getComputedStyle and parse the result:
parseInt(getComputedStyle(elem).height, 10)
But really, please consider just adjusting the CSS to permit the modal to expand naturally rather than involving JavaScript at all.
Place this BEFORE any HTML elements.
<script src="/path/to/jquery.js"></script>
<script>
$(document).ready(function(){
var textarea = $('#history');
alert(textarea.height()); //returns correct height
});
</script>
You obviously do not have to alert it. I was just using an easily visible example.
Given a textarea with an id of "history", this jQuery will return it's height:
$('#history').height()
Please see a working example at http://jsfiddle.net/jhfrench/JcGGR/
You can also retrieve the height in pixels by using $('#history').css('height'); if you're not planning on doing any calculations.
for current height in px:
height = window.getComputedStyle(document.querySelector('textarea')).getPropertyValue('height')
for current width in px:
width = window.getComputedStyle(document.querySelector('textarea')).getPropertyValue('width')
change 'textarea' to '#history' or like a css selector. or textarea, since a variable is declared to select element.
I need to be able to adjust a width of a class based on a width of a parent. Currently .myClass has a width assigned in CSS. Would something like this work:
.myClass {
color: #000;
width:100px;
}
$(".myClass").width($(".myClass").parent().width());
This will be applied to a <DIV> and the parent could be a <TD> or another <DIV>.
What you have should work but I would probably change it to this:
$(".myClass").css("width",$(".myClass").parent().css("width"));
You might be able to use this instead of the second $(".myClass"), but you'd have to test that.
Keep in mind that it's not changing the class itself. It's changing the width of any element that uses that class.
UPDATE:
If you are going to be doing any sort of calculations with the parent width then you should probably stick with your original method. I like css when you are applying styles "as is" but that is a personal preference. If you are doing any kind of modifications to the parent value then width is probably better.
From the width documentation:
The .width() method is recommended
when an element's width needs to be
used in a mathematical calculation.
var parentW = $('.myClass').parent().width();
$('.myClass').width(parentW);
DEMO1
$('.myClass').width( $('.myClass').parent().width() );
DEMO2
And if you have more classes 'myClass':
$('.myClass').each(function() {
var myClass = $(this);
var parentW = myClass.parent().width();
myClass.width(parentW);
});
DEMO3
AND HERE IS ONE HARD CODED: (no javascript);)
DEMO4
And if you followed this song, here is the 'refrain': (the smart solution):
$('.myClass').css({width: 'auto'});
DEMO5
While trying to compute the width of an hidden element I found that jquery.width() returns 0 for that elements' width.
I found out that using jquery.css('width') would return the correct width by using the declared style width (even if that value is different from the initial stylesheet). The problem is that the css('width') method returns a string, generally in a "100px" fashion. My question resolves into: how to retrieve the number from the "100px" string?
Is there an easy way?
If it always returns in px format, "100px", "50px" etc (i.e. not "em" or percent), you could just...
var width = parseInt($("#myelem").css("width"),10); // always use a radix
or
var width = parseInt(element.style.width,10); // always use a radix
It ignores the "px" suffix so you should be good to go.
Although deep down I'm thinking that something isn't right if $("#myelem").width() isn't working.
Note on hidden elements.
If you are adding jQuery to progressively enhance you page, the element you are calculating should be visible when the page first loads. So you should get the width before you initially hide the element. By doing this, $("#myelem").width() will work.
var myWidth = 0;
$(document).ready( function () {
myWidth = $("#myelem").width();
$("#myelem").hide();
});
In plain JavaScript:
parseInt('100px', 10)
Works with "100em", "100%", and even with: "100". No need for any Regular Expression patterns.
You could remove non-numericals with a regular expression and then just convert to a number. This works no matter how you define the width (px, em, %, pt). Preserves decimal points too.
vanilla javascript
Number(elem.style.width.replace(/[^\d\.\-]/g, ''));
jQuery
Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
Oh, I came up with:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
Now I only hope that jquery allways returns the same string fashion: "100px"
I would stick to .width() because it actually gets the computed width instead of css width. Instead of hiding it with .hide() (display: none) you could hide it with .css('visible', 'hidden') then .width() should work.
from my comment
If you don't want to change your .hide()´s then you could apply visible: hidden and thereafter .show() and then measure the height. After you have measured it, reverse that. Objects still affects the page layout when they are hidden by visible: hidden - beware of that.
To avoid tags which mess with the layout, you could set the position to absolute, move it to the body tag and then measure.