Try it now Submit a request View tickets Login
Follow

advantage-base.js

Introduction

This file sets out some basic functions that we use regularly. 

Within the file, you will find comments that outline what the function does and how to use the function. You will find most functions as examples in the pattern library. 

Current Functions 

Window Load

Function: Window Load

$(window).bind("load", function () {});

Description
Window load currently only has one operation, to show() .fouc (which is hidden in CSS).

A div with class .fouc will be hidden and then on window load, it will show. This prevents any flash of unwanted content.

Parameters

Use

  • Use class .fouc on html element;
  • CSS class to set display:none exists in base.css;

 

Clear Form

Function: Clear Form

$.fn.clearForm = function () {};

Description
Clears the values within a form

 

 

Text Input Clear

Function: Text Input Clear

$.fn.textInputClear

Description
Clear the textbox input on focus, but only if it is the initial value. If the initial value isn't set (as an attribute), the fallback will set the initial value to the control's value.

Parameters

  • Parameter: initialValAttr 
  • Type: string ''
  • Default: Pass in the attribute you have set for the initial data.
  • Example: data-initial

Use

<asp:TextBox ID="txtLastName" runat="server" Text="Last Name *" data-initial="Last Name *" /> 
$('.form-row input:text, .form-row textarea').click(function () { $(this).textInputClear({ initialValAttr: 'data-initial' }); } 

 

init Hamburger Menu

Function: Hamburger Menu

$.fn.initHamburgerMenu

Description
Will initialize your hamburger toggle

Parameters

  • Parameter: expandClass
  • Type: string
  • Default: expand
  • Description: The class that shows the panel
  • Parameter: collapseClass
  • Type: string
  • Default: collapse
  • Description: The class that hides the panel
  • Parameter: panel
  • Type: string
  • Default: body
  • Description: The panel you want to toggle
  • Parameter: windowWidth
  • Type: int
  • Default: 768
  • Description: The breakpoint where the toggle happens
  • Parameter: forceClose
  • Type: string
  • Default: "
  • Description: A selector to close after the operation is complete
  • Parameter: animateClass
  • Type: string
  • Default: "
  • Description: Pass in a class name to set the animation
  • Parameter: onComplete
  • Type: callback fn
  • Default: {}
  • Description: function to execute upon completion

Use

$('.hamburger a').initHamburgerMenu(); 

 

Initialize Navigation

Function: Initialize Navigation

initNav()

Description
You can initialize navigation in one of 3 ways- flyout, static, touch. If you don't set a parameter, the function will set active classes on li's for you. Hover navigation can be a CSS implementation (.level-two.hover).

Parameters

  • Parameter: initStaticNav
  • Type: bool
  • Default:false
  • Description: Static nav will show landing pages as well as the children navigations of the parent page you are on
  • Parameter: initHoverNav
  • Type: bool
  • Default: false
  • Description: Set a hover navigation
  • Parameter: setHoverForTouch
  • Type: bool
  • Default: Convert hovers to clicks for device
  • Parameter: initFlyoutNav
  • Type: bool
  • Default: Flyout navigation will operate on the hamburger menu and use slide-x animation. The function is not dynamic, classes work with FlyoutNavigation.ascx file

Use

$('nav.navbar').initNav({ initHoverNav: true });
$('nav.fly-out').initNav({ initFlyoutNav: true });

 

 

Init Breadcrumb

Function: Init Breadcrumb

$.fn.initBreadcrumb = function (options) {};

Description
Automatically sets the breadcrumb based on your active items in the navigation;

Parameters

  • Parameter: hideSingleItem
  • Type: bool
  • Default: true
  • Description: hide if only one item in the breadcrumb (home page)

Use

This is already set in the BreadcrumbJs.ascx Control, so you only have to drop on the user control;

$('.breadcrumb_init').initBreadcrumb();

 

Init Fragment or URL

Function:  Init Fragment or Url

$.fn.initFragmentOrUrl = function (options) {};

Description
Fragment or Url work with the Module of the same name. It generates navigation where it finds attributes data-navigation and data-title. If we have a data-title, we are using the Url setting (link & title). Otherwise, we are using the Fragment setting ('link name' becomes #link-name'). This is generally used for Single Page Scroll

Parameters

  • Parameter: hideSingleItem
  • Type: bool
  • Default: true
  • Description: hide if only one item in the breadcrumb (home page)

Use

Init is already setup in NavigationOnePageScroll.ascx

var $fragment = $('.fragment-section'); 
$fragment.initFragmentOrUrl({ $navItem: $('.page-nav ul') });

 

Swap Image

Function:  Swap Image

initHoverSwap: function() {},
swapImage: function () {}

Description

Call initHoverSwap and Setup a hover for an image which will then call swapImage(); OR you can just use swapImage()

Parameters

Use

<div class="my-img"> <img src="img.png" data-src-over="img-on.png" />
$('.my-img').initHoverSwap();

 

Init Vertical Align

Function: Init Vertical Align

initVerticalAlign : function (minWidth, height) {},
setVerticalAlign : function (minWidth, height) {}

Description

Vertically aligns two elements.
setVerticalAlign is called from within init function - you will call initVerticalAlign;

Parameters

  • Parameter: minWidth
  • Type: int
  • Default: - 
  • Description: breakpoint
  • Parameter: height
  • Type: int
  • Default: - 
  • Description: static height that you want to use for the calculation

Use

$('.vertical-align-js [class*="span"]').initVerticalAlign(768);

 

Init Smooth Scroll

Function: Init Smooth Scroll

$.fn.initSmoothScroll = function (offset, $elementOffset) {};

Description
Performs a smooth scroll when linking within a page 

 

 

Parameters

  • Parameter: offset
  • Type: int
  • Default: - 
  • Description: Pass in a static offset value
  • Parameter: $elementOffset
  • Type: element
  • Default: - 
  • Description: Pass in an element for height offset

Use

$(this).initSmoothScroll(70); 
// or 
$(this).initSmoothScroll(0, $('header'));

 

Get Viewport Size

Function: Init Smooth Scroll

function getViewportSize() {}

Description
Will return the viewport size;

Parameters

Use

getViewportSize().width; 
// or 
getViewportSize().height;

 

Equal Height

Function: Equal Height

equalHeight = function (container, breakpoint) {};

Description
Will set equal height for a row of elements;

If initialized on window load, the browser will wait for images to load and calc correct height.

If window resizes, you will have to init again. (use loadAndResizeFunctions()).

If you have a partial postback, you will have to load again. (use Sys.Application.add_load(function () { loadAndResizeFunctions() }); )

You probably don't want this load on mobile - not necessary.

Parameters

  • Parameter: container
  • Type: class selector
  • Default: - 
  • Description: pass in the class selector you want to target
  • Parameter: breakpoint
  • Type: int
  • Default: 767 
  • Description: only run this code when the width is greater than the breakpoint (desktop by default)

Use

equalHeight('.row-fluid.equal-height-js [class*="span"]');

 

Get URL Parameters

Function: Get URL Parameters

var urlParams;

Description
Get query string values;

Parameters

Use

alert(urlParams["contact"]);   
alert("contact" in urlParams);

 

Adaptive Content

Function: Adaptive Content

$.fn.initAdaptive = function (options) {};

Description
Will move around a chunk of code from one object to another when a breakpoint is reached.

Parameters

  • Parameter: moveTo
  • Type: string class selector
  • Default: "
  • Description: moveTo will move your selector to this place below the breakpoint
  • Parameter: moveFrom
  • Type: string class selector
  • Default: "
  • Description: moveFrom will move your selector to this place above the breakpoint
  • Parameter: minWidthBreak
  • Type: int
  • Default: 768
  • Description: the breakpoint where less than this will trigger moveTo, greater than this will trigger moveFrom
  • Parameter: hideOnMoveTo
  • Type: string class selector
  • Default: "
  • Description: hide selector on moveTo
  • Parameter: hideOnMoveFrom
  • Type: string class selector
  • Default: "
  • Description: hide selector on moveFrom
  • Parameter: onMoveToEnd
  • Type: callback function
  • Default: {}
  • Description: function to run after moveTo
  • Parameter: onMoveFromEnd
  • Type: callback function
  • Default: {}
  • Description: function to run afterFromEnd

Use

$('.adapt').initAdaptive({
 moveTo: '.mobile',
 moveFrom: '.desktop',
 onMoveToEnd: function () {
 console.log('move to adaptive content');
 },
 onMoveFromEnd: function () {
 console.log('move from adaptive content');
 }
 });

  

Grid Transition

Function: Grid Transition

gridTransition: function (options) {

Description
This will transition your div's within grid layout;

Parameters

  • Parameter: selector
  • Type: string class selector
  • Default: [class*=span-] .trans
  • Description: the inner div to transition - the outter div (span-) will keep height so transition looks best
  • Parameter: transition
  • Type: string
  • Default: show
  • Description: transition type; Options: show, fade, blind, slide
  • Parameter: reset
  • Type: bool
  • Default: false
  • Description: reset will hide first, then perform transition (used on window resize)

Use

<div class="row-fluid trans-wrap">
 <div class="span-4">
 <div class="trans">
.trans-wrap [class*=span-] { min-height:330px; } 
.trans-wrap [class*=span-] .trans { display:none; }
 $('.trans-wrap').gridTransition({ transition: 'blind' });

Dependencies
jQuery.ui.effects 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments