CODEWITHSUNDEEP
javascriptjquery
TheMan
TheMan

Reputation: 87

Resize textarea with div

  1. How to resize a divs when resizing textarea within it?

  2. If I create two or more sticky and use ESC all sticky will be closed. How to set up the ESC to close only active pop-up?

  3. How to keep alive sticky when page is refreshing?

I use this code to make a pop-up sticky note: http://codepen.io/anon/pen/XXNBoz

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
    <script>

        $(document).ready(function(){
         function limitTextareaLine(e) {
                        if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { 
                            return false;
                        }
                    }
                    $(function() {
                      $('textarea.limited').keydown(limitTextareaLine);
                    });      
                    var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";    
                    $('#click').click(function () { 
                        $('#one').append('<div class="note">'+x+'</div>');
                        $( ".darkYellow" ).draggable();
                        $('.close').each(function(){
                            $('.close').click(function() {
                                $(this).parent().remove();
                            });
                        });
                    });
                    $('.darkYellow').live('click', function() {
                      $(this).addClass("index");
                    });
                    $('.darkYellow').live('blur', function() {
                      $(this).removeClass("index");
                    }); 
            $(document).keyup(function(e) {
                if (e.keyCode == 27) { 
                    window.open(location, '_self', '');
                    openedWindow.close();
                }
            });
        });

enter image description here

Upvotes: 2

Views: 1341

Answers (3)

Andrew Bone
Andrew Bone

Reputation: 7291

Change the fixed width and height to min-width and min-height like below.

And it should auto resize.

*{
  margin:auto;
  padding:0;
 }

.darkYellow {
  position:absolute;
  background-color: #76B5F0;
  min-width:200px;
  min-height:150px;
  font-size:12px;
  text-indent:1px;
  -webkit-box-shadow: 1px 1px 10px #888888;
  cursor:move
    }

.lightYellow {    
  min-width:200px;
  min-height:135px;
  background-color: #8EC0EE;
  margin-top:1px;
}

textarea {  
 background-color: #8EC0EE;     
 border: 0px;  
}

.index {
 z-index: 55;    
}

.close {
 width:7px;
 height:7px;
 padding:0;
 line-height:2pt;
 float:right;
 margin-top:6px;
 margin-right:4px;
 font-size:14px;
 cursor:pointer;
}

also use a more up to date version of JQuery, I've updated you fiddle below.

https://jsfiddle.net/link2twenty/gLrmgqgz/10/

Upvotes: 1

NinjaMagii
NinjaMagii

Reputation: 37

In CSS set the parent div's display to display: table should fix the problem and make it resize as you change the textarea's size.

EDIT: As for the escape thing (just refreshed and saw that) you could use document.activeElement or since you're using jQuery you could do $(':focus').

EDIT: take your openWindow variable and set it as openWindow = $(':focus'); and as for the 3rd item you added you would have to save the active sticky in the localstorage of the page and just update it each time you change which sticky is active. Here's some info on localstorage localstorage MDN

Upvotes: 0

Silvio Zoidberg Sdord
Silvio Zoidberg Sdord

Reputation: 115

You can capture the resize event with the resize of jQuery

$("textarea").resizable({
    resize: function() {
       //resize your div
    }
});

For the sticky notes: how do you define the variable openedWindow?

Upvotes: 0

Related Questions