There's nothing built-in to aid with this. To implement yourself, you'll want to handle the resize event. See
http://docs.jquery.com/UI/Resizable#event-resize and there you can compare the position and size of each element. - Richard On Sat, Mar 7, 2009 at 12:12 AM, sure <[email protected]> wrote: > > Hi Richards, > In my proto i am trying to make a layout desgine . In > this proto i am facing one problem. When i am trying to resize topleft > div, how can it knows i am reaching topright div or bottomleft-div . > Is any option to know this type of intelligence in jquery ui library. > If it is there, please let me know how to implement this for my > proto. Here is my code. > > <code> > <!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";> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=iso-8859-1" /> > <title>Liquid flow layout-2</title> > <style type="text/css"> > body > { > background:#FFFFFF; > width:100%; > margin:0px; > padding:5px; > } > .liquidlayout > { > width:800px; > position:relative; > clear:both; > float:left; > background:#FFFFFF; > border:2px #EEEEEE solid; > overflow:hidden; > } > .top > { > position:relative; > float:left; > width:100%; > background:#FFFFFF; > color:#000000; > margin:0px; > } > .topgroup > { > margin:2px; > float:left; > width:49%; > border:1px #CCCCCC solid; > cursor:move; > } > .bottom > { > position:relative; > clear:both; > float:left; > width:100%; > margin:0px; > background:#FFFFFF; > color:#000000; > } > .btmgroup > { > position:relative; > width:32.5%; > float:left; > border:1px #CCCCCC solid; > margin:2px; > overflow:hidden; > cursor:move; > } > </style> > <link rel="stylesheet" href="css/flora.resizable.css" /> > <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> > <script src="js/jquery-ui-personalized-1.6rc6.min.js" type="text/ > javascript"></script> > <script type="text/javascript"> > $(function() > { > $("#liquidlayout").resizable(); > $(".topgroup").resizable(); > $(".btmgroup").resizable(); > }); > </script> > </head> > <body> > <div id="liquidlayout" class="liquidlayout"> > <div class="top"> > <div id="topleft" class="topgroup">TopLeft</div> > <div id="topright" class="topgroup">TopRight</div> > </div> > <div class="bottom"> > <div id="btmleft" class="btmgroup">BottomLeft</div> > <div id="btmmiddle" class="btmgroup">BottomMiddle</div> > <div id="btmright" class="btmgroup">BottomRight</div> > </div> > </div> > <input type="hidden" id="btmresize" value="20" /> > </body> > </html> > </code> > > with Regards > sure. > > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
