...

View Full Version : show results in a text box



jarv
06-10-2010, 01:50 PM
hi,

the yahoo function below is for dragging a box around teh screen


(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
06-10-2010, 02:49 PM
here is the whole 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%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIy OTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%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%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIy OTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%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%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIy OTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%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%3dc2VydmVJZD0iRktDZDEwV1RXNkE2ZEswX1MycjZEaTJOWEJ0Z1hrd1F5cElBQUZBWiIgc2l0ZUlkPSIy OTI1MDUxIiB0U3RtcD0iMTI3NjE2ODg1MDAzOTQzNyIg%2fQ%3d-1%2fS%3d1%2fJ%3dAD5B9345"></noscript>
<!-- p6.ydn.sp1.yahoo.com compressed/chunked Thu Jun 10 04:20:50 PDT 2010 -->

jarv
06-10-2010, 05:19 PM
I have just had a go myself but not been successful, I have added a form but no results being populated?!



<!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
06-10-2010, 05:29 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum