Felix Felix - 1 month ago 13
CSS Question

Misbehaviour of other elemnt after using jquery rotation

i write some code for text rotate , resize and text drag . Everything is working fine on the starting . Please see this code



$( '.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= $(this).text();
if(uscontent.trim()==="Add Your Text"){
$('.mc').text('');
$(this).css("width","100px");
$(this).css("height","6%");
}
});

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


}
});

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$(document).mousemove(function(e){

if (!rotating) return;
rotation = startX - e.clientX;
$('.new-div').rotate(rotation);
});

$(document).on("mouseup", function(){
rotating = false;
});

$('.rotateButton').on("mousedown", function(e) {
e.stopImmediatePropagation();
rotating = true;
startX = e.clientX;
});

.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 55px;
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;
}
.rotateButton
{
display:block;
position:absolute;
top:-10px;
left:82px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="mc" data-scale-reference="new-div">
Add Your Text
</span>
<a class="closeButton"></a>
<a class="rotateButton"></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>





https://jsfiddle.net/felixtm/jaboLc3u/20/

But after text rotate this problems are arrived


  1. Rotate icon and close icon is missing when we rotate the text and edit it .

  2. Some time text is going outside the border box

  3. After rotate and edit text then div resize is not working

  4. Resize button, close button is going far from the border box

  5. Some time webpage is alerting unresponsive script is running
    Please Help to solve these issues .


Answer

Rotate icon and close icon is missing when we rotate the text and edit it. This is because they are positioned relative to rotated content. The easiest fix is to embed the rotated content in a container and position your icons outside of the rotated content.

Some time text is going outside the border box. The size of your font is not related to the height of the container. Additionally, you cannot know the resulting height of your text without changing the font size. I would recommend dynamically filling the font size based on the container instead of assuming the height of the container is related to the desired font size.

After rotate and edit text then div resize is not working This could be caused by the previously mentioned issue of the browser not properly understanding where to position child elements of rotated content.

Resize button, close button is going far from the border box Possibly related to the first issue

Some time webpage is alerting unresponsive script is running You should either store jQuery results in a variable or chain your queries to avoid having to reexecute the selector.

The following may work for you. I haven't fully tested any of this, but preliminary tests work well enough in firefox. If you wish to have multiple containers, you'll need to modify the code a bit, as it is assuming there is only one element with the given 'new-div' class attached.

https://jsfiddle.net/ye53kcre/

    $('.container').draggable({
      containment: "#bord"
    });

    $(document).on("click", ".closeButton", function() {
      $(this).closest('div').remove();
    });

    $(document).on("click", ".new-div", function() {
      $(this).focus();
    });

    $('.resizeButton').draggable({
      containment: '#bord',
      drag: function() {
        var pos = $(this).position();
        $(this).closest('.container')
          .height(pos.top + 17)
          .width(pos.left + 17);

        $('.new-div').resizeFontToFillParent();
      }
    });

    var rotation = 0;
    var rotating = false;
    var startX = 0;

    $.fn.resizeFontToFillParent = function() {
      return this.each(function() {
        var containerHeight = $(this).parent().height();
        var $el = $(this).css('font-size', '');
        var fontSize = parseInt($el.css('font-size')) || 12;
        while ($el.height() < containerHeight) {
          $el.css('font-size', fontSize++);
        }
      });
    };

    $(document).mousemove(function(e) {
      if (rotating) {
        rotation = startX - e.clientX;
        $('.new-div').css({
          'transform': 'rotate(' + rotation + 'deg)'
        });
      }
    });

    $(document).on("mouseup", function() {
      rotating = false;
    });

    $('.rotateButton').on("mousedown", function(e) {
      e.stopImmediatePropagation();
      e.preventDefault();

      rotating = true;
      startX = e.clientX;
    });
.new-div {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  text-align: center;
}

.container {
  z-index: 1;
  position: absolute;
  display: inline-block;
  left: 30%;
  top: 55px;
  width: 100px;
  height: 30px;
  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;
}

.rotateButton {
  display: block;
  position: absolute;
  top: -10px;
  left: 82px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="col-sm-12">
  <div class="parent-div">
    <div class="container">
      <div class="new-div" contenteditable="true" tabindex="0">
        Add Your Text
        <a class="rotateButton"></a>
      </div>
      <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>