Question

I have a text box which is draggable anywhere in the div (see the picture bellow).

The problem is that I want it to alert me when the text is close to the border. For example, the user starts typing and the text hits the right border and so the alert should pop up saying that user has to drag the box in order to continue typing. Is there a function or a way to do that?

Answer 1

if text box width is not fixed then you can check its width on keyUp:

$('#textBox').keyup(function() {
  var $dragBox = $('#dragBox');
  var $textBox = $('#textBox');
  var dragBoxRightSide = $dragBox.width() + $dragBox.offset().left;
  var textBoxRightSide = $textBox.width() + $textBox.offset().left;

  if ( dragBoxRightSide < textBoxRightSide ) {
    alert('WTF?');
  }
});