Child pages
  • OrgNavFooter Code Documentation
Skip to end of metadata
Go to start of metadata

Update History

4/27/2017: Update noscript location.

1/23/2012: Instructions for adding OrgNavFooter to Drupal sites.

3/11/2011: Recommendation and code approved by WAG

1/28/2011: New OrgNav codebase by John Fable using jQuery and configurable variables; no updates to menu content

10/26/2010: Updated "Find Scientific Visitors" link from http://www.ucar.edu/today/Visitors/ to http://www2.ucar.edu/staffnotes/daily/visitors

06/15/2010: Fixed: NCAR Earth System Laboratory [not Systems]; Added: UCP Dir & Budget Ofc;  Added: RAL title=CSAP

12/28/2009: Changes to HTML to reflect major changes in organizational structure.

11/05/2009: Added hover intent JavaScript code that only brings up the OrgNav popup menus when the user hovers over the menu for a split second. This prevents the popups from coming up on the way to the back button and other web browser navigation items. See the JavaScript section below for instructions on how to implement this on a site which already uses OrgNav.

05/01/2009: There is now only one version for use on all NCAR, UCAR, and UCP sites.  (If your version links to "Contact or visit NCAR" it's out of date.)

OrgNavFooter consists of:

  1. A JavaScript code snippet you paste at the end of the BODY of the HTML template for your website. You then update variables like site contact.
  2. A single JavaScript file hosted at http://www2.ucar.edu/js/orgnav which contains UCAR's standard OrgNav and footer code.

Why Implement OrgNavFooter?

  • It's really easy! All you have to do is paste a code snippet in your site's HTML template. (Note: If you have a static HTML site that's not based on a content management or templating system, you will have more work to add the code snippet to every page. If you already use server side includes to bring in a footer to every page, just add the code snippet to the end of your server side include file.)
  • UCAR Organizational changes will automatically be maintained by UCAR Communications and update automatically on your site without any intervention on your part.
  • UCAR Legal Counsel recommends that we use standard copyright, privacy policy and terms of use statements in the footers of UCAR websites. OrgNavFooter takes care of all that for you and will handle any updates that need to happen in the future.
  • It's a UCAR Web Advisory Group recommendation to create a sense of continuity as users browse UCAR's web presence, making our sites appear to be a unified family of sites.

How it Works

The JavaScript snippet below, which goes just above the close body tag </body> of your HTML template or page, does the following:

  1. Checks to see if jQuery is already installed on your website and if it isn't, downloads it from the Google API website. Web browsers will cache the file making additional downloads of jQuery unnecessary until the browsers cache expires which is user configurable in web browsers. The file size is 77K. jQuery provides functionality like drop down menus and animation. Drupal sites already come with jQuery so this step will be skipped for Drupal sites. 
  2. Downloads a file from http://www2.ucar.edu/js/orgnav
  3. Substitutes variables in the downloaded JavaScript file based on the variables you set in the JavaScript code snippet. This replaces the site contact with your contact form URL or email mailto and can also hide and show various parts of OrgNavFooter like the NSF disclaimer.
  4. Writes the HTML, CSS and JavaScript code into your page that's necessary to build OrgNav, push the rest of your web page contents down, and write the footer. 

When the user moves their cursor over the OrgNav region at the top of the page, you'll notice a progress indicator in the upper left which is meant to let the user know something will happen if they hang out there. If the cursor continues past the OrgNav on the way to the browsers back button for instance, the OrgNav menu will not come up. A user has to hover over an OrgNav menu for 1 second before a menu comes up. Once a menu comes up, hovering over other OrgNav menus results in instantaneous menu popups. If the cursor moves outside of the OrgNav region and stays out for 3 seconds, the hoverIntent behavior will be enabled again, where menus don't come up unless you hover over them for 1 second. This is all by design and is the outcome of WAG consensus.

OrgNavFooter.js was conceived and written by John Fable of the NCAR Directorate. Thanks John!

JavaScript Code Snippet for your HTML template

Add to the location within your HTML template that you would like the footer to display.
<!-- OrgNavFooter Script -->
<script>

// CUSTOM VARIABLES
var contactLink = "mailto:jfable@ucar.edu";     // enter your Webmaster/Feedback link. Include http:// or mailto:
var hideOrgNav = false;        // hide the entire OrgNav from view
var hideFooter = false;          // hide the entire OrgFooter from view
var hideNSF = false;               // hide the NSF disclaimer
var footerColor = '#ccc';       // hex color of the footer font including the #

// DO NOT EDIT BELOW THIS POINT
var jsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
if(typeof jQuery === "undefined"){
  document.write("<scr"+"ipt src='"+jsHost+"ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></scr"+"ipt>");
}
document.write("<scr"+"ipt src='"+jsHost+"www2.ucar.edu/js/orgnav' type='text/javascript'></scr"+"ipt>");
</script>
<noscript><iframe frameborder="0" width="100%" src="https://www2.ucar.edu/sites/default/modules/custom/orgnav/includes/noscript.html"></iframe></noscript>
<!-- END OrgNavFooter Script -->

OrgNavFooter and your CSS Page Layout 

OrgNav is 28px high and uses Cascading Style Sheet (CSS) code to push your page content down automatically to accomodate this space. If OrgNav overwrites or appears underneath your page header, try changing your site's CSS to use relative positioning instead of absolute for it's container or header div. Here is some example CSS and HTML code that uses a div tag with an id of "container" to wrap all the web page content in the BODY of your page. If you place the OrgNavFooter script after that div tag and before the end of the body, you should be all set.

#container {
   position: relative;
   width: 100%;
   height: auto;
}
<body>
<div id="container">
    my web page content
</div>
<!-- Insert OrgNavFooter Script here -->
</body>

OrgNavFooter JavaScript Code

For those of you interested in seeing the JavaScript code that does all the magic, simply go to the official OrgNavFooter URL. Once again, it leverages the jQuery JavaScript framework to build 4 drop-down menus, style them, and implement hoverIntent behavior.

http://www2.ucar.edu/js/orgnav

Drupal

How do you add org-nav code to a Drupal site?

1. Go into Blocks and configure the UCAR OrgNavFooter.

2. Paste the Javascript snippet into the Block body.

3. Save block on your way out.

Questions?

Code: dvance@ucar.edu
Menu content: zhenya@ucar.edu

  • No labels

3 Comments

  1. Consider using something like this to convey emergency information across all UCAR|NCAR properties?

  2. The noscript link http://www2.ucar.edu/sites/default/modules/custom/ucar_comm_site/includes/noscript.php returns 404 (so does https:// ).

     

    The orgnav js references a loader image: js/orgnav/loaderOrg.gif which returns a 302 to http://ncar.ucar.edu/404 which returns HTML with status 200! Ugh! The https:// version of the loader URL does work.

  3. The noscript link now returns 301 to https which then is 404. Please would somebody enable both http and https schemes with a direct 200 response.

    The orgnav js on http now returns a 301 to https – please restore a working 200 response on http.

    I suppose at the very least valid 200 responses for all paths on https might suffice, if that were some sort of policy decision and there was updated and accurate documentation here. Except that the orgnav js content contains many http: URLs (most of which cause redirects).