I'm new to this group so forgive me if I sound stupid... I'm creating a web page that will have effectively 4 quadrants. One quadrant is fixed in height and the width will adjust with the quadrant on top of it. effectively that leaves 3 areas of the screen that I would like the user to be able to resize. The first area is to the left of the screen and adjusts horizontally. The remaining 2 areas are on the right and adjust vertically. I have the start and resize callbacks registered to monitor the movement of the div's and adjust the neighbor accordingly. The vertical adjustment is mostly stable. The horizontal adjustment tends to get off sync easily. Both adjustments will get off sync if you rapidly attempt to readjust them. The logic I am using to resize is simple. On resize start, capture the size of the div being resized. On resize, calculate the change and change the neighbor by the equivalent amount (div 1 increase in width by 5px then decrease div 2 by 5).
Below is a fairly complete sample. To really play with it you will need a png of reasonable size (mine are 8.5X11X200dpi). I do not have a publicly accessible web server unfortunately. This page is somewhat of a work in progress, but will show you what I am talking about. I am using FireFox 3.0.14. Due to time constraints for now that is the only browser I am developing against. I have done some "fiddling" with some of the css properties in attempt to get this to work properly so if you see anything bizarre, it is probably a tweak I forgot to remove from this sample. Did I overlook something or is there a known bug (timing issue? rounding issue?) with FF's implementation of JS? Code follows. Thanks for any input. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <style type="text/css"> * { margin: 0; padding: 0; font-family: "Lucida Grande", Verdana, Arial, Helvetica; font-size: 14px; } body { background: #FFFFFF; color: #000000; padding: 2px; } div { padding: 0px; border-color: #656595; border-style: solid; border-width: 0px 0px 0px 0px; width: 100%; display: block; margin: 1px; } div#container { width : 100%; height : 25em; } div#leftDisplay { width : 29.5%; height : 99.5%; float : left; position : absolute; left : 0; border-width: 2px 3px 2px 2px; } div#rightDisplay { width : 70%; height : 99.5%; float : right; position : absolute; right : 0; border-width: 2px 2px 2px 0px; } div#indexFields { height : 99.5%; float : left; border-width: 0px 0px 0px 0px; background: #dddddd; top : 0; left : 0; } div#indexNav { height : 87px; float : left; border-width: 0px 0px 0px 0px; position : absolute; bottom : 0; left : 0; background: #dddddd; } div#imageView { height : 74.5%; float : right; position : absolute; top : 0; right : 0; border-width: 0px 0px 3px 0px; width : 99.5% } div#imageZoom { height : 24.5%; float : right; position : absolute; bottom : 0; right : 0; margin-left : 2em; width : 99.5% } div.indexField, div#imageControl { border-width: 0px 0px 0px 0px; } div.fieldTitle { background: #aaaaaa; font-weight: bold; } div.fieldValue { } div#imageControl, div#navButtons{ margin-top : 3px; margin-left : auto ; margin-right : auto ; text-align : center; width : 100%; } div#navButtons{ position : absolute; bottom : 0; } #imageBox{ height:99.5%; width:99.5%; overflow : auto; position:absolute; top : 0; right : 0; } .imageWidth{ top:0px; left:0px; width:99.5%; /*height:100%; display:block; position:absolute; z-index:1; */ } .imageHeight{ top:0px; left:0px; height:99%; /*width:100%; display:block; position:absolute; z-index:1; */ } .imageFull{ top:0px; left:0px; /*width:100%; height:100%; display:block; position:absolute; z-index:1; */ } </style> <link type="text/css" href="http://jqueryui.com/latest/themes/ base/ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../css/jqzoom.css" type="text/css"> <script type="text/javascript" src="jq/ui/development-bundle/ jquery-1.3.2.js"></script> <script type="text/javascript" src="jq/ui/development-bundle/ui/ ui.core.js"></script> <script type="text/javascript" src="jq/ui/development-bundle/ui/ ui.resizable.js"></script> <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></ script> <script type="text/javascript"> var orgininalXSize = 0; var orgininalYSize = 0; function setOriginalSize(event, ui){ originalXSize = ui.originalSize.width; originalYSize = ui.originalSize.height; } function syncDivSize(event, ui, divToSync){ var uiXChange = ui.size.width - originalXSize; var uiYChange = ui.size.height - originalYSize; var target = document.getElementById(divToSync); if (target == undefined){ alert("invalid id: " + divToSync); } var divToSyncX = parseFloat(target.style.width); var divToSyncY = parseFloat(target.style.height); if (divToSyncX == 0 || isNaN(divToSyncX)){ divToSyncX = target.offsetWidth; } if (divToSyncY == 0 || isNaN(divToSyncY)){ divToSyncY = target.offsetHeight; } var newX = divToSyncX - uiXChange; var newY = divToSyncY - uiYChange; if (uiXChange != 0 && (newX > document.width || newX < 5)){ return; } if (uiYChange != 0 && (newY > document.height || newY < 5)){ return; } target.style.width = newX + "px"; target.style.height = newY + "px"; originalXSize = ui.size.width; originalYSize = ui.size.height; } function changeClass(elementID, newClassName){ var target = document.getElementById(elementID); if (target == undefined){ alert("invalid id: " + elementID); } target.className = newClassName; } $(document).ready(function(){ $('#leftDisplay').resizable({ handles: 'e', start: function(event, ui){ setOriginalSize(event, ui); }, resize: function(event, ui){ syncDivSize(event, ui, 'rightDisplay'); } }); $('#imageView').resizable({ handles: 's', start: function(event, ui){ setOriginalSize(event, ui); }, resize: function(event, ui){ syncDivSize(event, ui, 'imageZoom'); } }); }); </script> <title>test</title> </head> <body> <div id="container"> <div id="innerC"> <div id="leftDisplay"> <div id="indexFields" class="fieldList"> <div class="indexField"> <div class="fieldTitle"> item1 </div> <div class="fieldValue"> <input type="text" name="item1" value="item1"/ > </div> </div> <div class="indexField"> <div class="fieldTitle"> item2 </div> <div class="fieldValue"> <input type="text" name="item2" value="item2"/ > </div> </div> <div class="indexField"> <div class="fieldTitle"> item3 </div> <div class="fieldValue"> <input type="text" name="item3" value="item3"/ > </div> </div> <div class="indexField"> <div class="fieldTitle"> item4 </div> <div class="fieldValue"> <input type="text" name="item4" value="item4"/ > </div> </div> <div class="indexField"> <div class="fieldTitle"> item5 </div> <div class="fieldValue"> <input type="text" name="item5" value="item5"/> </div> </div> <div class="indexField"> <div class="fieldTitle"> item6 </div> <div class="fieldValue"> <input type="text" name="item6" value="item6"/ > </div> </div> </div> <div id="indexNav"> <div id="imageControl"> <div class="fieldTitle"> Fit Image To: </div> <div class="fieldValue"> <input type="button" name="fitToWidth" value="Width" onClick="changeClass('viewImage', 'imageWidth')"> <input type="button" name="fitToWidth" value="Height" onClick="changeClass('viewImage', 'imageHeight')"> <input type="button" name="fitToWidth" value="Full" onClick="changeClass('viewImage', 'imageFull')"> </div> </div> <div id="navButtons"> <div class="fieldTitle"> Navigate To: </div> <div class="fieldValue"> <input type="button" name="prev" value="<Prev"/> <input type="button" name="next" value="Next>"/> </div> </div> </div> </div> <div id="rightDisplay"> <div id="imageView" > <div id="imageBox"> <a href="1990104.png" class="jqzoom" style="" title="viewimage"> <img src="1990104.png" title="View Image" style="border: 1px solid #666;" id="viewImage" class="imageWidth"> </a> </div> </div> <div id="imageZoom"> image zoom </div> </div> </div> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
