Highlight Elements on a Page using jQuery

Here’s a simple way to highlight elements on a page using jQuery. This example uses the Highlight effect of the jQuery UI library

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>jQuery Highlight Elements - DevCurry.com</title>
<
script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js">
</
script>
<
script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js">
</
script>
<
script type="text/javascript" language="javascript">
$(function () {
$("#btnHighlight").click(function () {
$("p.para").effect("highlight", {}, 4000);
});
});
</script>
</
head>
<
body>
<input id="btnHighlight" type="button"
value="Highlight Para 1 and 3" /><br /><br />
<
p id="para1" class="para">This is Para 1. This is Para 1.
This is Para 1.This is Para 1.This is Para 1.
</p>
<
p id="para2">This is Para 2. This is Para 2.
This is Para 2. This is Para 2. This is Para 2.
</p>
<
p id="para3" class="para">This is Para 3. This is Para 3.
This is Para 3. This is Para 3. This is Para 3.
</p>
</
body>
</
html>

As you can see, on the button click, we use the highlight effect on the paragraphs having the ‘para’ class. You can also checkout Click and Highlight Text in a TextBox using jQuery

image

See a Live Demo






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

1 comment:

Beben said...

we can paste the CSS code for p.para
thanks a lot my friend^^