jQuery: onClick event not showing div

Question

bsewell 0 Junior Poster in Training

14 Years Ago

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

javascript jquery

2 Contributors
7 Replies
143 Views
23 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by hielo

hielo 65 Veteran Poster

14 Years Ago

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.

hielo 65 Veteran Poster

14 Years Ago

, 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!

Reply to this topic

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.

bsewell 0 Junior Poster in Training · Answer 1 · 2010-08-27T14:28:40+00:00

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>

bsewell 0 Junior Poster in Training · Answer 2 · 2010-08-27T21:04:33+00:00

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?

hielo 65 Veteran Poster · Answer 3 · 2010-08-27T21:05:17+00:00

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>

bsewell 0 Junior Poster in Training · Answer 4 · 2010-08-28T00:48:44+00:00

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? :)

hielo 65 Veteran Poster · Answer 5 · 2010-08-28T00:56:24+00:00

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