CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 5507

How to highlight current id element in HTML

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...

Upvotes: 4

Views: 3386

Answers (5)

Thorsten Staerk
Thorsten Staerk

Reputation: 1156

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.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

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>

Upvotes: 6

Bernhard Hofmann
Bernhard Hofmann

Reputation: 10391

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.

Upvotes: 0

Sacha
Sacha

Reputation: 2834

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

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

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>

Upvotes: 4

Related Questions