Member Avatar for Potato.Head

Hi to all, I have the follwoing challenge:
I need to set floating elements in a document and its position should be relative to another element in the document. I'll explain, lets says I have the below document, an html page with an image, I need to set the position of the DIV element "10,10"(x, y), relative to the image(or another element), is this posible to do?
In the below example I can create a floating DIV, but I don't know how to get the x and y of the element and then set the floating DIV relative to it.
Thanks in advanced

<html>
<head>
</head>
<body>
<img id="myPic" src="web.gif" width="50" height="50"/>
<div id="floatdiv" style="  position:absolute;  width:200px;height:50px;left:50px;top:50px;  
padding:16px;background:#FFFFFF;  border:2px solid #2266AA">  
This is a floating DIV  
</div>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 111 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by mschroeder
Member Avatar for mschroeder

Here is a quick jQuery example, the alert shows the top and left position of the image. It also gives you a chance to actually see the javascript set the new position. Let me know if you need any more explanation. You can also check out the documentation for .position() and .css() in the jQuery documentation

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var img = $('#myPic');
	var pos = img.position();
	alert( 'Image Top: ' + pos.top + ' Left: ' + pos.left );
	$('#floatdiv').css({'top' : pos.top + 25 + 'px', 'left' : pos.left + 25 + 'px'});
});
</script>
</head>
<body>
<img id="myPic" src="web.gif" width="50" height="50" style="top:100px;left:100px;position:absolute;"/>
<div id="floatdiv" style="position:absolute;width:200px;height:50px;padding:16px;background:#FFFFFF;  border:2px solid #2266AA">  
This is a floating DIV  
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.