www.webdeveloper.com
Results 1 to 8 of 8

Thread: Named Anchor Highlighting

  1. #1
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374

    Named Anchor Highlighting

    I have a page set up to hold a bunch of definitions. Links navigate to the page using named anchor tags

    HTML Code:
    <a href='definition.html#paper'>Click</a> to view types of paper
    then in the file definition.html there is a named anchor like the below

    HTML Code:
    <table>
    .
    .
    <tr><td><a href="#paper">Paper</a></td><td>Paper can be yellow or green</td></tr>
    .
    .
    </table>
    What I want to know is, what is the easiest way to format/highlight the entire row the "targeted" named anchor resides on when the link has been clicked on to visit the definition.html page ??

    I'll even settle for just highlighting the targeted named anchor.

  2. #2
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    hi there,

    not sure if I understand completely what you want, but you're looking for a way to 'highlight' an element on your page when the user clicks on a link that goes to a named anchor on another page?

    If you're clicking on a link on the same page, you can execute a javascript function that will select the id of the target area and turn the background-color of it yellow.

    something like

    document.getElementbyName(name of anchor).style.backgroundColor = yellow;

  3. #3
    Join Date
    Aug 2007
    Posts
    3,767
    Well for modern browsers (not IE), the CSS tr:target would highlight the row
    Code:
    <tr id="anchor"></tr>
    but that's not an option. I think something like
    Code:
    var h = window.location.replace(/^[^\#]*/,""); // I think there is a property of the window object too, but I've forgotten it
    if (h.length > 0) {
        document.getElementById(h) // Reference to element
    }
    run onload will do it.


    Code:
    <tr><td><a href="#paper">Paper</a></td><td>Paper can be yellow or green</td></tr>
    That link will jump to the first instance of
    Code:
    <a name="paper">
    <!-- OR -->
    <anyelement id="paper"><!-- My preferred way -->
    You know that don't you? I'm just not sure from the way you've phrased the question.
    Great wit and madness are near allied, and fine a line their bounds divide.

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Quote Originally Posted by Declan1991
    ...You know that don't you? I'm just not sure from the way you've phrased the question.
    This is the first time I've ever had to mess with named anchors. Didn't realize that you could use the <anyelement id="paper"> approach.

    That will make things much easier - thanks.

  5. #5
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Something like this?
    HTML Code:
    <html>
    <head>
    <title>Link test</title>
    <script type="text/javascript">
    	function highlightAnchor(name) {
    		location.hash = name;
    		document.getElementById(name).style.backgroundColor = "#CCCCCC";
    	}
    </script>
    </head>
    <body>
    <div id="anchor"><a href="#anchor">Testing</a></div>
    <a href="javascript:highlightAnchor('anchor')">Go</a>
    </body>
    </html>

  6. #6
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Thanks,

    I went with this (code is in the definitions.html file)

    HTML Code:
    <script>
    	function HighlightRow() {
    		var hash = window.location.hash.substring(1);
    		if (hash.length > 0) {
    			var id = document.getElementById(hash);
    			id.className += " highlightIt";
    		}
    	}
    
    	window.onload = "HighlightRow";
    </script>
    and modified the table to look like this

    HTML Code:
    <table> 
    . 
    . 
    <tr id="paper"><td>Paper</td><td>Paper can be yellow or green</td></tr>
    .
    . 
    </table>
    I still need to toss in a validation to make sure that "id" exists, but other than that it works fine.

  7. #7
    Join Date
    Aug 2007
    Posts
    3,767
    While I see it, this would probably be better
    Code:
    <script type="text/javascript">
    function HighlightRow() {
    var hash = window.location.hash.substring(1);
    if (hash.length > 0) {
    var id = document.getElementById(hash);
    if (id.className) {
    id.className += " highlightIt";
    }
    }
    }
    window.onload = HighlightRow; </script>
    Just a few small changes like the id check and there is no need to pass a string to window.onload.
    Great wit and madness are near allied, and fine a line their bounds divide.

  8. #8
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Yep. I threw in a

    if (typeof id != "undefined") id.className += " highlightIt";

    for an Id check (I also changed the object name to idObj so as not to step on predefined objects or properties)

    Are you sure that "if (id.className)" won't fail in some browser when it attempts to grab the className property from and undefined object ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles