Missouri State University

Common Javascript Template Documentation

The 2010 templates on this site include a reference to a common.js script file in the document head. This file adds necessary support and features to the templates as well as providing a number of cross-platform Javascript functions/properties.

HTML5 support for Internet Explorer 8 and below

Older versions of Internet Explorer cannot properly handle an unknown tag. Unknown tags are treated as inline and cannot be styled. Using Javascript, this support can be added to older versions allowing structural HTML5 tags to be used and styled. See IE Print Protector. The IE print protector code is included in the common.js file.

Popout menus

The 2010 templates include all of the necessary code for functioning pop out menus. Since this code is part of the common.js code library, usage is greatly simplified. In addition, there is no longer the restriction of having only a single popout menu on a page. Example popout menu usage:

Out-of-date browser warnings

If the user's web browser is out-of-date and no longer supported, a warning message will automatically be inserted into the top of the page. See http://blogs.missouristate.edu/web/2010/05/26/out-of-date-browser-warnings/

Google Analytics tracking code

The common.js file already contains the latest Google Analytics tracking scripts. This includes scripts to track access to external links and non-web (such as PDF) documents. By default, it will add tracking statistics to the main university profile. You can define the _gaq array and add the necessary calls to the queue to override the default behavior. Example customizations:

<script type="text/javascript">
window.gaq_ = window.gaq_ || [];
window.gaq_.push([_setAccount', 'UA-2909784-1'], ['_trackPageview']);
</script>

The Google Analytics code also adds event tracking to mailto: links, links to external websites and links to pdf, word, excel and other documents. This link tracking code introduces a small delay into the link click in order to actually have the tracking occur. The delay can impede other scripts that work by preventing the default behaviour of a link click. If this causes issues, developers can disable the behaviour on a per-page basis with the following code:

<script type="text/javascript">
window.missouristate = window.missouristate || {};
window.missouristate.DisableLinkDelays = true;
</script>

Javascript methods/properties

Global methods

  • Expand definition
    document.getElementsByClassName (names)
    Add support to older browsers. Only adds the method to the document object. Other nodes are not modified.

    Arguments

    • names : string
      Class name to select.

    Returns: Array.  Any element with the specified class.

missouristate namespace

Encapsulation for all functions and types defined in common.js

Namespace properties

  • missouristate.userAgent.platform : string
    Operating system of the browser. Example: "win32"
  • missouristate.userAgent.product.GECKO : boolean
    Specifies whether the browser is using the Gecko rendering engine.
  • missouristate.userAgent.product.IE : boolean
    Specifies whether the browser is using the trident rendering engine.
  • missouristate.userAgent.product.MOBILE : boolean
    Specifies whether the browser is a mobile (reduced functionality) version.
  • missouristate.userAgent.product.OPERA : boolean
    Specifies whether the browser is using the Opera rendering engine.
  • missouristate.userAgent.product.WEBKIT : boolean
    Specifies whether the browser is using the Webkit rendering engine.
  • missouristate.userAgent.version : string
    Version number of the browser rendering engine. Example: "1.9.2"

Static methods

  • Expand definition
    missouristate.addEvent (node, eventName, eventHandler)
    Cross browser method of attaching an event to an HTML node.

    Arguments

    • node : Window | Document | Node
      Target of the event.
    • eventName : string
      Name of the event (does not include the "on" prefix.
    • eventHandler : function(Object=)
      Function to process the event. Inside the function, the "this" keyword refers to the object which triggered the event.

    Example:
    missouristate.addEvent(document.getElementById("myImage"),
    "mouseover",
    function() { alert("mouseover"); });

  • Expand definition
    missouristate.addLoadEvent (eventHandler)
    Execute the provided event when the document is ready to be accessed. Does not wait on all images, etc to execute. Uses DOMContentLoaded event where available.

    Arguments

    • eventHandler : function()
      Function to execute when the DOM has been initialized and can be manipulated.

    Example:
    missouristate.addLoadEvent(function() { alert("loaded"); });

  • Expand definition
    missouristate.compareVersions (verion1, version2) ⇒ number
    Compares two version numbers.

    Arguments

    • version1 : string
      Version of first item.
    • version2 : string
      Version of second item.

    Returns: number  1 if version1 is higher, 0 if versions are equal or -1 if version2 is higher.

    Example: alert(missouristate.compareVersions("4.35.2", "7.8"));

  • Expand definition
    missouristate.detectFlashVersion (reqVersion) ⇒ boolean
    Determines whether the required version (or higher) of Adobe Flash is currently available.

    Arguments

    • reqVersion : string
      Minimum version number required.

    Returns: boolean  true if the required version (or higher) of flash is detected.

    Example: alert(missouristate.detectFlashVersion("9.0.115"));

  • Expand definition
    missouristate.generateFlashObject (objAttrs)
    Creates the appropriate code to embed a flash movie in the page.

    Arguments

    • objAttrs : Object.<string, string>
      Object literal specifying the flash properties and attributes.

    Example:
    missouristate.generateFlashObject({
    movie:"http://www.youtube.com/v/Ay2xd5OMt3E",
    wmode:"transparent",
    allowscriptaccess:"always",
    allowFullScreen:"true",
    height:"307",
    width:"510"
    });

  • Expand definition
    missouristate.getBoundingClientRect (node) ⇒ Object.<string, number>
    Returns an object with the height, width and positions of the given node.

    Arguments

    • node : Node
      Node on which to retrieve the position information.

    Returns: Object.<string, number> Object map specifying node width, height and positions:
    {
    width: 0,
    height: 0,
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
    }.

  • Expand definition
    missouristate.getDocumentHeight () ⇒ number
    Returns the height of the current document.

    Returns: number  Height of the document in pixels.

  • Expand definition
    missouristate.getLastModifiedDate () ⇒ string
    Returns the date specified by the Last-Modified header for use in the document footer. Dynamic server-side pages need to manually add both the Last-Modified header and a Cache-Control header. Last-Modified should be set to the file modification date. Cache-Control is typically set at max-age=0 since dynamic HTML pages should not be cached.

    Returns: string   a formatted version of the last modified date of the page.

  • Expand definition
    missouristate.getViewportSize () ⇒ Array.<number>
    Retrieves the size of the current viewport.

    Returns: Array.<number>   An array of two elements representing the viewport size: [width, height].

  • missouristate.outputDocumentLocation ()
    Writes the Url of the page for use in the document footer.
  • missouristate.outputLastModifiedDate ()
    Writes the date specified by the Last-Modified header for use in the document footer. Dynamic server-side pages need to manually add both the Last-Modified header and a Cache-Control header. Last-Modified should be set to the file modification date. Cache-Control is typically set at max-age=0 since dynamic HTML pages should not be cached.
  • Expand definition
    missouristate.requireLink (src)
    Dynamically include a CSS link tag if it is not already present.

    Arguments

    • src : string
      Url of the casscading stylesheet to add.

    Example: missouristate.requireLink("custom.css");

  • Expand definition
    missouristate.requireScript (src, allowDuplicates, completeCallback)
    Dynamically include a script tag.

    Arguments

    • src : string
      Url of the script to add.
    • allowDuplicates : boolean=
      Specifies whether to add the script if it is already present. Defaults to false.
    • completeCallback : function(Event=)=
      Function to call when the script has loaded. Frequently used to execute code that depends on the library (like jQuery functions). Inside the function, the "this" keyword refers to the script node.

    Example:
    missouristate.requireScript("jQuery.js", true, function (evt) {
    alert($(document).height()); //document.ready is unnecessary
    });