Moving the pin.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Moving the pin.

Post by JellyFish »

I'm trying to move this element I have with ID of "pin".

Code: Select all

<a href="" id="pin" onmousedown="return pin_onmousedown(event)" onclick="return false" style="position:absolute;">
<img src="images/Pin.png" border="0" />
</a>
With these functions in the head:

Code: Select all

function pin_onmousedown(e)
{
	if (document.getElementById("pin").style.left > 100)
	{
		document.getElementById("pin").style.left = 100;
	}
	else if (document.getElementById("pin").style.left < 40)
	{
		document.getElementById("pin").style.left = 40;
	}
	else
	{
		document.getElementById("pin").style.left = e.clientX - 6;
	}
	document.onmousemove = pin_onmousedown;
	document.onmouseup = pin_onmouseup;
	return false;
}
function pin_onmouseup()
{
	document.onmousemove = new Function("return false");
}
It's not doing what I want it to. I want the pin to move horizontally when clicked on, which it does. But then I want it to move only within certain boundaries which I set, which it doesn't.

I don't know what I'm doing wrong the code isn't doing what I commanded it to. It seems to make perfect sense when you look at the code, it's just not stopping at 40 and 100.

Thanks for reading my post. I'd appreciate any help on this matter.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

Code: Select all

   if (document.getElementById("pin").offsetLeft > 100) 
   { 
      document.getElementById("pin").style.left = 100; 
   } 
   else if (document.getElementById("pin").offsetLeft < 40) 
   { 
      document.getElementById("pin").style.left = 40;
   } 
   else 
   { 
      document.getElementById("pin").style.left = e.clientX - 6; 
   }
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Wow! This works. I was trying parseInt() because I found the .style.left returns something like: 100px. But this offsetLeft property is the $#!T!!! Thanks man.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

how cross browser are the offet* properties?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Yeah that's a good question???
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

I believe they apply to all conforming browsers today
Post Reply