Skip to content

Instantly share code, notes, and snippets.

@jonahlyn

jonahlyn/definition_lookup.html

Created April 15, 2010 19:31
Show Gist options
  • Save jonahlyn/367533 to your computer and use it in GitHub Desktop.
Save jonahlyn/367533 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
definition_lookup.html
<!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" xml:lang="en" lang="en">
<head>
<title>Tool-Tip Experiment with Definition List</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
body { font: 16px "Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; }
#tip {
background-color: #CCC;
border: 1px solid #333;
color: #333;
font-family: sans-serif;
font-size: 12px;
padding: 3px;
position: absolute;
width: 150px;
z-index: 9999;
}
#tip p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>A Word Glossary Experiment</h1>
<p>
Hover over the word
<a class="lookup" href="definitions.html#monday">Monday</a>,
<a class="lookup" href="definitions.html#tuesday">Tuesday</a>,
<a class="lookup" href="definitions.html#wednesday">Wednesday</a>,
<a class="lookup" href="definitions.html#thursday">Thursday</a>,
<a class="lookup" href="definitions.html#friday">Friday</a>,
<a class="lookup" href="definitions.html#saturday">Saturday</a>, or
<a class="lookup" href="definitions.html#sunday">Sunday</a>,
to see its definition.
</p>
<p>
Hover over the word <a class="lookup" href="definitions.html#test">test</a> to see its definition.
</p>
</body>
</html>
Raw
gistfile2.js
$(function(){
var tipdata = new Array();
$('.lookup').mouseover(function(e){
tipdata = $(this).attr('href').split('#');
$('<div id="tip"></div>').hide()
.appendTo('body')
.load(tipdata[0] + " #" + tipdata[1] + "+dd p")
.css({ 'top':e.pageY+10, 'left':e.pageX+20 })
.fadeIn('fast');
}).mousemove(function(e){
$('#tip').css({ 'top':e.pageY+10, 'left':e.pageX+20 });
}).mouseout(function(e){
$('#tip').fadeOut('50000').remove();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment