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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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^^