Hi Richards,
I would like to use new Jquery-1.6rc6 library.
Than how can i do this, i mean getter and setter for resize option.
with Regards
sure
On Mar 5, 5:01 pm, sure <[email protected]> wrote:
> 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;
> > >
>
> ...
>
> read more »
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
