I'm creating a form wysiwyg builder and I'm having problems with the resizable jquery plugin. It seems that when I resize any item that is on the page the zoom goes out of whack. I have found a workaround for draggable here: Jquery draggable with zoom problem
But I cannot find the same workaround for resizable. The scenario is when I create a resizable and draggable item and I zoom in or out the item seems to drift outside of its containing parent. You can see this here: http://drniermanoptometry.cu.cc/Main/Forms_Module/editForm.php/?name=horizontal-clickersearch.html Note: click the allocation 'NO' button to create a resizable draggable item. And then zoom out using control++
I have set the containment to parent and the css position to relative to no avail.
There are a few other issues with resizable. When I resize the item it does not let me drag the item all the way to the right and draggable does not work in FF. Possibly related? Update: I have found out that there is a problem with margins set to auto so I have the left side of my resizeable container fixed to avoid the issue. But I still would like to know if there is a workaround for auto margins. This guy has the same issue... http://www.webdeveloper.com/forum/showthread.php?236987-jQuery-resizable-with-margin-0-auto
Code Below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.create').click(function(){
var jquerybox = $('<div/>' , {class: 'blocked form-item' , width: '100px', height: '20px' , background: 'red'} );
var zoom = $('#form-preview').css('zoom');
var canvasHeight = $('#form-preview').height();
var canvasWidth = $('#form-preview').width();
jquerybox.resizable({
containment: 'parent'
});
jquerybox.draggable({
containment: 'parent',
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
$('#form-preview').append(jquerybox);
});
});
function updateItem(Item){
//ajax call to update script
}
</script>
<style>
.blocked{
display:block;
background: red;}
#form-preview{
height: 550px;
width: 600px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
}
.centered{
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id = "editbar">
<form action="Idkyet" method = "POST">
<table>
<tr>
<th>Type</th>
<th>Allocated</th>
</tr>
<?
error_reporting(E_ALL);
ini_set('display_errors', '1');
if(isset($_GET['name'])){
require_once '../../db_connect.php';
$sqlpre = 'SELECT id FROM forms WHERE name = "' . $_GET['name'] . '";';
$res = $mysqli->query($sqlpre);
$rds = $res->fetch_array();
$id = $rds['id'];
$res->free();
$sql = 'SELECT * FROM form_fields WHERE form_id = ' . $id ;
$res = $mysqli->query($sql);
if($res){
while($rds = $res->fetch_assoc()){
echo '<tr>';
echo '<td><input value = " ' . $rds['type'] . ' "type="textarea"></td>';
echo '<td><input class = "create centered" type="button" value = ' . (($rds['allocated'] == 1) ? 'Yes' : 'NO') . '></td>';
echo '</tr>';
}
}
}
?>
</table>
</form>
<div id = "form-preview">
<div class = "blocked"height = "20px"></div>
</div>
</div>
</body>
</html>
