doogiaxatesee
New Member
I am trying to create a croppable image within a layer on a page. I want the user to click a button to show a layer and then within that layer the user can crop an image.It works if the croppable image is outside the layer.But doesnt work when in the layerany help greatly appreciatedheres the code I have so far:\[code\]<html><head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script><style type="text/css"> .layer{ position: absolute; left: 100px; top: 200px; background-color: #f1f1f1; width: 880px; height: 880px; padding: 10px; color: black; border: #0000cc 2px dashed; display: none; }#resizable { background: none repeat scroll 0 0 silver; float: left; height: 1000px; left: 0; opacity: 0.4; position: absolute; top: 0; border:1px solid; width: 1000px; z-index: 100; }</style><script language="JavaScript"> function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } $(document).ready(function() { $('img').load(function() { $("#resizable").resizable({ containment: ".layer" }); $( "#resizable" ).draggable({ containment: ".layer" }); var img_width = $('#crop_img').width(); var img_height = $('#crop_img').height(); $(".layer").width(img_width); $(".layer").height(img_height); }); }); $(document).ready(function() { $('#frm').submit(function() { var position = $('#resizable').position(); var position_img = $('#crop_img').position(); $('#img_width').val($('#resizable').width()); $('#img_height').val($('#resizable').height()); $('#source_x').val(position.left-8); $('#source_y').val(position.top - 8); }); }); </script> </head><body > <input type=button name=type value='http://stackoverflow.com/questions/15876792/Show Layer' onclick="setVisibility('sub3', 'inline');";> <input type=button name=type value='http://stackoverflow.com/questions/15876792/Hide Layer' onclick="setVisibility('sub3', 'none');";> <div class="layer" id="sub3"> <form id='frm' action='imagecrops.php' method='post' > <!-- Load the image which needs to be cropped --> <img src="http://stackoverflow.com/questions/15876792/img/arrow.png" id='crop_img'/> <!-- Div for marking cropping area --> <div id="resizable"></div> <!-- Hidden fields to submit resize and crop values --> <input type='hidden' name='img_width' id='img_width' /> <input type='hidden' name='img_height' id='img_height' /> <input type='hidden' name='source_x' id='source_x' /> <input type='hidden' name='source_y' id='source_y' /> <input type="submit" value='http://stackoverflow.com/questions/15876792/Crop' /> </form> </div></body></html>\[/code\]