Let's say you have to scan a web page to find words matching those in a Glossary (that is continuously updated to provide descriptions for keywords), highlight them and show a brief explanation of the term as a tooltip when the mouse hovers over it. This article shows a jQuery approach to handle the scenario.
Most of the functionality in the solution described will be accomplished using jQuery functions and a jQuery Plugin.
jQuery is a "JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development". Created by John Resig, it has grown by leaps & bounds with help from the web development community. A jQuery Plugin is a way of packaging reusable code by leveraging jQuery's extensible architecture. Using a jQuery Plugin is just a matter of including an external JavaScript file. As the Plugin is dependent on jQuery we have to call it after we have referenced the jQuery Library.
How it works
The job of scanning a web page to find words matching those in a Glossary and highlighting them will be done by a jQuery Plugin called SearchHighlight (in DynamicToolTip.html). You can get this SearchHighlight Plugin from it's home page on jQuery.info. This Plugin basically takes the list of words that we want to match and whenever it finds a matching word in a web page, it wraps the word within a SPAN tag and the style setting for the SPAN gives the highlighted effect. Next, in order to show a dynamic tooltip we will use the SPAN tag's TITLE attribute. The content for the TITLE attribute will be fetched asynchronously from the Glossary which is a dynamic web page that retrieves keyword descriptions from a data source. The Glossary page can be implemented as a Generic Handler (.ashx) or a simple .ASPX page that returns just the description of a keyword which is provided to it as a querystring value. jQuery makes DOM manipulation & AJAX interaction simple as you will see in the code below. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through the code.
jQuery is a "JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development". Created by John Resig, it has grown by leaps & bounds with help from the web development community. A jQuery Plugin is a way of packaging reusable code by leveraging jQuery's extensible architecture. Using a jQuery Plugin is just a matter of including an external JavaScript file. As the Plugin is dependent on jQuery we have to call it after we have referenced the jQuery Library.
How it works
The job of scanning a web page to find words matching those in a Glossary and highlighting them will be done by a jQuery Plugin called SearchHighlight (in DynamicToolTip.html). You can get this SearchHighlight Plugin from it's home page on jQuery.info. This Plugin basically takes the list of words that we want to match and whenever it finds a matching word in a web page, it wraps the word within a SPAN tag and the style setting for the SPAN gives the highlighted effect. Next, in order to show a dynamic tooltip we will use the SPAN tag's TITLE attribute. The content for the TITLE attribute will be fetched asynchronously from the Glossary which is a dynamic web page that retrieves keyword descriptions from a data source. The Glossary page can be implemented as a Generic Handler (.ashx) or a simple .ASPX page that returns just the description of a keyword which is provided to it as a querystring value. jQuery makes DOM manipulation & AJAX interaction simple as you will see in the code below. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through the code.
DynamicToolTip.html
<html>
<head>
<title>Dynamic Tooltips</title>
<script src="js/jquery.js" temp_src="js/jquery.js" type="text/javascript"></script>
<script src="js/SearchHighlight.js" temp_src="js/SearchHighlight.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
function(){
var options = {
exact:"exact",
style_name_suffix:false,
keys:"Firebug, YSlow, neXpert"
}
$(document).SearchHighlight(options);
$(".hilite").hover(
function (){
var selWord=$(this).text();
var wrd = this;
$.get("glossary.aspx", { q: selWord},
function(data){
$(wrd).attr("title",data);
});
},
function(){ }
)
});
</script>
<style type="text/css">
.hilite
{
background-color: yellow;
cursor: help;
}
</style>
</head>
<body>
<div>
Use tools like FireFox Firebug addon YSlow or the Fiddler add-on neXpert, to analyze
web pages and identify why they're slow.
</div>
</body>
</html>
<head>
<title>Dynamic Tooltips</title>
<script src="js/jquery.js" temp_src="js/jquery.js" type="text/javascript"></script>
<script src="js/SearchHighlight.js" temp_src="js/SearchHighlight.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
function(){
var options = {
exact:"exact",
style_name_suffix:false,
keys:"Firebug, YSlow, neXpert"
}
$(document).SearchHighlight(options);
$(".hilite").hover(
function (){
var selWord=$(this).text();
var wrd = this;
$.get("glossary.aspx", { q: selWord},
function(data){
$(wrd).attr("title",data);
});
},
function(){ }
)
});
</script>
<style type="text/css">
.hilite
{
background-color: yellow;
cursor: help;
}
</style>
</head>
<body>
<div>
Use tools like FireFox Firebug addon YSlow or the Fiddler add-on neXpert, to analyze
web pages and identify why they're slow.
</div>
</body>
</html>
The jQuery Library can be downloaded from it's home page.
The SearchHighlight(options) function has a number of configuration options but we will be using just three, the important one being "keys" which allows us to explicitly set the words to be searched for. To keep the code simple, only 3 words "Firebug, YSlow, neXpert" are used but in a realistic scenario it can include as many words as there are in a moderate-sized Glossary.
hilite is the name of the class for the SPAN element that wraps the words to be highlighted.
The hover event is used to generate dynamic tooltip. When user moves his mouse over a highlighted word [ let's say, Firebug ], that word is captured [ var selWord=$(this).text(); ] and sent to glossary.aspx as a querystring [ glossary.aspx?q=Firebug ] via the jQuery .get() function. The description that is returned back by glossary.aspx is fetched by the callback function which is the third argument of .get(). The jQuery .attr() function assigns the fetched description to the TITLE attribute of the SPAN tag. As a result when you hover your mouse over a highlighted word, you will see it's equivalent description. This is how the HTML for the dynamically rendered element will look after the hover event has done it's job -
<span title="The Firebug extension for Mozilla Firefox allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other Web development tools." class="hilite">Firebug</span>
For the sake of the demo, the code for the Glossary page that is referred earlier could look something like this -
Glossary.aspx
The SearchHighlight(options) function has a number of configuration options but we will be using just three, the important one being "keys" which allows us to explicitly set the words to be searched for. To keep the code simple, only 3 words "Firebug, YSlow, neXpert" are used but in a realistic scenario it can include as many words as there are in a moderate-sized Glossary.
hilite is the name of the class for the SPAN element that wraps the words to be highlighted.
The hover event is used to generate dynamic tooltip. When user moves his mouse over a highlighted word [ let's say, Firebug ], that word is captured [ var selWord=$(this).text(); ] and sent to glossary.aspx as a querystring [ glossary.aspx?q=Firebug ] via the jQuery .get() function. The description that is returned back by glossary.aspx is fetched by the callback function which is the third argument of .get(). The jQuery .attr() function assigns the fetched description to the TITLE attribute of the SPAN tag. As a result when you hover your mouse over a highlighted word, you will see it's equivalent description. This is how the HTML for the dynamically rendered element will look after the hover event has done it's job -
<span title="The Firebug extension for Mozilla Firefox allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other Web development tools." class="hilite">Firebug</span>
For the sake of the demo, the code for the Glossary page that is referred earlier could look something like this -
Glossary.aspx
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(Object Src, EventArgs E)
{
string term = Request.QueryString["q"];
if (!String.IsNullOrEmpty(term))
{
switch (term.ToLower())
{
case "nexpert":
Response.Write(@"neXpert is a add-on to Fiddler similar to the YSlow add-on that integrates with Firebug on Firefox");
break;
case "yslow":
Response.Write(@"YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.");
break;
case "firebug":
Response.Write(@"The Firebug extension for Mozilla Firefox allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other Web development tools.");
break;
default:
Response.Write(@"blah blah");
break;
}
}
}
</script>
<script runat="server">
void Page_Load(Object Src, EventArgs E)
{
string term = Request.QueryString["q"];
if (!String.IsNullOrEmpty(term))
{
switch (term.ToLower())
{
case "nexpert":
Response.Write(@"neXpert is a add-on to Fiddler similar to the YSlow add-on that integrates with Firebug on Firefox");
break;
case "yslow":
Response.Write(@"YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.");
break;
case "firebug":
Response.Write(@"The Firebug extension for Mozilla Firefox allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other Web development tools.");
break;
default:
Response.Write(@"blah blah");
break;
}
}
}
</script>
Glossary.aspx is an inline .ASPX (ASP.NET 2.0) page with the HTML block removed. In a real-life scenario, the description of a keyword passed as a querystring value would be retrieved by querying a data source. Keyword descriptions could be updated or new ones added and this technique can still get the freshest tooltip content dynamically without much processing on the server side. All the major action happens on the client-side with just a few lines of code, thanks to the power of jQuery!
No comments:
Post a Comment