Shrinking a Table in JavaScript

Question

Never used JavaScript Before and I'm trying to fix this form in share point. I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):

  alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
    document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
    document.getElementById(DescriptionID).rows= "1";
});

EDIT: Here is what the current code will display:

EDIT2: Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???

AND ANOTHER EDIT: So here is the error i'm getting after using Johhny's code:

Java and JavaScript are not the same languages. I'll edit your question to reflect this. The two are confused quite often, so I want to do my part in spreading the awareness. — Wes Foster, Jun 14 '16 at 17:05
You might want to include the error message if you expect anyone to be able to help. Because most likely the variable DescriptionId isn't set properly... — Nick Sharp, Jun 14 '16 at 17:09
Well I don't get an error message. It's currently setup to pop a message, which I will post a screen shot of here in a sec. bare with me here I've no idea what I'm doing just yet. — MattCucco, Jun 14 '16 at 17:13
That error message is not actually an error message. It is actually caused by the code you have. The `alert(DescriptionID);`. It is just there to show what is in the `DescriptionID` variable, which is `ctl100_PlaceHolderMain.... etc etc.`. Try deleting that line and see if it works. If not, you have the wrong id. — Cave Johnson, Jun 14 '16 at 17:24
Look at the comment @Alex Kudryashev entered. It is the best solution you could ever have. — Demeter Dimitri, Jun 14 '16 at 18:40

User 1058612 · Accepted Answer · 2016-06-14T18:32:59.400

2

If you are using jQuery, this might work for you:

HTML:

<textarea id="expandingTextarea" rows="1">Enter Text</textarea>

JavaScript:

$(document).ready(function() {
  $('#expandingTextarea').on('mouseover', function() {
    $(this).attr('rows', '10');
  });

  $('#expandingTextarea').on('mouseout', function() {
    $(this).attr('rows', '1');
  });
});

I created an example here.

Update:

Using a click event to change/toggle to row count:

$(document).ready(function() {
  $('#expandingTextarea').on('click', toggleExpand);

  function toggleExpand() {
    var oldRowCount = $(this).attr('rows');
    var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1; 
    $(this).attr('rows', newRowCount);
  }
});

Demo here.

edited Jun 14 '16 at 18:32

answered Jun 14 '16 at 17:26

User 1058612

3,739
1
27
33

This is exactly what i want to happen! Now I just have to figure out how to put into my code.... – MattCucco Jun 14 '16 at 17:27
Hope it works, you can also see another Stack question along the same lines here: http://stackoverflow.com/q/4417161/1058612. – User 1058612 Jun 14 '16 at 17:29
I think I may want it to open on a click function so that if the user is typing and bumps the mouse out of the box, it doesn't close on them. Would it be possible to just change the function to mousedown or something along those lines that way if the user clicks on the box, it opens, and if they click again, it will shrink? Sorry to be difficult! Newbie here! – MattCucco Jun 14 '16 at 17:34
I updated the answer with a description of how to expand the textarea with a click. If this answer helped you, please mark it as answered. – User 1058612 Jun 14 '16 at 18:34

Alex Kudryashev · Answer 2 · 2016-06-14T21:31:01.173

1

In fact, you don't need JS to achieve what you want. CSS can do it for you.

<!--html-->
<textarea class="descr">This is description</textarea>

/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}

edited Jun 14 '16 at 21:31

answered Jun 14 '16 at 17:24

Alex Kudryashev

9,120
3
27
36

I'm not sure how I would implement? Can you possibly give me a dumbed down version? – MattCucco Jun 14 '16 at 19:26
But the OP asked for the textarea to expand when clicked on. This only works when you mouse over the textarea. – Cave Johnson Jun 14 '16 at 21:28
Initially it was `mouseover`. Ok `.descr:focus` instead of `:hover` – Alex Kudryashev Jun 14 '16 at 21:30

score 0 · Answer 3 · answered Jun 14 '16 at 17:12

0

alter the height instead of the "rows" property.

open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.

try playing around with the css of that element. then, write your javascript to change just the property that you want.

https://developer.chrome.com/devtools

answered Jun 14 '16 at 17:12

Jill

539
1
5
12

This is a really dumb question but do you know of anyway to do this in g' old internet explorer. On my company pc so I can't download another web browser. I have firefox too but it wont let me load this stuff. – MattCucco Jun 14 '16 at 17:18
tried to change what I have and it didn't make any difference – MattCucco Jun 14 '16 at 17:23

score 0 · Answer 4 · answered Jun 14 '16 at 17:24

The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code. Also, you might consider altering the height, not the rows. If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.

Shrinking a Table in JavaScript

4 Answers4