Highlighting a section of a web page the way SO does with inbox links

Go To StackoverFlow.com

2

I want to have a fade-in/fade-out highlight color for a section of a web page that was jumped to following a link that was formatted like <a href="sectiongoto">Link</a>, where sectiongoto identifies a name/ID element.

This would work in the same way as clicking on a Stack Overflow inbox link indicating that you have a new message. When you are navigated/jumped-to the post in question, the post's background fades in with an orange hue and then fades out.

How can I implement this effect on a site I'm currently working on? I looked through the source code of SO's pages using Firebug, but didn't see anything that linked up.

2012-04-04 19:02
by Tower
http://stackexchange.com/about/managemen - zod 2012-04-04 19:05
Why are you linking me to management - Tower 2012-04-04 19:09
jQuery an option or does it have to be 100% CSS - j08691 2012-04-04 19:27
No it doesn't have to be CSS i just assumed it was. What is your recommendation in jquery - Tower 2012-04-04 19:41
may be they can help you and tell you how they develop so :-) i dont know why this question is still open !! - zod 2012-04-04 19:42


4

You're probably looking for the :target psuedo class

I have not yet looked at SO scripts, but Im fairly certain that the fade is a JavaScript thing. It can be done with CSS transitions, but that's usually for things like fade in and out of color for hover/focus.

http://www.w3.org/TR/selectors/#target-pseudo

http://caniuse.com/#search=target

Assuming you have sample markup like this

<ul>
  <li><a href="#target1">Go To 1</a></li>
  <li><a href="#target2">Go To 2</a></li>
</ul>
<div id="target1"><!--Your HTML Here --></div>
<div id="target2"><!--Your HTML Here --></div>

You then want CSS like this

div:target { background-color:orange; }

so that when your user clicks a link in the list, your url takes the hashcode #target1 or #target2, and the applicable target in the page now has a background color of orange.

2012-04-04 19:53
by Thomas Jones
Cool, the :target thing is kinda awesome :- - Rocket Hazmat 2012-04-05 20:37


1

So.. what you need to look at is the concept of using a fragment identifier within the URL.

Extract from the wikipedia entry
*emphasis is mine

...a fragment identifier is a short string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

I prefer to call it URL hash tags simply because the method used to retrieve them in JavaScript is
window.location.hash. Call it what you want - here is the explanation :

Lets take the URL of my answer as an example:
Aha! But how did I have the URL before posting this? ;)

https://stackoverflow.com/questions/10017592/highlighting-a-section-of-a-web-page-the-way-so-does-with-inbox-links/10036643#10036643

So the hash value is the #10036643 at the end of the URL. You can get to that value by inspecting the window.location.hash variable. The same syntax can be used to add elements to the hash list -
window.location.hash += "#more_info"

Multiple key and value pairs can be created easily to store more info :
http://foobar.com/#one=1#two=2#three=3

window.location.hash will now give us : #one=1#two=2#three=3
And from there we can simply use the .split() function with the # character as the delimiter. That should give you something like this :

["", "one=1", "two=2", "three=3"]

Pop the first empty element off the array and then for each key/value pair you could do an additional .split('=') or simply don't use keys for the values, just have the hash values like this :
http://foobar.com/post/how-to/#COMMENT_ID

Ok,

Now that we know how to embed info into the URL we can start to parse it. For the sake of this example we'll assume a simple HTML structure like this -

...
<body>
  <div>
    Page Header
  </div>
  <div class="blog_post">
    An interesting section of content.
    <div class="comment cid0" ></div>
  </div>
  <div class="blog_post">
    More fantastic information (and a special offer).
    <div class="comment cid0" ></div>
    <div class="comment cid1" ></div>
  </div>
  <div>
    Page Footer
  </div>
</body>
...

Given this URL : http://foobar.com/post/how-to/#cid1
You could use some JavaScript in the document.ready function to control where to draw the focus -

$(function(){
  // Extract comment id from URL
  var targetElementId = window.location.hash.split("#")[1]; // This gives us 456
  var targetElement = $(".comment ."+targetElementId);
  var targetElementOffset = targetElement.offset(); 
  $('body').scrollTop(targetElementOffset.top);

  // Insert highlight functionality here
});

With regard to the highlighting, I think that Kerian's answer pretty much covers it - you'll need to use some browser dependent features such as CSS Transitions.
You might be able also to get away with some alternatives - you can use these suggestions to spark your imagination -

  • placing a repeated 1x1px of slightly transparent color behind all the content in that element and simply use the .fadeOut() function to hide it after a certain delay.

  • animating a background image with background-position

  • perhaps cycling through some predefined background-color properties with setInterval callbacks

2012-04-05 22:02
by Lix
Ads