javascript - Applying custom Jquery UI resize handles on image -
i have following code enable custom resize handles on image. tried code on div element working fine. on img element not working.
and give following error.
uncaught typeerror: cannot read property 'ownerdocument' of undefined jquery ui resize
what understood custom handles should children of element resized. there way add custom handles on image , resize ?
$( document ).ready(function() { $('#img-wrapper img').resizable({ handles: { 'nw': '#nwgrip', 'ne': '#negrip', 'sw': '#swgrip', 'se': '#segrip', 'n': '#ngrip', 'e': '#egrip', 's': '#sgrip', 'w': '#wgrip' } }); });#img-wrapper{ position:relative; width:350px; height:150px; } #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; position:absolute; } #nwgrip { left: -5px; top: -5px; } #negrip{ top: -5px; right: -5px; } #swgrip{ bottom: -5px; left: -5px; } #segrip{ bottom: -5px; right:-5px; } #ngrip{ top: -5px; left:50%; } #sgrip{ bottom: -5px; left: 50%; } #wgrip{ left:-5px; top:50%; } #egrip{ right:-5px; top:50%; } }<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xnjb53/ry+wmg+4l6ttl9m6ppqknwzvrt0ro1srnjzw=" crossorigin="anonymous"></script> <div id="img-wrapper"> <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div> <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div> <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div> <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div> <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div> <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div> <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div> <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97150&w=350&h=150"> </div>
you need use alsoresize.
if need preserve aspect ratio add aspectratio: true.
therefore, change from:
$('#img-wrapper img').resizable({ to:
$('#img-wrapper').resizable({ my snippet:
$(function () { $('#img-wrapper').resizable({ handles: { 'nw': '#nwgrip', 'ne': '#negrip', 'sw': '#swgrip', 'se': '#segrip', 'n': '#ngrip', 'e': '#egrip', 's': '#sgrip', 'w': '#wgrip' }, alsoresize: $(this).find('img') }); });#img-wrapper{ position:relative; width:350px; height:150px; } #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; position:absolute; } #nwgrip { left: -5px; top: -5px; } #negrip{ top: -5px; right: -5px; } #swgrip{ bottom: -5px; left: -5px; } #segrip{ bottom: -5px; right:-5px; } #ngrip{ top: -5px; left:50%; } #sgrip{ bottom: -5px; left: 50%; } #wgrip{ left:-5px; top:50%; } #egrip{ right:-5px; top:50%; }<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="img-wrapper"> <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div> <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div> <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div> <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div> <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div> <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div> <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div> <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97150&w=350&h=150"> </div>
Comments
Post a Comment