CODEWITHSUNDEEP
jqueryhtmlcssclassonclick
nxet
nxet

Reputation: 738

Highlighting a div when anchor is clicked

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!

Upvotes: 14

Views: 11755

Answers (5)

Anupam
Anupam

Reputation: 15610

@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 */
}

Upvotes: 1

Chris
Chris

Reputation: 26878

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!

Upvotes: 10

jeremy
jeremy

Reputation: 10057

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.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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.

Upvotes: 10

Eruant
Eruant

Reputation: 1846

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
        });
    });
};

Upvotes: 2

Related Questions