0

Hi all,
basicly, I'm writing some code so that when a user clicks on an image, a div will be displayed where the user has clicked. My jQuery code isn't working, so wondered if anybody knew how to fix it. All of this is in my document.ready() function.

$("img.image").click(function(e){
					 $("#div.marker").attr("id","marker" + count);
					 alert($("div.marker").attr("id")));
					 $("div.id").appendTo("div#map");
					 $("div.id").css("left",e.pageX).css("top",e.pageY);
					 $("div.id").show();
					});

Thanks in advance

2
Contributors
7
Replies
8
Views
6 Years
Discussion Span
Last Post by hielo
0

It's hard to help you without seeing the relevant HTML markup associated with your jquery statements, but I can tell you that

$("#div.marker")

looks "suspicious". That implies that you have some element with id="div" and a class="marker" - for example:

<div id="div" class="marker">...</div>

If the div in question does NOT have id="div" , then get rid of the leading "#" symbol.

0

Hi,
thanks for the reply.

Yeah, I got rid of the # before the div. Basicly, I want an unlimited amount of div's to appear on the page- as the user can click more than once on the image. Here's the rest of my code, I've ommitted the bits which are not relevent to this problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
        <style type="text/css">
			.marker
			{
				background-color:#0066FF;
				height:32px;
				width:32px;
				z-index:4;
			}
			
			#map
			{
				position:absolute;
				top:250px;
				left:0px;
				width:100%;
				height:auto;
				z-index:0;
			}
        </style>
     
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
 $(document).ready(function(){
				var count=1;

				$("img.image").click(function(e){
					 $("div.marker").attr("id","marker" + count);
					 alert($("div.marker").attr("id")));
					 $("div.id").appendTo("div#map");
					 $("div.id").css("left",e.pageX).css("top",e.pageY);
					 $("div.id").show();
					});
            });
        </script> 
</head>
    <body>
<div id="map"><center><img src="worldDotMap.png" height="429" width="900" alt="World" class="image" id="world" /></center>
</div>
    </body>
</html>
0

, I've ommitted the bits which are not relevent to this problem.

Does the omitted code have the <div class="marker"> ? What you posted does not make sense given $("div.marker").attr("id","marker" + count); since no where on your code do see a div the class="marker" which seems to be the cornerstone of your code!

0

Well what I'm trying to do is for the "marker" div to only show up when the user has clicked on the map. I want multiple instances of the "marker" div, which will all be given there own identifier (Marker 1, Marker 2 etc). They will all have the same properties as defined in the marker class. Would that mean that the amount of "marker" div's I have be limited?

0

This is probably what you seek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
        <style type="text/css">
			.marker
			{
				background-color:#0066FF;
				height:32px;
				width:32px;
				z-index:4;
			}
			
			#map
			{
				position:absolute;
				top:250px;
				left:0px;
				width:100%;
				height:auto;
				z-index:0;
				text-align:center;
			}
        </style>
     
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
 $(document).ready(function(){
				var count=1;

				$("img.image").click(function(e){
					 var div=$("<div class='marker'></div>").attr("id","marker" + count)
					 								.css("left",e.pageX)
													.css("top",e.pageY)
													.show()
					 								.appendTo("div#map");
					 alert( div.attr("id") );
					});
            });
        </script> 
</head>
    <body>
		<div id="map"><img src="worldDotMap.png" height="429" width="900" alt="World" class="image" id="world" /></div>

    </body>
</html>
0

It works. One minor problem through: wherever I click on the image, the div always ends up at the bottom left of the page instead of the actual location of the mouse click. Any ideas on this minor issue? :)

0

you need to capture the x-y coordinates of the mouse. Search for "mouse x y coordinates" in google.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.