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
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>
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>
No comments :
Post a Comment