Can I Highlight Anchored Information

John Parente February 26, 2013

Hello,

Is there a way to automatically highlight content that has an anchor associated with it?

Use Case

  1. The user is reading material that contains a link to an anchor on another page (or the same page for that matter).
  2. The user clicks the link.
  3. The user is faced with a page that is cluttered with content that is irrelivent to the information that he or she is looking for.

Issue: The user has to skim through the clutter on the page to find the relevant information.

Possible Solution: Highlight the inforamtion that is attached to the anchor.

(NOTE: I know that the anchored information is the top most information displayed on a scrolling page, but this is not satisfactory because: a) It is hard to get the context of the information when it is abutted to the top of the screen like that. b) Sometimes the anchored information is on a page that deosn't have enough content to allow for the anchored information to be placed at the top of the scrolling screen and thus it is left sitting out in the middle of a sea of content that the reader is not interested in.)

Can anyone out there help?

Thanks,

John

1 answer

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 27, 2013

Hello John,

you can do this with the target pseudo class.

Use the css stylesheet macro and include this CSS on your confluence page:

h1:target {
background: orange;
}

Set a hyperlink to an h1 heading on that page and it will be highlighted with an orange background.

Just tried it: worked in my firefox, but not in my internet explorer.

Stefan February 16, 2017

Does that highlight all headings H1 or will it only become orange when there was a jump to it?

(I can not try it out as I'm not administrator and have no access to a "CSS stylesheet macro".)

Ammendment: I looked up the :target syntax and it seems that highlighting occurs only if there was jump to that heading:

https://www.w3schools.com/cssref/sel_target.asp

Thanks, Steffen. Great tip. I'll have my admin implement it.

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events