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
-~----------~----~----~----~------~----~------~--~---
