gman1103
20 Feb 2009, 01:21 PM
Hi,
I am new to javascript and finding it a bit confusing right now.
My problem:
I have pasted two examples below. example1.html is written by me and not working as expected. example2.html is something i found on the net and is working.
Try out the following: after opening example1.html, click on the red box. An alert displaying left top corner is shown. the output is not as expected.
After opening example2.html. click on the green box. alert displaying the top left corner will be displayed.
In both these cases I have used onclick and am passing "this" to the function called for onclick, but in example2 style.left gives expected output and not in example1. Why is this so? Thanks in advance.
Thanks, GB
example1.html:
<html>
<head>
<title> example1 </title>
<style type="text/css">
#parentdiv {
background-color : red;
width: 75px;
height: 75px;
position: absolute;
display: block;
}
</style>
<script type="text/javascript">
function displr(ob)
{
var obj = ob;
var x = parseInt(obj.style.left);
alert(x);
}
</script>
</head>
<body>
<div id="parentdiv" onclick="displr(this)">
</div>
<body>
example2.html:
<html>
<head>
<title> draging using JS, from : http://www.thebroth.com/blog/113/how-to-drag-something </title>
<style type="text/css">
#outerdiv {
background-color : red;
width: 400px;
height: 400px;
position absolute;
border: 2px solid;
overflow: hidden;
display: block;
}
#dragObject {
border: 2px solid;
border-color: #6c0 #170 #170 #6c0;
background-color: #3a0;
width: 25px;
height: 25px;
position: absolute;
text-align: center;
display: none;
cursor: default;
}
</style>
<script type="text/javascript">
var dragObject, offsetX, offsetY, isDragging=false;
window.onload = init;
document.onmousemove = mM;
document.onmouseup = mU;
function init() {
var ob = document.getElementById("dragObject");
ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};
ob.style.left="100px";
ob.style.top="100px";
ob.style.display="block";
}
function mD(ob1, e) {
dragObject = ob1;
if(window.event) e=window.event;
var dragX = parseInt(dragObject.style.left);
var dragY = parseInt(dragObject.style.top);
var mouseX = e.clientX;
var mouseY = e.clientY;
offsetX = mouseX - dragX;
offsetY = mouseY - dragY;
alert(dragX);
alert(dragY);
isDragging = true;
return false;
}
function mM(e) {
if(!isDragging) return;
if(window.event) e=window.event;
var newX = e.clientX - offsetX;
var newY = e.clientY - offsetY;
dragObject.style.left = newX + "px";
dragObject.style.top = newY + "px";
return false;
}
function mU()
{
if(!isDragging) return;
isDragging = false;
return false;
}
</script>
</head>
<body>
<div id="outerdiv">
<div id="dragObject" onclick="mD(this,event)"></div>
</div>
</body>
</html>
I am new to javascript and finding it a bit confusing right now.
My problem:
I have pasted two examples below. example1.html is written by me and not working as expected. example2.html is something i found on the net and is working.
Try out the following: after opening example1.html, click on the red box. An alert displaying left top corner is shown. the output is not as expected.
After opening example2.html. click on the green box. alert displaying the top left corner will be displayed.
In both these cases I have used onclick and am passing "this" to the function called for onclick, but in example2 style.left gives expected output and not in example1. Why is this so? Thanks in advance.
Thanks, GB
example1.html:
<html>
<head>
<title> example1 </title>
<style type="text/css">
#parentdiv {
background-color : red;
width: 75px;
height: 75px;
position: absolute;
display: block;
}
</style>
<script type="text/javascript">
function displr(ob)
{
var obj = ob;
var x = parseInt(obj.style.left);
alert(x);
}
</script>
</head>
<body>
<div id="parentdiv" onclick="displr(this)">
</div>
<body>
example2.html:
<html>
<head>
<title> draging using JS, from : http://www.thebroth.com/blog/113/how-to-drag-something </title>
<style type="text/css">
#outerdiv {
background-color : red;
width: 400px;
height: 400px;
position absolute;
border: 2px solid;
overflow: hidden;
display: block;
}
#dragObject {
border: 2px solid;
border-color: #6c0 #170 #170 #6c0;
background-color: #3a0;
width: 25px;
height: 25px;
position: absolute;
text-align: center;
display: none;
cursor: default;
}
</style>
<script type="text/javascript">
var dragObject, offsetX, offsetY, isDragging=false;
window.onload = init;
document.onmousemove = mM;
document.onmouseup = mU;
function init() {
var ob = document.getElementById("dragObject");
ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};
ob.style.left="100px";
ob.style.top="100px";
ob.style.display="block";
}
function mD(ob1, e) {
dragObject = ob1;
if(window.event) e=window.event;
var dragX = parseInt(dragObject.style.left);
var dragY = parseInt(dragObject.style.top);
var mouseX = e.clientX;
var mouseY = e.clientY;
offsetX = mouseX - dragX;
offsetY = mouseY - dragY;
alert(dragX);
alert(dragY);
isDragging = true;
return false;
}
function mM(e) {
if(!isDragging) return;
if(window.event) e=window.event;
var newX = e.clientX - offsetX;
var newY = e.clientY - offsetY;
dragObject.style.left = newX + "px";
dragObject.style.top = newY + "px";
return false;
}
function mU()
{
if(!isDragging) return;
isDragging = false;
return false;
}
</script>
</head>
<body>
<div id="outerdiv">
<div id="dragObject" onclick="mD(this,event)"></div>
</div>
</body>
</html>