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!

Solution 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!

Solution 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.

Solution 3

On clicking you can change the colour of the div to red .css({ elements }), then wait 2 seconds .delay( time ) and animate back to the original colour .animate({ elements }, time, callback)

$(document).ready() {
    $('a[href^="#"]').click(function(){
        $('div.divs_class_or_id_name').css('border','solid 1px #ff0000').delay(2000).animate({
            border: 'solid 1px #000000'
        }, 500, function() {
            // animation complete
        });
    });
};

Solution 4

@Chris' pure CSS solution is great. The ~ did not work for me (probably it works with siblings only)

Here is a variant that is tested and works in 2021:

#targetdivid:target { /* i.e when this element is navigated to (from a link) */
   animation-name: ref-animation;
   animation-duration: 3s;
}
@keyframes ref-animation {
   from { background-color: #FFFFCC;     }  /* light yellow */
   to   { background-color: transparent; }  /* assuming original was transparent */
}

Solution 5

Something similar to the following.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#element").offset().top
    }, 2000);
    $("#element").animate({
        "background-color": "#FFFFCC"
    }).delay(2000).animate({
        "background-color": "#00FFFF" //original background color
    });
});

Make sure to include a jquery plugin that allows the animation of colors, such as http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js.

Although @praveen-kumar's :target solution seems nice, you could do it purely with a css3 animation I believe.

View more solutions

Comments

[Ashkan]

@Abody97 By plugin you mean jquery ? The question has jquery tag!

[Chris]

@Ashkan No, jQuery can't do color animations without a plugin.

[Ashkan]

how about $(...).css({"background-color": "#FFFFCC"}) ??

[jeremy]

@Abody97 I've updated my post, though I admit my answer isn't the best here, nice to have options.

[Ashkan]

I see your second option uses .css property. Good point about animation, I didn't know that.

[Jorge Leitao]

Are you sure animate works without jquery UI? See w3school

[Xenon]

The animate approach doesn't work for me. I am not using jQuery UI (just jQuery).

[Anupam]

The pure CSS solution (first) is great. The tilde (~) did not work for me - could use :target instead. See this answer.