Highlight a specific DIV depending on URL

Question

I have a list of FAQs on, say, page faq.html like so:

<div id="faq1">...</div>
<div id="faq2">...</div>

I now want to pulsate or simply highlight one of those DIVs when I send a visitor there through a specific URL. Say on my checkout page I have a link saying "Find help here" and it's linked to #faq2.

How can I trigger a simple highlight animation (pulsate/blink) in the background on the FAQ Div element through adding a trigger in the URL like so:

http://www.test.com/faq.html?highlight=faq2

Lucas Green · Accepted Answer · 2012-08-31T06:59:01.990

5

If you can ad a fragment to the URL you can use the CSS :target pseudo-class.

http://jsfiddle.net/9yNVp/

HTML:

<a href="#see" id="see">See</a> <a href="#works" id="works">works</a> <a href="#well" id="well">well</a>

CSS:

a:target{
    transition:background-color 1s ease-in;
    -webkit-transition:background-color 1s ease-in;
    -moz-transition:background-color 1s ease-in;
    background-color: yellow;
}

edited Aug 31 '12 at 06:59

answered Aug 31 '12 at 06:51

Lucas Green

3,951
22
27

Thanks! How would you execute that? – Kai Brach Aug 31 '12 at 06:55

score 0 · Answer 2 · answered Aug 31 '12 at 06:52

for highlighting it you can do this

var Blinkcnt = 0;
function BlinkDiv(DivId) {
    if (Blinkcnt % 2 == 0) {
        $('#' + DivId).animate({ backgroundColor: "#E1E1E1" }, 500);
        Blinkcnt += 1;
    }
    else {
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
        Blinkcnt += 1;
    }
    if (Blinkcnt < 10) {
        setTimeout(function () {
            BlinkDiv();
        }, 500);
    }
    else {
        Blinkcnt = 0;
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
    }
}

score 0 · Answer 3 · edited Aug 31 '12 at 06:56

0

You can use this using the CSS :target selector (so to target faq2 only when the fragment is #faq2, use faq2:target { ... } ).

Also to animate it, look into CSS3 transitions and keyframes.

edited Aug 31 '12 at 06:56

Rohit Azad Malik

31,410
17
69
97

answered Aug 31 '12 at 06:52

Jonathon Ashworth

1,182
10
20

score 0 · Answer 4 · answered Aug 31 '12 at 07:01

$(function() {
    var params = window.location.href.split('?')[1].trim().split('&');
    var location = '';

    for( var i=0; i<params.length; i++ ) {
        var pair = params[i].split('=');
        location = pair[0] ==='highlight' ? pair[1] : '';
    }

    if ( location ) {
        $('#'+location).effect("highlight", {}, 3000);
        // or $('#'+location).effect("pulsate", { times:3 }, 2000);
    }
});

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

Using these jQuery UI effects requires you to include the jQuery UI source — nbrooks, Aug 31 '12 at 07:06

Highlight a specific DIV depending on URL

4 Answers4

Linked