CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dranreb
Dranreb

Reputation: 313

JQUERY: Increase Textarea Height when clicked bug

I have this textarea where I want to increase it's height when clicked, I also added a DIV above it:

<div id = "postbox_container">
   <textarea id = "post_textarea" rows = "1" cols = "7" name = "text_post" placeholder = "Post..." required/></textarea>
</div>

It's CSS:

box-sizing: border-box;
width: 97%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2.7vh;
padding: 1vh;
border: 0px solid #dedede;
resize: none;

transition: all 0.5s ease;

Finally my jquery:

$(document).ready(function(){

    $('#postbox_container').on('click', function(){

      $('#post_textarea').height('20vh');


    });

  });

This works but everytime I click the textarea, it adds a new height - so it becomes longer and longer the more you click on it. My point is that I want to make the textarea's height to a fixed 20vh everytime the use clicks the DIV for the first time. Any ideas guys? Thanks.

Upvotes: 1

Views: 239

Answers (4)

Tommy Jinks
Tommy Jinks

Reputation: 757

Following the comments, if you wanted to get the textarea to revert it's size when its out of focus, you could do something like this.

I've deliberately used a slightly different approach to Web Develop Wolf (Good answer, +1) to show an alternative way of doing it.

CSS: 

#postbox_container {
  box-sizing: border-box;
  width: 97%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 2.7vh;
  padding: 1vh;
  border: 0px solid #dedede;
  resize: none;
  transition: all 0.5s ease;
}

#post_textarea.selected {
  height: 20vh;
}

JS:

$(document).ready(function() {

  $('#post_textarea').on('focus', function() {
    $('#post_textarea').addClass('selected');
  });

  $('#post_textarea').on('focusout', function() {
    $('#post_textarea').removeClass('selected');
  });

});

Fiddle: https://jsfiddle.net/q25h394m/

Upvotes: 0

Saiyam Gambhir
Saiyam Gambhir

Reputation: 536

You can bind using one function. But I have tested your code and it worked fine for me.

Here is the link

https://jsfiddle.net/Saiyam/x91ts87z/5/

$('#postbox_container').one('click', function(){
 $('#post_textarea').height('20vh');
});

This will bind only once.

Upvotes: 1

Web Develop Wolf
Web Develop Wolf

Reputation: 6326

Add a check that means this will only run the first time this is clicked:

$(document).ready(function(){
    var clicked = false;
    $('#postbox_container').on('click', function(){

        if (!clicked) { 
          $('#post_textarea').height('20vh');
          clicked = true;
        }

    });

});

When the page loaded we know the box hasn't been clicked, then when we click it it we tell the browser this has already happened and set that to true - so when we click again the browser skips over the request to change the height.

To put the height back on focus out: 

$( "#post_textarea" )
  .focusout(function() {
    $('#post_textarea').height('[set the height you want to return to]');
  })

Upvotes: 4

Viet Nguyen
Viet Nguyen

Reputation: 2373

You can add a flag that changes to 'true' when a user clicks, next time check that flag and do nothing when the flag is 'true' like so.

var firstTime = false;
$(document).ready(function(){
     $('#postbox_container').on('click', function(){
        if(!firstTime){
            firstTime = true;
            $('#post_textarea').height('20vh');
        }
     });

});

Upvotes: 0

Related Questions