Problem with JQuery Resizable plugin

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
siji86
Forum Commoner
Posts: 30
Joined: Fri Mar 26, 2010 6:15 am

Problem with JQuery Resizable plugin

Post by siji86 »

Hi,

I am using the JQuery Resizable plugin for one of the Application. I will explain my problem with the help of this screenshot.
I have attached the screen shot as an attachment.
Now, what i have done is i have applied the JQuery's resizable class to the image and the image is inside a table called canvas.
Now the problem is that when i try to re-size the image from the top-left corner, the image gets re-sized, but the 4 small blue balls surrounding the image gets deviated, that can be seen in the second screenshot.
I am not understanding why this is happening, can any body figure out.
Below is the HTML Script
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--<script src="jquery.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="imageFunctions.js"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>
<link href="jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jq ... ery-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<style type="text/css">
#slider { margin-left:10px; margin-top:10px;width:200px;height:10px; }
#slider2 { margin-left:10px;margin-top:10px;width:200px;height:10px; }
#image1 {cursor:move;}
</style>
<?php

require_once "class.upload.inc.php";
if(!isset($_SESSION['oldfname']))
$_SESSION['oldfname']='';

if(isset($_POST['submit'])){
$myUploadobj = new UPLOAD;
$upload_dir="edit/";
// echo 'New File name '.$_FILES['file1']['name'].'<br>';
//echo 'Old File Name '.$_SESSION['oldfname'].'<br>';
if($_SESSION['oldfname'] == $_FILES['file1']['name']){
//echo 'Similar...';
$img=$_SESSION['oldfname'];
}
else
$img=$myUploadobj->upload_file($upload_dir,'file1',true,true,0,"jpg|jpeg|gif|png|JPG|JPEG|GIF|PNG");
$_SESSION['oldfname']=$_FILES['file1']['name'];


}
?>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<table width="972" style="border:thin;">
<tr>
<td width="230" height="432">
<table>
<tr>
<td>
<input type="button" onClick="increaseSize()" value="Increase Size"/></td>
<td>
<input type="button" onClick="decreaseSize()" value="Decrease Size" /></td>
</tr>
<tr>
<td>
<input type="button" onClick="rotateClock()" value="Rotate Right" /></td>
<td>
<input type="button" onClick="rotateAntiClock()" value="Rotate Left" /></td>
</tr>
<tr>
<td>
<input type="button" onClick="alignVertically()" value="Align Vertically" /></td>
<td>
<input type="button" onClick="alignHorizontally()" value="Align Horizontally" /></td>
</tr>
<tr>
<td>
<input type="button" onClick="FitV()" value="Fit Vertically" /></td>
<td>
<input type="button" onClick="FitH()" value="Fit Horizontally" /></td>
</tr>
<tr>
<td>
<input type="button" onClick="moveUp()" value="Move Up" /></td>
<td>
<input type="button" onClick="moveDown()" value="Move Down" /></td>
</tr>
<tr>
<td>
<input type="button" onClick="moveLeft()" value="Move Left" /></td>
<td>
<input type="button" onClick="moveRight()" value="Move Right" /></td>
</tr>
<tr>
<td colspan="2">
<fieldset style="width:100px;"><legend>ClockWise Rotation</legend>
<div id="slider"></div>
</fieldset>
<br /><br />
<fieldset style="width:100px;"><legend>Anti-ClockWise Rotation</legend>
<div id="slider2"></div>
</fieldset></td>
</tr>
</table></td>
<td width="509" colspan="2" rowspan="7" id="container" style="border:groove;border-color:#00CCFF;">

<!--<div id="draggable" align="center">

<img src="<?php echo 'edit/'.$img; ?>" id="image1" class="resizable" style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;cursor:url('object-rotate-left.cur')"/>
<input type="hidden" value="<?php echo 'edit/'.$img; ?>" id="hidimg" name="hidimg"/>

</div>-->

<div id="draggable">
<table id="canvas">
<tr>
<td><img src="circle.gif" onMouseOver="showCursortop();" onMouseOut="hideCursortop();" id="one"/></td>
<td>&nbsp;</td>
<td><img src="circle.gif" onMouseOver="showCursorright();" onMouseOut="hideCursorright();" id="two"/></td>
</tr>
<tr>
<td></td>
<td><!--<div id="pointer_div" style="background-color:#993300;">--> <img src="<?php echo 'edit/'.$img; ?>" id="image1" class="resizable" style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;"/> <!--</div>--></td>
<td></td>
</tr>
<tr>
<td><img src="circle.gif" onMouseOver="showCursorleft();" onMouseOut="hideCursorleft();" id="three"/></td>
<td></td>
<td><img src="circle.gif" onMouseOver="showCursorbottom();" onMouseOut="hideCursorbottom();" id="four"/></td>
</tr>
</table>
</div></td>

</tr>
</table>



<input type="hidden" value="<?php echo 'edit/'.$img; ?>" id="hidimg" name="hidimg"/>
</form>
</body>
</html>

Thanks in Advance.
:D
1)
screenshot1
screenshot1
application.GIF (82.05 KiB) Viewed 285 times
2)
screenshot1
screenshot1
application.GIF (82.05 KiB) Viewed 285 times
Attachments
screenshot2.GIF
screenshot2.GIF (97.61 KiB) Viewed 285 times
Post Reply