How to find the height of an element that is not displayed - javascript

I'm writing a webpage that has a table with rows that slide open and closed. Initially, some rows are closed (display: none), and I want them to slide open. Setting the height and using overflow: hidden doesn't work on table rows, so I'm changing the height of a div inside the table.
This works. The only problem is that I need to know the height of the div before I slide it open, which seems to be impossible. One solution I can think of is to load the page with the rows show, then iterate through them, storing their heights and hiding them. I don't like this solution because the page would jump around when loading.
Here's a simple, runnable example of my problem.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td {border: 1px solid black;}
#lower_row {display: none;}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
lowerRow = document.getElementById("lower_row");
lowerDiv = document.getElementById("lower_div");
if (getStyle(lowerRow, "display") == "none") {
lowerRow.style.display = "table-row";
}
else {
lowerRow.style.display = "none";
}
showHeight();
}
function showHeight() {
lowerDiv = document.getElementById("lower_div");
document.getElementById("info").innerHTML = getStyle(lowerDiv, "height");
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
if (elem.style[name]) {
return elem.style[name];
}
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}
else {
return null;
}
}
</script>
</head>
<body onload="showHeight()">
<p>The height the lower row is currently <span id="info"></span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>Peekaboo!</p></div></td></tr>
</table>
</body>
</html>
Edit 1:
One proposed solution is to move the div off the page. I can't get that to work, and I think it would have the wrong height because its height depends on the width of the table.
I'm working on the solution of using visibility:hidden, but it has problems. It still takes up a small amount of space, and the reported height is wrong. Here's an example of that solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {width: 250px;}
table, td {border: 1px solid black;}
#lower_row {position: absolute; visibility: hidden}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
lowerRow = document.getElementById("lower_row");
lowerDiv = document.getElementById("lower_div");
if (getStyle(lowerRow, "visibility") == "hidden") {
lowerRow.style.visibility = "visible";
lowerRow.style.position = "static";
}
else {
lowerRow.style.visibility = "hidden";
lowerRow.style.position = "absolute";
}
showHeight();
}
function showHeight() {
lowerDiv = document.getElementById("lower_div");
document.getElementById("info").innerHTML = getStyle(lowerDiv, "height");
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
if (elem.style[name]) {
return elem.style[name];
}
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}
else {
return null;
}
}
</script>
</head>
<body onload="showHeight()">
<p>The height the lower row is currently <span id="info"></span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>This is some long text. This is some long text. This is some long text. This is some long text.</p></div></td></tr>
</table>
</body>
</html>
Edit 2: The Solution
Paul's answer is the solution to my question: how to find the height of an element that is not displayed. However, it wouldn't work for my problem. On my site, the height of the div depends on its width, which depends on the td's width, which depends on the state of the other rows and the width of table, which depends on the width of the page. This means that, even if I pre-compute the height, the value would be wrong as soon as someone expands another row or changes the window size. Also, copying the table and keeping all of these constraints would be near-impossible.
However, I have found a solution. When the user clicks to expand a row, my site would do the following steps in order:
Set the div.style.height to 1px.
Set the row.style.display to table-row.
Store the value of div.scrollHeight.
Run the scroll animation, stopping at div.scrollHeight.
After the animation, set div.style.height to auto.
div.scrollHeight gives the height of the div's contents, including its overflow. It doesn't work when the div is not displayed, but that's not a problem for my application. Here's a sample of the code in action. (Again, I don't include the code for the scroll animation because it would be too long.)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td {border: 1px solid black;}
#lower_row {display: none;}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
var lowerRow = document.getElementById("lower_row");
var lowerDiv = document.getElementById("lower_div");
if (getStyle(lowerRow, "display") == "none") {
lowerDiv.style.height = "0px";
lowerRow.style.display = "table-row";
showHeight();
lowerDiv.style.height = "auto";
}
else {
lowerDiv.style.height = "0px";
showHeight();
lowerRow.style.display = "none";
}
}
function showHeight() {
var lowerDiv = document.getElementById("lower_div");
document.getElementById("info").innerHTML = lowerDiv.scrollHeight;
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
if (elem.style[name]) {
return elem.style[name];
}
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}
else {
return null;
}
}
</script>
</head>
<body>
<p>The height the lower row is currently <span id="info">...</span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
</p></div></td></tr>
</table>
</body>
</html>

You can copy the div with the content and put it to the body with absolute positioning top:-10000; left:-10000; so it will be outside of visible area, then you can calculate the height and remove clone from the DOM.
UPDATE
Alternatively, in case when you add elements in dynamic way, you can set it to display:block, position:absolute, and visibility:hidden - but you have to make sure that it will not change position of any element on the page. visibility:hidden - will not show the element, but calculate it's dimensions (in contrast to display: none )
UPDATE
In your particular case, your parent have an influence on child's dimensions, so you need to clone your element into "similar" parent which is outside of visible area. By saying "similar" I mean it should have the same dimensions, but in general - styles and everything what is related to it's size:
var wrapper = $('<div></div>').appendTo('body').css('display', 'block').css('position', 'absolute').css('top', -10000).css('left', -10000).css('width', $('table').css('width'));
var clone = $('#lower_div').clone().appendTo(wrapper);
document.getElementById("info").innerHTML = clone.height();
Here is working jsfiddle for you.

You can do this by showing the element, capturing the height, and then re-hiding the element all before the browser repaints the screen. So, the user will never notice anything happening. I do this for a packaged used to slide open & closed elements with dynamic heights:
https://github.com/alexmacarthur/slide-element/blob/master/src/index.ts
In super simple code:
<div id="element" style="display: none;">hello</div>
<script>
const element = document.getElementById('element');
element.style.display = "";
const elementHeight = element.clientHeight;
element.style.display = "none";
console.log(elementHeight); // whatever the rendered height is.
</script>

Related

How to show picture depending on the value of a textbox

i downloaded a java billiard game. I want to modify it.
Note: the sum of the score is store in score_text_total
So when the player shoots the Ball with sum of less than 10, a picture, for example, of a DOG will show
If sum of ball shoots is more than 10 but less 20, picture of CAT (replaces/hides the DOG picture)
If sum of ball shoots is more than 30, a picture of trophy appears (replaces/hides the CAT picture)
<!doctype html>
<html lang="en">
<head>
</style>
</head>
<body>
<img src="assets/images/DOG.gif" style="display: none; background: #000;" id="DOG"/>
<img src="assets/images/CAT.gif" style="display: none; background: #ff0000;" id="CAT"/>
<script type="text/javascript">
var DOG = document.getElementById('DOG');
var CAT = document.getElementById('CAT');
function picture() {
if(curent_score < 10) {
DOG.style.display = 'block';
CAT.style.display = 'none';
}
else {
DOG.style.display = 'none';
CAT.style.display = 'block';
}
}
</script>
</body>
</html>
I'm assuming you mean JavaScript and not Java. I'm also assuming you are using vanilla JS.
You could make a div and then set its background image. This would allow you to style the div/absolutely position it where you want, and then change the picture as a single CSS property.
You could try something like (untested):
var score = document.getElementbyId('scoreboard');
score.style.background = "none";
There are similar solutions around on Stack Overflow as well that inspired this suggestion:
Set CSS property in Javascript?

#media for Javascript text animation 2

I have a Javascript text animation on my homepage and would like to insert an #media command using internal CSS to the homepage scripted text 'we do content'. I am trying to make this so when viewed on an iphone screen size the text changes to be displayed on three separate lines, rather than one. ie:
We
Do
Content
I'm at a bit of a loss what to values/ elements to call out for the #media command. I think maybe /br may be one of the three things needed but otherwise a bit stumped! It's worth noting this is a wordpress theme and "bk_big_text" is a theme specific text id. Any help greatly appreciated!
<head>
<style type="text/css">
#media only screen and (max-width: 480px) {
.changer (not sure if this is right?) {
what goes here?: /br !important;
}
}
</style>
</head>
<p style="text-align: left;">[bk_big_text size="120" ]
<script type="text/javascript">// <![CDATA[
var words = ["content","brand", "identity", "digital", "fresh","integrated", "interactive", "creative", "powerful","witty", "editorial"];
var i = 0;
var text = "We do content";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/content/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 2200);
// ]]></script>
<span id="changer" style="color: #ffffff;">We do content</span>[/bk_big_text]

how can I display the text in an ordered list using javascript

Could someone please check my code? Thank you
Here is the fiddle site if you want to test:
http://jsfiddle.net/66QYr/
I would like to have the first 3 text to appear on the left (vertically)
and then the next 3 text appear on the right (vertically)
then the next 2 text appear on the lower right bottom (vertically)
and the last 2 text appear on the lower left bottom (vertically)
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic001.png
<html>
<head>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tintin{
position: relative;
top: 211px;
left: 12px;
font-size:14pt;
font-weight:bold;
font-family: Calibri;
color:red;
filter:alpha(opacity=0);
opacity:0;}
.image{
height:350px;
width: 855px;}
</style>
<script type="text/javascript">
var txt=['text1','text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'], init=0,i=0,k=0,speed=20,el;
var loopCount=1000;
var j=0;
//var padd = 20; //set this to an approriate increment
function fade(){
init==0?i++:i--;
el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
el.firstChild.nodeValue=txt[k];
if(i==100)init=1;
if(i==0) {init=0;k++;j++;
el.style.paddingLeft=20*k;
}
if(k==txt.length)k=0;
if (j<loopCount) setTimeout('fade()',speed);
}
window.onload=function(){
el=document.getElementById('tintin');
fade();
}
</script>
</head>
<body>
<div id="tintin"> </div>
<div class="image" style="background-image:url('pic007s.jpg')">;
</div>
</body>
</html>
There are two problems you're trying to solve here:
Positioning the text in the appropriate places
Getting them to fade in
Step One
The first problem can be solved with some simple CSS. Start out with a container:
#container {
position:relative;
width:150px;
height:150px;
}
<div id="container"></div>
The width and height can be anything, but you do have to tell it something. We're going to be putting our text in this container, but then use position:absolute. This will take them out of the normal document flow, and collapse the container if we have told it an explicit height.
The next step is the text. You're going to want four divs, with the text inside as paragraphs:
<div class="text" id="text1">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
</div>
Do this for each of the four blocks of text that you want to have. Use the same class name on each one, but give each their own, unique ID (text2, text3, etc.).
Finally, just use (as I said earlier) absolute positioning to place them where you'd like:
.text { position:absolute; }
#text1 { top:0; left:0; }
#text2 { top:0; right:0; }
...and so on. When you're done, you should have something that looks like this:
Step Two
Fading elements in requires animation. You kind of have a basic animation function, but I suggest you read Robert Penner's article on tweening and animation. It was written for ActionScript, but the exact same principles apply.
For now, here's a good general-purpose JavaScript method that will take an element and fade it in:
function fadeIn(totalTime, elem, after) {
var cos = Math.cos,
PI = Math.PI,
startTime = +new Date(),
endTime = startTime + totalTime,
timer;
elem.style.opacity = 0;
elem.style.filter = 'alpha(opacity=0)';
timer = setInterval(function () {
var currentTime = +new Date();
currentTime = currentTime > endTime ? 1 : (currentTime - startTime) / totalTime;
var distance = (1 - cos(currentTime * PI)) / 2;
elem.style.opacity = distance;
elem.style.filter = 'alpha(opacity=' + distance * 100 + ')';
if (currentTime === 1) {
clearInterval(timer);
if (after) {
after();
}
}
}, 40);
}
You tell this function how long you want the animation to last (in milliseconds), and you can also give it a function to execute when the fading is done (if you want; it's not necessary).
If I understood your question correctly, you want all the texts to start invisible, and then fade in, one at a time, clockwise from the top. We can make them invisible with CSS, but then if the user has JS disabled, the page will appear blank. So you need to first "get" all of the elements (either with some kind of getByClass function or with four different calls to getElementById) and set their opacity to 0.
So you can make the first group of texts fade in by doing the following:
var text1 = document.getElementById('text1');
fadeIn(1000, text1);
The problem is, by doing this, there's no way to tell when to start the next animation. So we need to make a function, with the help of closures, to help keep track of things (this assumes that you've already gotten the elements in JS and made them invisible):
var tracker = (function () {
var texts = [text1, text2, text3, text4],
i = 0;
return function () {
var text = texts[i];
if (text) {
fadeIn(1000, text, tracker);
i += 1;
}
};
}());
This function cycles through each element and fades it in when the previous one is done. (It's okay if the code doesn't make a lot of sense; closures are tricky things.)
Here is the final result, in JSFiddle. Good luck.

Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html

How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address.
Now I think it would look much nicer, if the textarea I'm using for the main address details would just take up the area of the text in it, and automatically resize if the text was changed.
Here's a screenshot of it currently.
Any ideas?
#Chris
A good point, but there are reasons I want it to resize. I want the area it takes up to be the area of the information contained in it. As you can see in the screen shot, if I have a fixed textarea, it takes up a fair wack of vertical space.
I can reduce the font, but I need address to be large and readable. Now I can reduce the size of the text area, but then I have problems with people who have an address line that takes 3 or 4 (one takes 5) lines. Needing to have the user use a scrollbar is a major no-no.
I guess I should be a bit more specific. I'm after vertical resizing, and the width doesn't matter as much. The only problem that happens with that, is the ISO number (the large "1") gets pushed under the address when the window width is too small (as you can see on the screenshot).
It's not about having a gimick; it's about having a text field the user can edit that won't take up unnecessary space, but will show all the text in it.
Though if someone comes up with another way to approach the problem I'm open to that too.
I've modified the code a little because it was acting a little odd. I changed it to activate on keyup, because it wouldn't take into consideration the character that was just typed.
resizeIt = function() {
var str = $('iso_address').value;
var cols = $('iso_address').cols;
var linecount = 0;
$A(str.split("\n")).each(function(l) {
linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
})
$('iso_address').rows = linecount;
};
Facebook does it, when you write on people's walls, but only resizes vertically.
Horizontal resize strikes me as being a mess, due to word-wrap, long lines, and so on, but vertical resize seems to be pretty safe and nice.
None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused. I'd use this as anecdotal evidence to say 'go ahead, implement it'.
Some JavaScript code to do it, using Prototype (because that's what I'm familiar with):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script language="javascript">
google.load('prototype', '1.6.0.2');
</script>
</head>
<body>
<textarea id="text-area" rows="1" cols="50"></textarea>
<script type="text/javascript" language="javascript">
resizeIt = function() {
var str = $('text-area').value;
var cols = $('text-area').cols;
var linecount = 0;
$A(str.split("\n")).each( function(l) {
linecount += Math.ceil( l.length / cols ); // Take into account long lines
})
$('text-area').rows = linecount + 1;
};
// You could attach to keyUp, etc. if keydown doesn't work
Event.observe('text-area', 'keydown', resizeIt );
resizeIt(); //Initial on load
</script>
</body>
</html>
PS: Obviously this JavaScript code is very naive and not well tested, and you probably don't want to use it on textboxes with novels in them, but you get the general idea.
One refinement to some of these answers is to let CSS do more of the work.
The basic route seems to be:
Create a container element to hold the textarea and a hidden div
Using Javascript, keep the textarea’s contents synced with the div’s
Let the browser do the work of calculating the height of that div
Because the browser handles rendering / sizing the hidden div, we avoid
explicitly setting the textarea’s height.
document.addEventListener('DOMContentLoaded', () => {
textArea.addEventListener('change', autosize, false)
textArea.addEventListener('keydown', autosize, false)
textArea.addEventListener('keyup', autosize, false)
autosize()
}, false)
function autosize() {
// Copy textarea contents to div browser will calculate correct height
// of copy, which will make overall container taller, which will make
// textarea taller.
textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}
html, body, textarea {
font-family: sans-serif;
font-size: 14px;
}
.textarea-container {
position: relative;
}
.textarea-container > div, .textarea-container > textarea {
word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
box-sizing: border-box;
padding: 2px;
width: 100%;
}
.textarea-container > textarea {
overflow: hidden;
position: absolute;
height: 100%;
}
.textarea-container > div {
padding-bottom: 1.5em; /* A bit more than one additional line of text. */
visibility: hidden;
}
<div class="textarea-container">
<textarea id="textArea"></textarea>
<div id="textCopy"></div>
</div>
Here's another technique for autosizing a textarea.
Uses pixel height instead of line height: more accurate handling of line wrap if a proportional font is used.
Accepts either ID or element as input
Accepts an optional maximum height parameter - useful if you'd rather not let the text area grow beyond a certain size (keep it all on-screen, avoid breaking layout, etc.)
Tested on Firefox 3 and Internet Explorer 6
Code:
(plain vanilla JavaScript)
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if (!text)
return;
/* Accounts for rows being deleted, pixel value may need adjusting */
if (text.clientHeight == text.scrollHeight) {
text.style.height = "30px";
}
var adjustedHeight = text.clientHeight;
if (!maxHeight || maxHeight > adjustedHeight)
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if (maxHeight)
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if (adjustedHeight > text.clientHeight)
text.style.height = adjustedHeight + "px";
}
}
Demo:
(uses jQuery, targets on the textarea I'm typing into right now - if you have Firebug installed, paste both samples into the console and test on this page)
$("#post-text").keyup(function()
{
FitToContent(this, document.documentElement.clientHeight)
});
Probably the shortest solution:
jQuery(document).ready(function(){
jQuery("#textArea").on("keydown keyup", function(){
this.style.height = "1px";
this.style.height = (this.scrollHeight) + "px";
});
});
This way you don't need any hidden divs or anything like that.
Note: you might have to play with this.style.height = (this.scrollHeight) + "px"; depending on how you style the textarea (line-height, padding and that kind of stuff).
Here's a Prototype version of resizing a text area that is not dependent on the number of columns in the textarea. This is a superior technique because it allows you to control the text area via CSS as well as have variable width textarea. Additionally, this version displays the number of characters remaining. While not requested, it's a pretty useful feature and is easily removed if unwanted.
//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {};
Widget.Textarea = Class.create({
initialize: function(textarea, options)
{
this.textarea = $(textarea);
this.options = $H({
'min_height' : 30,
'max_length' : 400
}).update(options);
this.textarea.observe('keyup', this.refresh.bind(this));
this._shadow = new Element('div').setStyle({
lineHeight : this.textarea.getStyle('lineHeight'),
fontSize : this.textarea.getStyle('fontSize'),
fontFamily : this.textarea.getStyle('fontFamily'),
position : 'absolute',
top: '-10000px',
left: '-10000px',
width: this.textarea.getWidth() + 'px'
});
this.textarea.insert({ after: this._shadow });
this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
this.textarea.insert({after: this._remainingCharacters});
this.refresh();
},
refresh: function()
{
this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
this.textarea.setStyle({
height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
});
var remaining = this.options.get('max_length') - $F(this.textarea).length;
this._remainingCharacters.update(Math.abs(remaining) + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
}
});
Create the widget by calling new Widget.Textarea('element_id'). The default options can be overridden by passing them as an object, e.g. new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). If you want to create it for all textareas on the page, do something like:
Event.observe(window, 'load', function() {
$$('textarea').each(function(textarea) {
new Widget.Textarea(textarea);
});
});
Here is a solution with JQuery:
$(document).ready(function() {
var $abc = $("#abc");
$abc.css("height", $abc.attr("scrollHeight"));
})
abc is a teaxtarea.
Check the below link:
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
$(document).ready(function () {
$('.ExpandableTextCSS').autoResize({
// On resize:
onResize: function () {
$(this).css({ opacity: 0.8 });
},
// After resize:
animateCallback: function () {
$(this).css({ opacity: 1 });
},
// Quite slow animation:
animateDuration: 300,
// More extra space:
extraSpace:20,
//Textarea height limit
limit:10
});
});
Just revisiting this, I've made it a little bit tidier (though someone who is full bottle on Prototype/JavaScript could suggest improvements?).
var TextAreaResize = Class.create();
TextAreaResize.prototype = {
initialize: function(element, options) {
element = $(element);
this.element = element;
this.options = Object.extend(
{},
options || {});
Event.observe(this.element, 'keyup',
this.onKeyUp.bindAsEventListener(this));
this.onKeyUp();
},
onKeyUp: function() {
// We need this variable because "this" changes in the scope of the
// function below.
var cols = this.element.cols;
var linecount = 0;
$A(this.element.value.split("\n")).each(function(l) {
// We take long lines into account via the cols divide.
linecount += 1 + Math.floor(l.length / cols);
})
this.element.rows = linecount;
}
}
Just it call with:
new TextAreaResize('textarea_id_name_here');
I've made something quite easy. First I put the TextArea into a DIV. Second, I've called on the ready function to this script.
<div id="divTable">
<textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>
$(document).ready(function () {
var heightTextArea = $('#txt').height();
var divTable = document.getElementById('divTable');
$('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});
Simple. It is the maximum height of the div once it is rendered, divided by the height of one TextArea of one row.
I needed this function for myself, but none of the ones from here worked as I needed them.
So I used Orion's code and changed it.
I added in a minimum height, so that on the destruct it does not get too small.
function resizeIt( id, maxHeight, minHeight ) {
var text = id && id.style ? id : document.getElementById(id);
var str = text.value;
var cols = text.cols;
var linecount = 0;
var arStr = str.split( "\n" );
$(arStr).each(function(s) {
linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
});
linecount++;
linecount = Math.max(minHeight, linecount);
linecount = Math.min(maxHeight, linecount);
text.rows = linecount;
};
Like the answer of #memical.
However I found some improvements. You can use the jQuery height() function. But be aware of padding-top and padding-bottom pixels. Otherwise your textarea will grow too fast.
$(document).ready(function() {
$textarea = $("#my-textarea");
// There is some diff between scrollheight and height:
// padding-top and padding-bottom
var diff = $textarea.prop("scrollHeight") - $textarea.height();
$textarea.live("keyup", function() {
var height = $textarea.prop("scrollHeight") - diff;
$textarea.height(height);
});
});
My solution not using jQuery (because sometimes they don't have to be the same thing) is below. Though it was only tested in Internet Explorer 7, so the community can point out all the reasons this is wrong:
textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }
So far I really like how it's working, and I don't care about other browsers, so I'll probably apply it to all my textareas:
// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');
for (i = 0; i<textareas.length; i++)
{
// Retain textarea's starting height as its minimum height
textareas[i].minHeight = textareas[i].offsetHeight;
textareas[i].onkeyup = function () {
this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
}
textareas[i].onkeyup(); // Trigger once to set initial height
}
Here is an extension to the Prototype widget that Jeremy posted on June 4th:
It stops the user from entering more characters if you're using limits in textareas. It checks if there are characters left. If the user copies text into the textarea, the text is cut off at the max. length:
/**
* Prototype Widget: Textarea
* Automatically resizes a textarea and displays the number of remaining chars
*
* From: http://stackoverflow.com/questions/7477/autosizing-textarea
* Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
*/
if (window.Widget == undefined) window.Widget = {};
Widget.Textarea = Class.create({
initialize: function(textarea, options){
this.textarea = $(textarea);
this.options = $H({
'min_height' : 30,
'max_length' : 400
}).update(options);
this.textarea.observe('keyup', this.refresh.bind(this));
this._shadow = new Element('div').setStyle({
lineHeight : this.textarea.getStyle('lineHeight'),
fontSize : this.textarea.getStyle('fontSize'),
fontFamily : this.textarea.getStyle('fontFamily'),
position : 'absolute',
top: '-10000px',
left: '-10000px',
width: this.textarea.getWidth() + 'px'
});
this.textarea.insert({ after: this._shadow });
this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
this.textarea.insert({after: this._remainingCharacters});
this.refresh();
},
refresh: function(){
this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
this.textarea.setStyle({
height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
});
// Keep the text/character count inside the limits:
if($F(this.textarea).length > this.options.get('max_length')){
text = $F(this.textarea).substring(0, this.options.get('max_length'));
this.textarea.value = text;
return false;
}
var remaining = this.options.get('max_length') - $F(this.textarea).length;
this._remainingCharacters.update(Math.abs(remaining) + ' characters remaining'));
}
});
#memical had an awesome solution for setting the height of the textarea on pageload with jQuery, but for my application I wanted to be able to increase the height of the textarea as the user added more content. I built off memical's solution with the following:
$(document).ready(function() {
var $textarea = $("p.body textarea");
$textarea.css("height", ($textarea.attr("scrollHeight") + 20));
$textarea.keyup(function(){
var current_height = $textarea.css("height").replace("px", "")*1;
if (current_height + 5 <= $textarea.attr("scrollHeight")) {
$textarea.css("height", ($textarea.attr("scrollHeight") + 20));
}
});
});
It's not very smooth but it's also not a client-facing application, so smoothness doesn't really matter. (Had this been client-facing, I probably would have just used an auto-resize jQuery plugin.)
For those that are coding for IE and encounter this problem. IE has a little trick that makes it 100% CSS.
<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>
You can even provide a value for rows="n" which IE will ignore, but other browsers will use. I really hate coding that implements IE hacks, but this one is very helpful. It is possible that it only works in Quirks mode.
Internet Explorer, Safari, Chrome and Opera users need to remember to explicidly set the line-height value in CSS. I do a stylesheet that sets the initial properites for all text boxes as follows.
<style>
TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>
Here is a function I just wrote in jQuery to do it - you can port it to Prototype, but they don't support the "liveness" of jQuery so elements added by Ajax requests will not respond.
This version not only expands, but it also contracts when delete or backspace is pressed.
This version relies on jQuery 1.4.2.
Enjoy ;)
http://pastebin.com/SUKeBtnx
Usage:
$("#sometextarea").textareacontrol();
or (any jQuery selector for example)
$("textarea").textareacontrol();
It was tested on Internet Explorer 7/Internet Explorer 8, Firefox 3.5, and Chrome. All works fine.
Using ASP.NET, just simply do this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Automatic Resize TextBox</title>
<script type="text/javascript">
function setHeight(txtarea) {
txtarea.style.height = txtdesc.scrollHeight + "px";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine" onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
</form>
</body>
</html>

Categories