4

I want to highlight current '#id' fragment:

Like if the URL is : http://localhost:4321/store/zapakshop/#943

then id=943 should be highlighted..

I have tried this but it is not working:

$(document).ready(function () {
    $(window.location.hash).effect("highlight", {
        color: "#FF0000"
    }, 3000);       
    });

Help me...

7

5 Answers 5

6

Yes it is working but it is changing the color permanently i just want a flash... – user2217267

Snook has a nice example of doing this with CSS3. Here is a working example, adapted from that page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css" media="all">
:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
</style>

</head>

<body>
<p>Click the link to <a href="#goal">target the div</a>.


<div id="goal">This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. </div>

</body>
</html>
4

You have to include jquery UI after you have included jquery itself:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
3
  • This is the only sensible answer here, +1 Commented Apr 30, 2013 at 12:19
  • This highlights the full URL, the requirement is just to highlight 943
    – Bryan
    Commented Apr 30, 2013 at 12:21
  • Now console is showing this error Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); } has no method 'isPlainObject' Commented Apr 30, 2013 at 12:23
2

You might use the target pseudo class in your CSS. This highlights the element with the ID that's currently present as a hash on the URL.

*:target {
    background-color: yellow;
}

MDN: https://developer.mozilla.org/en-US/docs/css/%3Atarget

0

If you're just applying style to the element with the same ID as the hash in your URL, you can do that via the target pseudo selector:

:target {
   color:#f00;
}

Source: http://css-tricks.com/almanac/selectors/t/target/

Sacha beat me to it, but I'll leave my link to the CSS tricks article that explains this pseudo selector so well.

2
  • Yes it is working but it is changing the color permanently i just want a flash... Commented Apr 30, 2013 at 12:46
  • Do you know whether the browsers you need to support are capable of transitions? See caniuse.com/#feat=css-transitions Commented May 1, 2013 at 16:21
0

I did that using

document.getElementById(id).style.outline = 'red solid 3px';

this works for all elements that have an outline (like a textarea). If you want to flash this up for 100 ms, your next line can be:

window.setTimeout(unoutline, 100);

and you will define a function unoutline like this:

function unoutline()
{
  document.getElementById(id).style.outline = '';
}

You can see the code in action on http://www.staerk.de/regex.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.