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...
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...
Share Improve this question asked Apr 30, 2013 at 12:09 Vaibhav JainVaibhav Jain 5,51710 gold badges57 silver badges115 bronze badges 7-
What is
.effect()method? – Artyom Neustroev Commented Apr 30, 2013 at 12:13 - yes i know it is wrong....i tried something i found on net... – Vaibhav Jain Commented Apr 30, 2013 at 12:14
- 2 @ArtyomNeustroev I'm guessing it's jqueryui./effect – Richard Dalton Commented Apr 30, 2013 at 12:14
- @ArtyomNeustroev is it this: docs.jquery./UI/Effects/Highlight – 97ldave Commented Apr 30, 2013 at 12:15
- 1 Are you including jquery UI? – A. Wolff Commented Apr 30, 2013 at 12:15
5 Answers
Reset to default 6Yes 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>
You have to include jquery UI after you have included jquery itself:
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
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/en-US/docs/css/%3Atarget
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./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.
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.