CODEWITHSUNDEEP
javascriptjquerycssinternet-explorerresize
Sir Hally
Sir Hally

Reputation: 2358

Resizable block for internet explorer. Problem with MouseMove event

I want to make a resizable block (<div>). It must resize when user grab the top left corner of the block. It is something like http://jqueryui.com/demos/resizable/ but for top left corner, not for bottom right.

HTML code: <div class="chatBlockBody"> <img src="resizeMarker.png" class="topMarker" alt="" /> content of block </div>

CSS code:

 .chatBlockBody
 {
    width:240px;
    height:250px;
    border:1px solid #4a73ce;
    position:absolute;
    bottom:25px;
    right:0;
    display:block;
    background-color:White;
  }  
  .topMarker
  {
     position:absolute;
     top:3px;
     left:3px;
  }

The js-code is following:

var dragObject;
$(".topMarker").mousedown(function(e){
   dragObject  = this;
   $(dragObject).parent().css("z-index",42);
   return false;
});

$(document).mouseup(function() {
   dragObject = null;
});

$(document).mousemove(function(event){
   if(dragObject!=null){
       var hg=Math.max($(document).height()-event.pageY,250);
       var wd=Math.max($(document).width()-event.pageX-parseInt($(dragObject).parent().css("right")), 240);
       $(dragObject).parent().css("height",hg+"px");
       $(dragObject).parent().css("width",wd+"px");
   }
});

It works fine for Chrome and Firefox. But it didn't work in IE. IE doesn't execute the mousemove code, when user move mouse with pressed mouse button. So, it didn't redraw the border of div.

How can I fix it and make resizable block for IE?

Upvotes: 0

Views: 578

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

If jqueryui.resizable is satisfying except the position of the handle, you can use the handles-option there, the handles can be defined on every side you want to:

$('.chatBlockBody').resizable({ handles: 'nw' });

Upvotes: 1

Related Questions