Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page show results in a text box

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-10-2010, 12:50 PM   PM User | #1
jarv
Banned

 
Join Date: Mar 2007
Posts: 1,523
Thanks: 116
Thanked 0 Times in 0 Posts
jarv can only hope to improve
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!
jarv is offline   Reply With Quote
Old 06-10-2010, 01:49 PM   PM User | #2
jarv
Banned

 
Join Date: Mar 2007
Posts: 1,523
Thanks: 116
Thanked 0 Times in 0 Posts
jarv can only hope to improve
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 -->
jarv is offline   Reply With Quote
Old 06-10-2010, 04:19 PM   PM User | #3
jarv
Banned

 
Join Date: Mar 2007
Posts: 1,523
Thanks: 116
Thanked 0 Times in 0 Posts
jarv can only hope to improve
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>
jarv is offline   Reply With Quote
Old 06-10-2010, 04:29 PM   PM User | #4
jarv
Banned

 
Join Date: Mar 2007
Posts: 1,523
Thanks: 116
Thanked 0 Times in 0 Posts
jarv can only hope to improve
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?
jarv is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:49 PM.
Advertisement
Log in to turn off these ads.