DevCurry: 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

See a Live Demo

Highlight Elements on a Page using jQuery

1 comment: