How to highlight content in HTML?

Question

I have create link on same page . the content of this page is in the bottom and the anchor tab is on the top.

I would like to highlight the content area for 5 seconds when someone clicks on the top link (ancho).

Could you be more descriptive with your problem? What do you mean by "content" is it an element, or just text inside an element? — Belladonna, May 21 '12 at 15:33

score 3 · Answer 1 · answered May 21 '12 at 15:35

3

Take a look at jQuery and the Effects-Plugin.

http://docs.jquery.com/UI/Effects/Highlight

answered May 21 '12 at 15:35

android

652
9
28

@little big rot and Roko C.buljan i mean text inside an element – sajal00 May 21 '12 at 15:37

score 1 · Answer 2 · answered May 21 '12 at 15:39

You can do it in very many ways, for example binding onHashChange and then changing background color:

$(window).bind('hashchange', function(){
    $(".highlight").css("background","#AFA");
    setTimeout(function(){
        $(".highlight").css("background","transparent");
    },5000);
});

http://jsfiddle.net/X8kBj/1/

score 0 · Answer 3 · answered May 21 '12 at 15:38

0

Give each piece of content a unique id as follows:

<div id="content_1"> ... </div>

Then use jQuery to set up events for each link:

$("div").delegate("#content_1", "click", function() {
  $('div.content_1').effect("highlight", {}, 3000);
});

Or you could use .on() or .live() but you get the idea.

answered May 21 '12 at 15:38

Ian Atkin

6,302
2
17
24

2

Better to use `.on()` and to [not use `.live()`](http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate). – PeeHaa May 21 '12 at 15:38

score 0 · Answer 4 · answered May 21 '12 at 15:42

0

use delay()

$('#id-of-anchor').click(function(){

 $("#your-div").css('background','red').delay(5000).css('background','transparent');
 return false;    

});

answered May 21 '12 at 15:42

Kanishka Panamaldeniya

17,302
31
123
193

How to highlight content in HTML?

4 Answers4