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="//fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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");
            return;
        }

        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)
                        return;

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

                head.appendChild(newScript);
            },
            scriptLoaded = function (evt) {
                completed.push(evt.target.src);

                if (completed.length === scriptPaths.length && callback)
                    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.ScrollContainer.js",
    "/CommonScripts/NWS.Display.SmoothAnchors.js",
//    "/CommonScripts/NWS.Display.ScrubInlineStyles.js",

    // Third-party JS files
    "/CommonScripts/makeheight.js",
    "/CommonScripts/fitvids.js"
];

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
        $('.Float25:not(.FAQ):not(.FormEditor),.Float33:not(.FAQ):not(.FormEditor),.Float50:not(.FAQ):not(.FormEditor),.Float66:not(.FAQ):not(.FormEditor),.Float75:not(.FAQ):not(.FormEditor)').matchHeight(true);
        
        // Initialize the fitVids plugin
        $("iframe[src*=youtube]").parent(".Freeform").addClass("YouTube").fitVids();

    });                
};

NWS.Modules.Register(modules, init);





HTML Tag Namespace Declarations:

lang="en"



Please wait while we gather your results.

Module Dependencies

Horizontal Scrolling Containers (tables)

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

HORIZONTAL_SCROLLING.css

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.
top