JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old February 2nd, 2005, 11:01 AM
RobT RobT is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2005
Posts: 7 RobT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 2 m 38 sec
Reputation Power: 0
Exclamation Setting the position of a Div, using Javascript

Hi,

I've been looking into this, and having a few problems, I'm trying to position a hidden div to
appear at an offset from where I clicked. Is it possible to set the position relative to the mouse click?

Any help on this would be excellent.

Cheers!

Reply With Quote
  #2  
Old February 2nd, 2005, 12:19 PM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
Try something like this:
Code:
<html>
<head>
<title>Navigation List Example</title>
<style type="text/css">
ul {
	margin:0;
	padding:0 0 10px 0;
	width: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	color: #333333;
	list-style: none;
}

ul li {
	margin-bottom: 2px;
	padding: 2px;
	text-align: center;
}

ul li a {
	color: #FFFFFF;
	display: block;
	background-color: #727272;
	border: medium solid #333333;
	text-decoration: none;
	vertical-align: middle;
}

ul.submenu {
	margin-top: 10px;
}
ul.submenu li a {
	background-color: #fff;
	border: 0;
	color: #666;
	font-size: 12px;
	height: 18px;
}
</style>
<script type="text/javascript">
function moveIt(obj, mvTop, mvLeft) {
	obj.style.position = "absolute";
	obj.style.top = mvTop;
	obj.style.left = mvLeft;
}
</script>
</head>

<body>
<h1>Navigation List Example</h1>
<input type="button" value="move!" onclick="moveIt(document.getElementById('move'),'250px','30  0px')" />
<ul id="move">
	<li><a href="index.php?menu=home_m">Home</a></li>
	<li><a href="news.php?menu=news_m">News</a></li>
	<li><a href="info.php?menu=info_m">Info</a></li>
	<li><a href="services.php?menu=services_m">Services</a></li>
	<li><a href="contact_us.php?menu=contact_us_m">Contact Us</a></li>
	<li><a href="legal.php?menu=legal_m">Legal Links</a>
		<ul class="submenu">
			<li><a href="legal.php?menu=legal_m&page=terms_of_use">Terms of Use</a></li>
			<li><a href="legal.php?menu=legal_m&page=privacy_policy">Privacy Policy</a></li>
		</ul>

	</li>
</ul>

</body>
</html>

I based this on an example I posted yesturday to help someone else with a different problem...
I feel it answers the question "How do i set the div position with Javascript"
If you need help getting the mouse position, try Google'ing...
I didn't want to give you a full working solution as the discovery is half the fun =)

Reply With Quote
  #3  
Old February 3rd, 2005, 06:55 AM
RobT RobT is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2005
Posts: 7 RobT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 2 m 38 sec
Reputation Power: 0
Thanks for the help MadCowDzz, much appreciated.

I've got one further quick question, I've managed to set the position of the image I'm trying to move. but in some browsers it doesn't move? is this due to the browsers declairing the pageX and pageY diffrently.

Reply With Quote
  #4  
Old February 3rd, 2005, 10:23 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
Which browser did it not work in?
I tested with IE 5.01, IE5.5, IE6, Opera 7.54, and Firefox

Reply With Quote
  #5  
Old February 3rd, 2005, 10:24 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
I just checked IE3 and IE4..
It doesn't work there... but then again, neither do 70% of all websites

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > Setting the position of a Div, using Javascript


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap