Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## "You are here" with JavaScript

View this technique in action.Example in JSFiddle

1. Each `body` is uniquely identified (`id`)
2. Each navigation list item gets an `id`
3. CSS rule for `id="iamhere"`
4. JavaScript to set the "iamhere" `id`

Note the `id` of the `body`:

    <html>
    <head>
        <title>Election of Pine Tree Chiefs (Constitution of the Iroquois Nations)</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      <body id="part3">
        <?php include("inc/header.php"); ?>
        <?php include("inc/nav.php"); ?>
        <div id="main">
          <?php include("inc/content3.php"); ?>
        </div>
        <?php include("inc/footer.php"); ?>
      </body>
    </html>

Each navigation item has an `id`:

    <div id="navigation">
    <ul id="mainnav">
    <li id="navpart1"><a href="1.shtml">The Great Binding Law, Gayanashagowa</a></li>
    <li id="navpart2"><a href="2.shtml">Rights, Duties and Qualifications of Lords</a></li>
    <li id="navpart3"><a href="3.shtml">Election of Pine Tree Chiefs</a></li>
    <li id="navpart4"><a href="4.shtml">Names, Duties and Rights of War Chiefs</a></li>
    <li id="navpart5"><a href="5.shtml">Clans and Consanguinity</a></li>
    <li id="navpart6"><a href="6.shtml">Official Symbolism</a></li>
    <li id="navpart7"><a href="7.shtml">Laws of Adoption</a></li>
    <li id="navpart8"><a href="8.shtml">Laws of Emigration</a></li>
    <li id="navpart9"><a href="9.shtml">Rights of Foreign Nations</a></li>
    <li id="navpart10"><a href="10.shtml">Rights and Powers of War</a></li>
    <li id="navpart11"><a href="11.shtml">Treason or Secession of a Nation</a></li>
    <li id="navpart12"><a href="12.shtml">Rights of the People of the Five Nations</a></li>
    <li id="navpart13"><a href="13.shtml">Religious Ceremonies Protected</a></li>
    <li id="navpart14"><a href="14.shtml">The Installation Song</a></li>
    <li id="navpart15"><a href="15.shtml">Protection of the House</a></li>
    <li id="navpart16"><a href="16.shtml">Funeral Addresses</a></li>
    </ul>
    </div>

And the CSS:

    #navigation a {
      /* Rules for navigation items */
    }
    #navigation a:hover {
      /* Rules for navigation items */
    }

    /* Rules specific for "you are here" */
    #navigation #iamhere a,
    #navigation #iamhere a:hover {
      /* Rules for the "you are here" item */
    }

And the JavaScript (using jQuery) that finds the correct navigation item and sets the `id` attribute value to "iamhere":

    $(document).ready(function(){
      var mybodyid = $('body').attr('id');
      var mynavid = '#nav' + mybodyid;
      /* e.g. for 3.shtml:
          mybodyid is 'part3'
          mynavid  is '#navpart3'
       */
      $(mynavid).attr('id','iamhere');
    });

Copyright © David Heitmeyer