Highlighting a div when anchor is clicked

Question

I found myself stuck with this:

I have an anchor link that points to an <a> inside a div, so the page scrolls all the way down to it.

Unfortunately, the div is at the bottom of the page, so usermost likely won't see it.

I thought a good way to solve this would be changing the class of the div when the link is clicked, for example switching the border color to red and then fade back to normal in 2 seconds.

I have no clue on how to do this. I Googled around and it seems this can be done with jQuery, but I really don't understand how to edit the scripts to my needs.

Thanks a lot!

Answer 1

Three choices:

First one - CSS3

Use this method if you don't really care about supporting all browsers. It's pure CSS, so that's an advantage. Here's an outline (includes multiple versions of rules for multiple browsers):

.youranchorsclass:active ~ #yourdivsid { /*when the anchor is active (clicked)*/
   -moz-animation: myanimation 1s;
   -webkit-animation: myanimation 1s;
   -o-animation: myanimation 1s;
   animation: myanimation 1s;
}
@-moz-keyframes myanimation, @-webkit-keyframes myanimation, @-o-keyframes myanimation, @keyframes myanimation {
   from { background: red; }
   to { background: white; /*or whatever it was originally*/ }
}

(If you want to get rid of all those ugly prefixed rules, take a look at PrefixFree).

Second one - jQuery

Use this if you do care about older-browsers support. Include jQuery in your page, to start with, by inserting this into your head:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type = "text/javascript"></script>

Then:

$(".yourlink").click(function() {
   $("#yourdivid").css("background", "red").delay(1000).css("background", "white");
};

Note that this jQuery method doesn't gradually change the color, you'd have to include a plugin (such as jQuery UI) to do so.

Third one - pure JavaScript

Use this if you don't want to include a relatively-huge library just for such a small effect. It's pretty straightforward, here's a commented outline to get you started:

function changeDivColor(color) {
    document.getElementById("yourdivid").style.backgroundColor = color;
}
document.getElementById("youranchor").onClick = function() { //when the anchor is clicked
    changeDivColor("red"); //chang the div color to red
    setTimeout(function() { //wait 1000 milliseconds (1s) -- see below
        changeDivColor("white"); //then change it back to white
    }, 1000);
};

Hope that helped in any manner!

Answer 2

Yes, you can do the Yellow Fade Trick in two ways:

Using the :target pseudo class:

<section id="voters"> 
   Content
</section>

Respective CSS

:target {
   background: yellow;
}

Using Yellow Fade Technique

In the click function, if you have, you can do this way:

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).effect("highlight", {}, 1500);
});

Or using animate():

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).animate({"background-color": "#ffc"}).delay(2000).animate({"background-color": "transparent"});
});

Fiddle: http://jsfiddle.net/HnERh/

PS: For using effect(), You need to have these two JS: effects.core.js and effects.highlight.js.