Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question show results in a text box

    hi,

    the yahoo function below is for dragging a box around teh screen
    Code:
    (function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            dd1, dd2, dd3;
    
    
        YAHOO.example.DDRegion = function(id, sGroup, config) {
            this.cont = config.cont;
            YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
        };
    
        YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
            cont: null,
            init: function() {
                //Call the parent's init method
                YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
                this.initConstraints();
    
                Event.on(window, 'resize', function() {
                    this.initConstraints();
                }, this, true);
            },
            initConstraints: function() {
                //Get the top, right, bottom and left positions
                var region = Dom.getRegion(this.cont);
    
                //Get the element we are working on
                var el = this.getEl();
    
                //Get the xy position of it
                var xy = Dom.getXY(el);
    
                //Get the width and height
                var width = parseInt(Dom.getStyle(el, 'width'), 10);
                var height = parseInt(Dom.getStyle(el, 'height'), 10);
    
                //Set left to x minus left
                var left = xy[0] - region.left;
    			
                //Set right to right minus x minus width
                var right = region.right - xy[0] - width;
    
                //Set top to y minus top
                var top = xy[1] - region.top;
    
                //Set bottom to bottom minus y minus height
                var bottom = region.bottom - xy[1] - height;
    
                //Set the constraints based on the above calculations
                this.setXConstraint(left, right);
                this.setYConstraint(top, bottom);
            }
        });
    I would like to show the final TOP and LEFT results in textboxes onMouseUP?!

    thanks in advance!

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    here is the whole code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Staying in a Region</title>
    
    <style type="text/css">
    /*margin and padding on body element
      can introduce errors in determining
      element position and are not recommended;
      we turn them off as a foundation for YUI
      CSS treatments. */
    body {
    	margin:0;
    	padding:0;
    }
    </style>
    
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
    
    
    <!--begin custom header content for this example-->
    <style type="text/css">
    
    .dd-demo {
        position: relative;
        text-align: center;
        color: #fff;
        cursor: move;
        height: 60px;
        width: 60px;
        padding: 0;
        margin: 0;
    }
    
    .dd-demo div {
        border: 1px solid black;
        height: 58px;
        width: 58px;
    }
    
    
    #dd-demo-canvas3 {
        border: 1px solid black;
    	width:400px;
    	height:200px;
    }
    
    #dd-demo-1 { 
        background-color:#6D739A;top:5px; left:5px;
    }
    
    </style>
    
    
    <!--end custom header content for this example-->
    <script type="text/javascript">
    
    (function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            dd1, dd2, dd3;
    
    
        YAHOO.example.DDRegion = function(id, sGroup, config) {
            this.cont = config.cont;
            YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
        };
    
        YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
            cont: null,
            init: function() {
                //Call the parent's init method
                YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
                this.initConstraints();
    
                Event.on(window, 'resize', function() {
                    this.initConstraints();
                }, this, true);
            },
            initConstraints: function() {
                //Get the top, right, bottom and left positions
                var region = Dom.getRegion(this.cont);
    
                //Get the element we are working on
                var el = this.getEl();
    
                //Get the xy position of it
                var xy = Dom.getXY(el);
    
                //Get the width and height
                var width = parseInt(Dom.getStyle(el, 'width'), 10);
                var height = parseInt(Dom.getStyle(el, 'height'), 10);
    
                //Set left to x minus left
                var left = xy[0] - region.left;
    			
                //Set right to right minus x minus width
                var right = region.right - xy[0] - width;
    
                //Set top to y minus top
                var top = xy[1] - region.top;
    
                //Set bottom to bottom minus y minus height
                var bottom = region.bottom - xy[1] - height;
    
                //Set the constraints based on the above calculations
                this.setXConstraint(left, right);
                this.setYConstraint(top, bottom);
            }
        });
    
    
        Event.onDOMReady(function() {
            dd1 = new YAHOO.example.DDRegion('dd-demo-1', '', { cont: 'dd-demo-canvas3' });
            dd2 = new YAHOO.example.DDRegion('dd-demo-2', '', { cont: 'dd-demo-canvas2' }) ;
            dd3 = new YAHOO.example.DDRegion('dd-demo-3', '', { cont: 'dd-demo-canvas1' });
        });
    
    })();
    
    </script>
    </head>
    
    <body class="yui-skin-sam">
    
    <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
    
    
            <div id="dd-demo-canvas3">
                <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
            </div>
    
    
    
    <!--END SOURCE CODE FOR EXAMPLE =============================== -->
    
    
    <!--MyBlogLog instrumentation-->
    <script type="text/javascript" src="http://track2.mybloglog.com/js/jsserv.php?mblID=2007020704011645"></script>
    
    </body>
    </html>
    
    <script type="text/javascript"
    src="http://l.yimg.com/d/lib/rt/rto1_78.js"></script><script>var rt_page="792404935:FRTMA"; var
    rt_ip="92.27.96.94";
    if ("function" == typeof(rt_AddVar) ){ rt_AddVar("ys", escape("AD5B9345")); rt_AddVar("cr", escape("yOGZVheEp7B"));
    rt_AddVar("sg", escape("/SIG=13crcupi03kt5d7t5mluge&b=4&d=ToO9R61pYEI1rE3.4EKn6SiIBfY-&s=u5&i=uNUyCglJSjBYYwfSj3eJ/1276168850/92.27.96.94/AD5B9345")); rt_AddVar("yd", escape("2272974827"));
    }</script><noscript><img src="http://rtb.pclick.yahoo.com/images/nojs.gif?p=792404935:FRTMA"></noscript>
    <!-- SpaceID=792404935 loc=FSRVY noad -->
    <script language=javascript>
    if(window.yzq_d==null)window.yzq_d=new Object();
    window.yzq_d['ekRKGUPDhEc-']='&U=12dod00fc%2fN%3dekRKGUPDhEc-%2fC%3d-1%2fD%3dFSRVY%2fB%3d-1%2fV%3d0';
    
    </script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=FKCd10WTW6A6dK0_S2r6Di2NXBtgXkwQypIAAFAZ&T=181uj69i8%2fX%3d1276168850%2fE%3d792404935%2fR%3ddev_net%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d1751364253%2fH%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIyOTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%2fQ%3d-1%2fS%3d1%2fJ%3dAD5B9345&U=12dod00fc%2fN%3dekRKGUPDhEc-%2fC%3d-1%2fD%3dFSRVY%2fB%3d-1%2fV%3d0"></noscript><script language=javascript>
    if(window.yzq_d==null)window.yzq_d=new Object();
    window.yzq_d['eERKGUPDhEc-']='&U=13equt3ep%2fN%3deERKGUPDhEc-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1';
    </script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=FKCd10WTW6A6dK0_S2r6Di2NXBtgXkwQypIAAFAZ&T=18105lmp4%2fX%3d1276168850%2fE%3d792404935%2fR%3ddev_net%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d2391649304%2fH%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIyOTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%2fQ%3d-1%2fS%3d1%2fJ%3dAD5B9345&U=13equt3ep%2fN%3deERKGUPDhEc-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1"></noscript>
    <!-- VER-3.0.144255 -->
    <script language=javascript>
    if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://l.yimg.com/d/lib/bc/bc_2.0.4.js></scr"+"ipt>");
    </script><script language=javascript>
    if(window.yzq_p)yzq_p('P=FKCd10WTW6A6dK0_S2r6Di2NXBtgXkwQypIAAFAZ&T=17s6le966%2fX%3d1276168850%2fE%3d792404935%2fR%3ddev_net%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d2255116727%2fH%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIyOTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%2fS%3d1%2fJ%3dAD5B9345');
    if(window.yzq_s)yzq_s();
    </script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=FKCd10WTW6A6dK0_S2r6Di2NXBtgXkwQypIAAFAZ&T=181r2lo8q%2fX%3d1276168850%2fE%3d792404935%2fR%3ddev_net%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d3824302448%2fH%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIyOTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%2fQ%3d-1%2fS%3d1%2fJ%3dAD5B9345"></noscript>
    <!-- p6.ydn.sp1.yahoo.com compressed/chunked Thu Jun 10 04:20:50 PDT 2010 -->

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    I have just had a go myself but not been successful, I have added a form but no results being populated?!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Staying in a Region</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
    <!--begin custom header content for this example-->
    <style type="text/css">
    .dd-demo { position: relative; text-align: center; color: #fff; cursor: move; height: 60px; width: 60px; padding: 0; margin: 0; }
    .dd-demo div { border: 1px solid black; height: 58px; width: 58px; }
    #dd-demo-canvas3 { border: 1px solid black; width:400px; height:200px; }
    #dd-demo-1 { background-color:#6D739A;top:5px; left:5px; }
    </style>
    <!--end custom header content for this example-->
    <script type="text/javascript">
    (function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            dd1, dd2, dd3;
    
    
        YAHOO.example.DDRegion = function(id, sGroup, config) {
            this.cont = config.cont;
            YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
        };
    
        YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
            cont: null,
            init: function() {
                //Call the parent's init method
                YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
                this.initConstraints();
    
                Event.on(window, 'resize', function() {
                    this.initConstraints();
                }, this, true);
            },
            initConstraints: function() {
                //Get the top, right, bottom and left positions
                var region = Dom.getRegion(this.cont);
    
                //Get the element we are working on
                var el = this.getEl();
    
                //Get the xy position of it
                var xy = Dom.getXY(el);
    
                //Get the width and height
                var width = parseInt(Dom.getStyle(el, 'width'), 10);
                var height = parseInt(Dom.getStyle(el, 'height'), 10);
    
                //Set left to x minus left
                var left = xy[0] - region.left;
    			
                //Set right to right minus x minus width
                var right = region.right - xy[0] - width;
    
                //Set top to y minus top
                var top = xy[1] - region.top;
    
                //Set bottom to bottom minus y minus height
                var bottom = region.bottom - xy[1] - height;
    
                //Set the constraints based on the above calculations
                this.setXConstraint(left, right);
                this.setYConstraint(top, bottom);
            }
        });
    
    
        Event.onDOMReady(function() {
            dd1 = new YAHOO.example.DDRegion('dd-demo-1', '', { cont: 'dd-demo-canvas3' });
        });
    
    })();
    {
      theForm=document.form1;
      theForm.TOP.value=top;
      theForm.LEFT.value=left;
    }
    </script>
    </head>
    <body class="yui-skin-sam">
    	<div id="dd-demo-canvas3">
        	<div id="dd-demo-1" class="dd-demo"><div>box</div></div>
        </div>
    <form name="form1">
       TOP: <input type=text name=TOP value="">
       LEFT: <input type=text name=LEFT value="">
       <input type=submit value="Save">
    </form>
    </body>
    </html>

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok I got it to work, I moved it to the right place

    so how can I run that bit of code each time I move the box?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •