Styling close and resize button for content editable div in css and adding rsize functionality by jQuery

Question

Currently I write some code for making close & dragging option for a content editable div using jQuery.

$( \'.new-div\').draggable({
  containment: \"#bord\         


        

Answer 1

If I'm right, you need something like this?

$( '.new-div').draggable({
                                    containment: "#bord",
                                     create: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    drag: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    start: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                     stop: function() { 
                                    $(".new-div").css("width",'auto');
                                     }
                                  });
         $(document).on("click",".closeButton",function(){

                                    $(this).closest('div').remove();
                                 });
                                 
         $(".new-div").on("click", function(){
                       
                    var uscontent= $(".new-div").text();
                    
                    if(uscontent.trim()==="message"){
                    $(".new-div").text('');
                     
                      } });  
                      
       $("#font-size").on("change",function(){
                     var v=$(this).val();
                      $('.new-div').css('font-size', v + 'px');
                     });
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
	$('.new-div').height($('.resizeButton').position().top + 17);
	$('.new-div').width($('.resizeButton').position().left + 17);
  $('.new-div').width($('.resizeButton').position().left + 17);
  
	$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});

  
}
})                     

.new-div { 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 0px; right: 0px; top: 15px; border:2px solid black;}
.parent-div {  
    max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:-10px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
    display:block;
    position:absolute;
    bottom:-10px;
    right:-10px;
    width:27px;
    height:27px;
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
    background-size: contain;
    cursor: resize;
}

 

 

   Font-size:
  
  

  

     

     

     message