CODEWITHSUNDEEP
jqueryhtmlcss
Kai Brach
Kai Brach

Reputation: 9

Highlight a specific DIV depending on URL

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

Upvotes: 0

Views: 1097

Answers (4)

nbrooks
nbrooks

Reputation: 18233

$(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

Upvotes: 0

Lucas Green
Lucas Green

Reputation: 3959

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

Upvotes: 5

Jonathon Ashworth
Jonathon Ashworth

Reputation: 1114

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.

Upvotes: 0

rahul
rahul

Reputation: 7663

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

Upvotes: 0

Related Questions