Hi Richard,
Thanks for your quick response. I have tried by all
means to get and set the maxWidth as you said. But still it returns
noting (undefined). I had tried with both jquery ui 1.5.3 and 1.6rc6.
Please tell me where should i make the changes in my code. This is a
great plug in, there is no doubt about it. I know it is very simple
problem for any one. But, i don't know where should i did the mistake.
I am request you,Please fix my code and post it. I think it is the
stright solution for this. Here is paste 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-Layout</title>
<style type="text/css">
body
{
margin:0;
padding:5px;
width:100%;
background:#FFFFFF;
}
.liquidlayout
{
position:relative;
clear:both;
float:left;
background:#FFFFFF;
border:2px #CCCCCC dotted;
width:800px;
}
.topcls
{
float:left;
position:relative;
width:100%;
background:#FFFFFF;
color:#000000;
}
.topcls-row
{
float:left;
width:74%;
position:relative;
background:#FFFFFF;
border:1px #CCCCCC solid;
margin:1px;
/*min-height:180px;*/
}
.toprightcolum
{
float:right;
top:0;
right:0;
position:relative;
background:#FFFFFF;
border:1px #CCCCCC solid;
width:25%;
overflow:hidden;
min-height:45px;
}
.bottomcls
{
clear:both;
float:left;
position:relative;
width:100%;
background:#FFFFFF;
color:#003366;
}
.btmcls
{
float:left;
position:relative;
width:32.5%;
background:#FFFFFF;
text-align:center;
border:1px #CCCCCC solid;
margin:2px;
}
.gargetcls
{
font-family:Arial;
font-size:12px;
background:#FFCC00;
color:#FF0000;
border:1px #FF9900 solid;
position:relative;
width:130px;
left:35px;
top:25px;
}
#customblock
{
position:relative;
float:left;
background:#EEEEEE;
border:1px #666666 solid;
margin-top:2px;
}
#tooltip
{
font-family:Arial;
font-size:10px;
background:#333333;
color:#FF9900;
position:absolute;
padding:5px;
z-index:10242;
}
</style>
<link rel="stylesheet" href="css/flora.resizable.css" />
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery-ui-personalized-1.5.3.min.js" type="text/
javascript"></script>
<!--<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,#liquidlayout
div").mousemove(function(e)
{
var x = parseInt(e.pageX)+10;
var y = parseInt(e.pageY)+10;
$("#tooltip").css("left",x+"px");
$("#tooltip").css("top",y+"px");
});
init();
var rWid =
(parseInt($("#mWidth").val())-parseInt($("#trcolum").val
()))-7;
$(".liquidlayout").resizable(
{
autoHide:true,ghost:true,resize:function(ev,ui)
{
$("#tooltip").show("slow").html(ui.size.width
+"X"+ui.size.height);
$("#tlrows").attr("value",$(".topcls-row").css("width"));
$("#mWidth").attr("value",ui.size.width);
//init();
//$("#debug").html(maxWid);
},
stop:function(ev,ui)
{
$("#tooltip").hide("slow");
var maxWidth =
$('.liquidlayout').data('maxWidth.resizable');
alert(maxWidth);
}
});
$(".topcls-row").resizable(
{
alsoResize:".topcls-row",autoHide:true,resize:function(ev,ui)
{
$("#tooltip").show("slow").html(ui.size.width
+"X"+ui.size.height);
$("#tlrows").attr("value",ui.size.width);
},
stop:function(ev,ui)
{
$("#tooltip").hide("slow");
}
});
$(".toprightcolum").resizable({autoHide:true,containment:$
("#liquidlayout").length?'#liquidlayout':'document'});
$(".btmcls").resizable
({autoHide:true,alsoResize:"#btmcol1,#btmcol2,#btmcol3"});
});
function init()
{
var Wid =
(parseInt($("#mWidth").val())-parseInt($("#trcolum").val
()))-7;
$("#maxWidth").attr("value",Wid);
$("#mWidth").attr("value",$("#liquidlayout").css("width"));
$("#tlrows").attr("value",$(".topcls-row").css("width"));
$("#trcolum").attr("value",$(".toprightcolum").css("width"));
}
</script>
</head>
<body>
<div id="liquidlayout" class="liquidlayout">
<div id="topcls" class="topcls">
<div id="toprightcolum"
class="toprightcolum">Click to insert
gadget</div>
<div id="toprow1" class="topcls-row">Click to
insert gadget</div>
<div id="toprow2" class="topcls-row">Click to
insert gadget</
div>
</div>
<div id="bottomcls" class="bottomcls">
<div id="btmcol1" class="btmcls">Left</div>
<div id="btmcol2" class="btmcls">Middle</div>
<div id="btmcol3" class="btmcls">Right</div>
</div>
</div>
<div id="customblock">
Custom block
</div>
<div id="tooltip" style="display:none;"></div>
<div id="debug"></div>
<input type="hidden" id="maxWidth" name="maxWidth" value="" />
<input type="hidden" id="mWidth" name="mWidth" value="" />
<input type="hidden" id="tlrows" name="tlrows" value="" />
<input type="hidden" id="trcolum" name="trcolum" value="" />
</body>
</html>
</code>
Thanking you
sure
On Mar 5, 3:35 pm, "Richard D. Worth" <[email protected]> wrote:
> I see now that you're using jQuery UI 1.5.3. The documentation I pointed you
> to is for our latest version, 1.6rc6. The API for changing options after
> init in 1.5.3 is slightly different:
>
> Get or set the maxWidth option, after init. (1.5.3 API)
> //getter
> var maxWidth = $('.selector').data('maxWidth.resizable');
> //setter
> $('.selector').data('maxWidth.resizable', 250);
>
> - Richard
>
> On Thu, Mar 5, 2009 at 1:47 AM, sure <[email protected]> wrote:
>
> > Hi Richard,
> > First of all thank u very much for your quick response.
> > I have read that document. But i am unable to set maxWidth to my div
> > after init. Here is my complete code. What i want is if i resize
> > liquidlayout(main div). Than, i would like to set the maxWidth for
> > toprow1 and toprow2(divs). How can i do this, please let me know. I am
> > hanged at this point.
>
> > <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-Layout</title>
> > <style type="text/css">
> > body
> > {
> > margin:0;
> > padding:5px;
> > width:100%;
> > background:#FFFFFF;
> > }
> > .liquidlayout
> > {
> > position:relative;
> > clear:both;
> > float:left;
> > background:#FFFFFF;
> > border:2px #CCCCCC dotted;
> > width:800px;
> > }
> > .topcls
> > {
> > float:left;
> > position:relative;
> > width:100%;
> > background:#FFFFFF;
> > color:#000000;
> > }
> > .topcls-row
> > {
> > float:left;
> > width:74%;
> > position:relative;
> > background:#FFFFFF;
> > border:1px #CCCCCC solid;
> > margin:1px;
> > /*min-height:180px;*/
> > }
> > .toprightcolum
> > {
> > float:right;
> > top:0;
> > right:0;
> > position:relative;
> > background:#FFFFFF;
> > border:1px #CCCCCC solid;
> > width:25%;
> > overflow:hidden;
> > min-height:45px;
> > }
> > .bottomcls
> > {
> > clear:both;
> > float:left;
> > position:relative;
> > width:100%;
> > background:#FFFFFF;
> > color:#003366;
> > }
> > .btmcls
> > {
> > float:left;
> > position:relative;
> > width:32.5%;
> > background:#FFFFFF;
> > text-align:center;
> > border:1px #CCCCCC solid;
> > margin:2px;
> > }
> > .gargetcls
> > {
> > font-family:Arial;
> > font-size:12px;
> > background:#FFCC00;
> > color:#FF0000;
> > border:1px #FF9900 solid;
> > position:relative;
> > width:130px;
> > left:35px;
> > top:25px;
> > }
> > #customblock
> > {
> > position:relative;
> > float:left;
> > background:#EEEEEE;
> > border:1px #666666 solid;
> > margin-top:2px;
> > }
> > </style>
> > <link rel="stylesheet" href="css/flora.resizable.css" />
> > <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
> > <script src="js/jquery-ui-personalized-1.5.3.min.js" type="text/
> > javascript"></script>
> > <script type="text/javascript">
> > $(function()
> > {
> > init();
> > var rWid =
> > (parseInt($("#mWidth").val())-parseInt($("#trcolum").val
> > ()))-7;
> > $(".liquidlayout").resizable(
> > {
>
> > autoHide:true,ghost:true,resize:function(ev,ui)
> > {
>
> > $("#tlrows").attr("value",$(".topcls-row").css("width"));
>
> > $("#mWidth").attr("value",ui.size.width);
> > init();
> > //$("#debug").html(maxWid);
> > }
> > });
> > $(".topcls-row").resizable(
> > {
>
> > alsoResize:".topcls-row",autoHide:true,resize:function(ev,ui)
> > {
>
> > $("#tlrows").attr("value",ui.size.width);
> > }
> > });
>
> > $(".toprightcolum").resizable({autoHide:true,containment:$
> > ("#liquidlayout").length?'#liquidlayout':'document'});
> > $(".btmcls").resizable
> > ({autoHide:true,alsoResize:"#btmcol1,#btmcol2,#btmcol3"});
> > });
> > function init()
> > {
> > var Wid =
> > (parseInt($("#mWidth").val())-parseInt($("#trcolum").val
> > ()))-7;
> > $("#maxWidth").attr("value",Wid);
>
> > $("#mWidth").attr("value",$("#liquidlayout").css("width"));
>
> > $("#tlrows").attr("value",$(".topcls-row").css("width"));
>
> > $("#trcolum").attr("value",$(".toprightcolum").css("width"));
> > }
> > </script>
> > </head>
> > <body>
> > <div id="liquidlayout" class="liquidlayout">
> > <div id="topcls" class="topcls">
> > <div id="toprightcolum"
> > class="toprightcolum">Click to insert
> > gadget</div>
> > <div id="toprow1" class="topcls-row">Click
> > to insert gadget</div>
> > <div id="toprow2" class="topcls-row">Click
> > to insert gadget</
> > div>
> > </div>
> > <div id="bottomcls" class="bottomcls">
> > <div id="btmcol1" class="btmcls">Left</div>
> > <div id="btmcol2"
> > class="btmcls">Middle</div>
> > <div id="btmcol3" class="btmcls">Right</div>
> > </div>
> > </div>
> > <div id="customblock">
> > Custom block
> > </div>
> > <div id="debug"></div>
> > <input type="hidden" id="maxWidth" name="maxWidth" value="" />
> > <input type="hidden" id="mWidth" name="mWidth" value="" />
> > <input type="hidden" id="tlrows" name="tlrows" value="" />
> > <input type="hidden" id="trcolum" name="trcolum" value="" />
> > </body>
> > </html>
>
> > </code>
>
> > with Regards
> > sure.
>
> > On Mar 5, 10:31 am, "Richard D. Worth" <[email protected]> wrote:
> > > Seehttp://docs.jquery.com/UI/Resizable#option-maxWidth
> > > "
> > > Get or set the maxWidth option, after init.
> > > //getter
> > > var maxWidth = $('.selector').resizable('option', 'maxWidth');
> > > //setter
> > > $('.selector').resizable('option', 'maxWidth', 250);
> > > "
>
> > > - Richard
>
> > > On Wed, Mar 4, 2009 at 11:30 PM, sure <[email protected]> wrote:
>
> > > > Hi all,
> > > > I am new to jquery ui plug in. Now i am working on the layout
> > > > desgine using this plugin. I would like to set a maxWidth for layer,
> > > > when the resizing the layer. Intially it is working fine. But, how can
> > > > set maxWidth once i have done the resize.
>
> > > > $(".topcls-row").resizable(
> > > > {
> > > > alsoResize:".topcls-
> > > > row",autoHide:true,maxWidth:rWid,resize:function(ev,ui)
> > > > {
>
> > > > $("#tlrows").attr("value",ui.size.width);
> > > > // Here i would
> > > > like to set the maxWidth.
> > > > }
> > > > });
>
> > > > Please help me to fix this problem.
> > > > 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
-~----------~----~----~----~------~----~------~--~---
