Onmousedown Highlight DOM element

Question

EverWebby 1 Light Poster

14 Years Ago

Maybe someone can figure this out because I sure have been having problems with it. I am looking to have a javascript that can be included a page that can highlight or set a border for a the div, p, span, or img DOM element when clicked on. Now this element may or not have a element name or id. And also, the code on the individual objects do not have a onmousedown behavior.

Lets say for example there is this code.

<div class="HeaderLogo">
<div class="logo">Copyright © <?php echo date('Y'); ?> My Website All Rights Reserved.<br />
<img src="../images/template_2/website-logo.png" alt="MY Website - CMS" width="413" height="51" />
</div>
</div>

<div class="CenterWidth">
<div class="TopMainNav">
<p>My First Sentence Text</p>
<p>jhdasfhjklas</p>

</div>

</div>

And in the browser, I wanted mousedown on a section of a page and highlight the parent object. Suppose I moused-down on 'My First Sentence Text', its parent would be that p tag. Is there a way I could reference that p tag so that I could highlight it with a border. Granted, this would be a no brainer if that p tag already have an id and name, but in this it does not. Does anyone have any ideas on this?

Thanks In Advance!

javascript

Edited 14 Years Ago by EverWebby because: n/a

2 Contributors
8 Replies
207 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by hielo

hielo 65 Veteran Poster

14 Years Ago

read comments in the code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
			//the example below will select all the "P" tags within <div class="TopMainNav">
			//if you want ANY tag within <div class="TopMainNav">
			//then use $(".TopMainNav *")
			//if you do NOT want to restrict it to <div class="TopMainNav">
			//then use:
			//$("body *")
			$(".TopMainNav > p").bind('mousedown',function(event){event.stopPropagation();	$(this).css("background-color","beige");})
							.bind('mouseup',function(event){event.stopPropagation(); $(this).css("background-color","");})
		});
		</script>
	</head>
	<body>
<div class="HeaderLogo">
<div class="logo">Copyright &copy; 2010 My Website All Rights Reserved.<br />
<img src="../images/template_2/website-logo.png" alt="MY Website - CMS" width="413" height="51" />
</div>
</div>

<div class="CenterWidth">
<div class="TopMainNav">
<p>My First Sentence Text</p>
<p>jhdasfhjklas</p>

</div>

<div class="ContentArea">Text</div>


<br style="clear:both;" />

</div>	
	</body>
</html>

hielo 65 Veteran Poster

14 Years Ago

but I was unable to come up with that using $(this).id

The $() is jQuery function, so you cannot use $(this).id because "id" is a property of the DOM node, but $(...) does NOT return a DOM node - it returns a jQuery object. On the example above, "this" refers to a DOM node, so if you want the id of the DOM node, you can use either the DOM reference approach:

this.id ( and to get the html use this.innerHTML )

OR the jQuery reference approach:

$(this).attr("id")  ( and to get the html use $(this).html() )

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.

EverWebby 1 Light Poster · Answer 1 · 2010-07-31T02:54:33+00:00

Thanks, I plugged it in. Good stuff. After reading your comments, I tried it both ways. One with the * and without. I see it refers to the $(this) often, so I figured that I could grab the innerHTML of the object by addressing the object ID, but I was unable to come up with that using $(this).id. I would like to be able to take each elements content and put it in a puppeted form, edit it and send it back to the document. Any ideas?

EverWebby 1 Light Poster · Answer 2 · 2010-08-03T16:24:33+00:00

Yes, but can use the this.id in javascript without having a physical event tag on the object itself. What I am ultimately trying to do is use one onmousedown behavior to listen for clicks on an object within the dom tree. So, if the user clicked on a paragraph tag or another other tag for that matter, that I could access those contents by using a objectIdentier.innerHTML to grab those contents. Those contents would then be put into a puppetted form element for editing. When the user updates, it would just replaces the innerHTML of that page. This would all happen without leaving the page or submitting to a server. I have tried referencing the ids, but that does not seem to work as every element on the page does not have an id. I have tried iterating the treenodes, but that attempt failed.

EverWebby 1 Light Poster · Answer 3 · 2010-08-03T17:55:07+00:00

Nevermind I solved it. I appreciate your assistance.

hielo 65 Veteran Poster · Answer 4 · 2010-08-03T19:49:05+00:00

What I am ultimately trying to do is use one onmousedown behavior to listen for clicks on an object within the dom tree.

That's what I gave you above. Within the anonymous callback function, "this" is a reference to the node you clicked on. So this.id will give you the id of that element IF it has one. But even if it does not have one, you can still get it's html content via this.innerHTML. You can even set up some function and pass a reference to "this" and have that function do whatever you need it to do that element/node.

<script type="text/javascript">
		$(function(){
			//the example below will select all the "P" tags within <div class="TopMainNav">
			//if you want ANY tag within <div class="TopMainNav">
			//then use $(".TopMainNav *")
			//if you do NOT want to restrict it to <div class="TopMainNav">
			//then use:
			//$("body *")
			$(".TopMainNav > p").bind('mousedown',function(event){event.stopPropagation();	doSomething(this,'down'); $(this).css("background-color","beige");})
						.bind('mouseup',function(event){event.stopPropagation(); doSomething(this,'up');$(this).css("background-color","");})
		});

		function doSomething( node, m )
		{
			alert( "mouse:" + m + "\nhtml:" + node.innerHTML);
		}
		</script>

You don't need an id on the element if you have access to the element via "this".

EverWebby 1 Light Poster · Answer 5 · 2010-08-03T21:32:37+00:00

Wow, I did not see it that way. I ended up hardcoding all that.

hielo 65 Veteran Poster · Answer 6 · 2010-08-03T23:49:07+00:00

Wow, I did not see it that way. I ended up hardcoding all that.

Sorry, I thought it was clear from my previous post when I said to use either the jquery approach or the DOM node reference approach. Glad to help.

PS: Be sure to mark the question as solved.

Regards,
Hielo