Making OnClick do a Google search

evil-monkey · 13-09-2011 2:49pm #1

Hi all,

Is there any way I can get the following to work. I want to create an OnClick for each word in some html text so that when you click on that word, it is Googled.

For example:

Mary had a little lamb,
Whose fleece was white as snow...

I want to be able to have someone click on Mary, and the word be then opened as a search term in Google. Would OnClick facilitate this?

Thanks in advance.

Webmonkey · 13-09-2011 3:26pm

Is it for every single word or just some. Can you place span tags around the words you need. Then with document.onmouseup, you may be able to get the element then that was clicked.

For example..

onmousedown="TryGoogleSearch(event)"
...

function TryGoogleSearch(event){
    var word = event.srcElement.innerHTML;
    window.location = "http://www.google.co.uk/search?ie=UTF-8&q="+word;
}
..
...
<p>My paragraph. <span>word1</span> <span>word2</span></p>

I've not tested this! But maybe something along those lines? Of course you'd want to make sure there is actually a word to be searched and you not clicking some other area of your site. Maybe use a regular expression.

Maybe you could automatically surround all words within a paragraph or div with spans with PHP or even javascript during the onload.

Its been a while with web dev for me

Giblet · 13-09-2011 3:27pm

<div id="words">
	<span>Mary</span> <span>had</span> <span>a</span> <span>little</span> <span>lamb</span> 
	</div>
	<script>
		var words = document.getElementById('words');
		var fn = function(e){
			var tgt = e.target ? e.target : e.srcElement;
			if(tgt.tagName === 'SPAN'){
				alert(tgt.innerHTML);
			}
		}
		if (words.addEventListener) {
			words.addEventListener ("click",fn,false);			
		} 
		else if (words.attachEvent) {
			words.attachEvent ("onclick",fn);					
		} 
		else {
			el.onclick = fn;		
		}
	</script>

Giblet · 13-09-2011 3:28pm

Damn you web monkey!

evil-monkey · 13-09-2011 3:54pm

Thanks all.

So, right, this is what I have now...where is my foolish mistake?

<!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>Untitled Document</title>

<script>    
function TryGoogleSearch(event){
    var element
    element=event.srcElement.tagName
    var word = element.innerHTML;
    window.location = "http://www.google.co.uk/search?ie=UTF-8&q="+word;
}
</script>
</head>

<body>
<p><strong>Nightpiece, by James Joyce</strong></p>

<p><span>Gaunt</span> in <span>gloom</span><br />
  The <span>pale</span> <span>stars</span> their <span>torches</span>,<br />
  <span>Enshrouded</span>, <span>wave</span>.<br />
  <span>Ghostfires</span> from heaven's far <span>verges</span> faint <span>illume</span>,<br />
  Arches on soaring arches,<br />
  Night's <span>sindark</span> <span>nave</span>.<br />
</p>
</body>
</html>

seamus · 13-09-2011 3:57pm

Boards.ie had a slightly similar facility a few years ago where you could double-click on a word and it would google for it.

It took advantage of the fact that when you double-clicked on a word, the browser would highlight that word. Then you add a handler into the ondblclick event and grab the active piece of text and fire that into Google.

An alternative I found was a handler in the onmouseup event. This checks to see if there is active text, and if so it can google it. The advantage here is that a user can double-click a single word, or hightlight a section of text and the site will automatically search it.

From what I recall though, it was removed from boards.ie because there's one obvious problem - if someone double-clicks on a word for the purposes of highlighting it or copying it, then they may not want a search window to open.

So you could go a step further and add a context menu giving the user an option to search google, copy the text, etc, rather than doing something by default.

Webmonkey · 13-09-2011 3:59pm

It was my mistake originally. I edited my function above.

By the way you also need something like this...
<body onmousedown="TryGoogleSearch(event)">

Hope it works...

evil-monkey wrote: »

Thanks all.

So, right, this is what I have now...where is my foolish mistake?

<!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>Untitled Document</title>

<script>    
function TryGoogleSearch(event){
    var element
    element=event.srcElement.tagName
    var word = element.innerHTML;
    window.location = "http://www.google.co.uk/search?ie=UTF-8&q="+word;
}
</script>
</head>

<body>
<p><strong>Nightpiece, by James Joyce</strong></p>

<p><span>Gaunt</span> in <span>gloom</span><br />
  The <span>pale</span> <span>stars</span> their <span>torches</span>,<br />
  <span>Enshrouded</span>, <span>wave</span>.<br />
  <span>Ghostfires</span> from heaven's far <span>verges</span> faint <span>illume</span>,<br />
  Arches on soaring arches,<br />
  Night's <span>sindark</span> <span>nave</span>.<br />
</p>
</body>
</html>

evil-monkey · 13-09-2011 4:03pm

Where do I place onmousedown="TryGoogleSearch(event)" ??

Giblet · 13-09-2011 4:04pm

That won't work in Firefox though.

Giblet · 13-09-2011 4:07pm

<!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>Untitled Document</title>
<style>
#words span {
	background-color:#ffff00;
	cursor:pointer;
}
</style>
</head>

<body>
<p><strong>Nightpiece, by James Joyce</strong></p>

<p id="words"><span>Gaunt</span> in <span>gloom</span><br />
  The <span>pale</span> <span>stars</span> their <span>torches</span>,<br />
  <span>Enshrouded</span>, <span>wave</span>.<br />
  <span>Ghostfires</span> from heaven's far <span>verges</span> faint <span>illume</span>,<br />
  Arches on soaring arches,<br />
  Night's <span>sindark</span> <span>nave</span>.<br />
</p>
<script>
		var words = document.getElementById('words');
		var fn = function(e){
			var tgt = e.target ? e.target : e.srcElement;
			if(tgt.tagName === 'SPAN'){
				window.location = "http://www.google.co.uk/search?ie=UTF-8&q="+tgt.innerHTML;
			}
		}
		if (words.addEventListener) {
			words.addEventListener ("click",fn,false);			
		} 
		else if (words.attachEvent) {
			words.attachEvent ("onclick",fn);					
		} 
		else {
			el.onclick = fn;		
		}
	</script>
</body>
</html>

evil-monkey · 13-09-2011 4:14pm

That's working. Thanks to all.

Webmonkey · 13-09-2011 4:22pm

Sorry yeah wasn't aware that srcElement wasn't supported in Firefox. target is it's equivalent.

Reamer Fanny · 14-09-2011 2:25am

Would be better to show the results in a popup div? Rather then navigating to Google each time, I'm sure Google have some API that you could hook into fetch the results using jquery/Ajax then display them in an unordered list?

Making OnClick do a Google search

Comments