Reflex jQuery/Javscript Snippets


Custom Theme Snippets Needed for 6.9 Reflex

  • Theme snippets need to be added by the user when applying the Reflex theme a globe.
  • InitScrollTop and InitHeaderAnimation calls are optional. Initialize only the functionality needed, if any.
  • To use a different Google font, change the link and the corresponding css variable for Primary font

Pre-Titan Metatags/Code Snippets:

<meta content="initial-scale=1,maximum-scale=4.0,minimum-scale=1.0,user-scalable=yes,width=device-width" name="viewport">
<link href="//,400i,700,700i" rel="stylesheet">
<script src="//"></script>
<!--only if you need it -->
<link href="/CommonScripts/Flexslider/flexslider.css" rel="stylesheet">

Post-Titan Metatags/Code Snippets:

Call a general client_site.js file from the post-titan snippets and place all the code below into that js file (excluding the modules you don't need).

/** A parameter-less function to call after module scripts are loaded
 * @name SimpleCallback
/** Register JavaScript modules by loading their external .js files.
 * @param {string[]} scriptPaths - An array of relative or fully-qualified JavaScript files to load
 * @param {SimpleCallback} [callback] - The function to call once all module scripts have loaded
NWS.initNamespace("NWS.Modules.Register", function () {
    return (function (scriptPaths, callback) {
        if (!Array.isArray(scriptPaths)) {
            alert("Must provide an array of module script paths");

        var completed = [],
            loadScriptFile = function (path, onComplete) {
                var pathLower = path.toLowerCase(),
                    head = document.getElementsByTagName("head")[0],
                    scripts = head.getElementsByTagName("script");

                for (var s = 0; s < scripts.length; s++)
                    if (scripts[s].hasAttribute("src") && scripts[s].getAttribute("src").toLowerCase() == pathLower)

                var newScript = document.createElement("script");
                newScript.src = path;
                tic_Utilities.AddEventListener(newScript, "load", onComplete);

            scriptLoaded = function (evt) {

                if (completed.length === scriptPaths.length && callback)

        for (var ii = 0; ii < scriptPaths.length; ii++)
            loadScriptFile(scriptPaths[ii], scriptLoaded);

var modules = [
    // Base JS files
    // "/scripts/NWS.Display.InitHeaderAnimation.js", 
    // "/scripts/NWS.Display.InitScrollTop.js", 
    // Custom JS files
//    "/CommonScripts/NWS.Display.ScrubInlineStyles.js",

    // Third-party JS files

var init = function() {
    NWS.Display.InitScrollTop({ scrollerID: "scrollTop", headerID: "headerArea" }); 
    NWS.Display.InitHeaderAnimation({ headerID: "headerArea", animateClass: "sticky" });

    NWS.Display.ScrollContainer.init({ element: "#contentArea table" });
    NWS.Display.SmoothAnchors.init({ fixedHeader: "#headerArea", pixelDifference: 20 }); 
//    NWS.Display.ScrubInlineStyles.init({ element: '.titanDisplay table,.titanDisplay table td,.titanDisplay table th,.titanDisplay table tr' });

    $(document).ready(function() {        
        // Initialize the matchHeight plugin - the "true" sets all elements in a given row to be the same height; "false" would set all elements across all rows to be the same height
        // Initialize the fitVids plugin


NWS.Modules.Register(modules, init);

HTML Tag Namespace Declarations:


Please wait while we gather your results.

Module Dependencies

Horizontal Scrolling Containers (tables)

Create horizontal scrolling containers (often used for data tables).


Small snippet of css for the Scroll Container. Move this code in your css file.

Match Height Script

Third-party script for balancing content heights.

Responsive Video (fitvids)

Third-party script for responsive You Tube or Vimeo videos.

Scrub Inline Styles

Scrub inline styling and attributes from specific elements (typically used with data tables).

Smooth-scroll to Anchors

Create smooth-scrolling to anchors (instead of page jump). Remove "Sticky Header offset for anchor links" styles from reflex.css if using smooth scrolling with fixedHeader param.

© 2017 Northwoods - all rights reserved.