Felix Felix - 1 month ago 9
CSS Question

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

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

$( '.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();
});


Please see this jsfiddle https://jsfiddle.net/felixtm/dwk6fs5w/ . This is working .

But when i write the code for remove text on the div by click function then that close button disappear. please help to solve this .I have some more doubts
1) how can i set width of that div according to the txt in that div .

please see this js fiidle https://jsfiddle.net/felixtm/dwk6fs5w/5/

Then I write the code for resize the content in that div using jquey. This code also working. but what I need is I need to make the font resize button near to the div as below picture.
Please see the below picture.

enter image description here

In the picture user can resize the font size by increasing the div width by scaling the div using that button placed on bottom right corner. Please help to achieve this.

So here I have two requirements:


  1. Styling the close and resize button as er the picture

  2. Add resize functionality for that div using the new resize button.



Thank you.

Answer

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="container">
 <div class="row">
 <div class="col-sm-12">
   Font-size:<input type="range" min="12" max="120" id="font-size" />
  </div>
  <br>
  <div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true">
     message
     <a class="closeButton"></a>
     <a class="resizeButton"></a>
     </div>
        <div class="bord" style="z-index: -1;">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
            
        </div>
        
     </div>
 </div>
   </div>
 </div>