JavaScript Functions in Advantage CSP: Essential Tools for Developers

JavaScript Functions

Advantage CSP 9.x

Advantage CSP 9.x is designed to be script agnostic, allowing developers to use their preferred script libraries. You can easily register any script libraries you choose by following the script registration instructions (See Script registration).

Additionally, Advantage CSP 9.x includes Bootstrap 5 Components out of the box, which can be seamlessly integrated into your projects. You can explore the available Bootstrap 5 Components at https://getbootstrap.com/. Furthermore, Advantage CSP 9.x utilizes Bootstrap Components as the foundation for its global structure, including navigation, accordions, tabs, and more.

**********************************************

my Content Connection

	<appSettings>
		<add key="DefaultConnection" value="AdvantageCSPConnectionString" />
		<add key="AdvantageErrorHandler" value="true" />
		<add key="aspnet:AllowConcurrentRequestsPerSession" value="true" />
		<add key="aspnet:RequestQueueLimitPerSession" value="2147483647" />
		<add key="RecaptchaPrivateKey" value="" />
		<add key="RecaptchaPublicKey" value="" />
		<add key="Keyoti-SearchEngine-LicenseKey" value="2D7B7D2B2524222724306C6C42423E402A4141413F43454743494949474B4D3A34567922716E707B75316122217E257C2" />
		<add key="Keyoti-MetaKeyWordWeight" value="15" />
		<add key="Keyoti-MetaDescriptionWeight" value="10" />
		<add key="AdvantageSchedule" value="true" />
		<add key="AdvantageScheduleServerIP" value="" />
		<add key="owin:AutomaticAppStartup" value="true" />
		<add key="owin:appStartup" value="AdvantageCMS.Admin.Startup.Configuration" />
	</appSettings>

 

Advantage CSP 8.x or Below

****************************************************

Advantage CSP 8.x or Below

For Advantage CSP 8.x or earlier versions, the platform provides a set of JavaScript utility tools. These tools are accompanied by comments within the files, outlining the purpose of each function and instructions on how to use them. You can find most of these functions as examples in the pattern library, allowing you to leverage them for your development needs.

Window Load

Function: Window Load

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

Clear Form

 

Function: Clear Form

Clear Form

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

Description

Clears the values within a form

 


Initialize Breadcrumb

Initialize Breadcrumb

 Function: Init Breadcrumb

Initialize 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;

Initialize Breadcrumb

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

Initialize Fragment URL

Initialize Fragment URL

 Function: Init Fragment or Url

Initialize Fragment URL

var $fragment = $('.fragment-section');

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

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

Initialize Fragment URL

var $fragment = $('.fragment-section');

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

Swap Image

Swap Image
Function: Swap Image

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

 

​Initialize Vertical Align

Initialize Vertical Align
Function: Init Vertical Align

Initialize 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;{01234}

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

​Initialize Smooth Scroll

Initialize Smooth Scroll
Function: Init Smooth Scroll

​Initialize 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

Get Viewport Size

Function: Init Smooth Scroll

Get Viewport Size

function getViewportSize() {};

Description

Will return the viewport size;
Parameters
Use

getViewportSize().width;

// or

getViewportSize().height;

Equal Height

Equal Height
Function: Equal Height

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

Get URL Parameters
Function: Get URL Parameters

Get URL Parameters

var urlParams;

Description
Get query string values;
Parameter

 Use

alert(urlParams["contact"]);

alert("contact" in urlParams);

 

alert(urlParams["contact"]);

Adaptive Content

Adaptive Content
Function: Adaptive Content

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

moveTo: '.mobile',

$('.adapt').initAdaptive({;

moveFrom: '.desktop',{01234}

onMoveToEnd: function () {
 

console.log('move to adaptive content');
},onMoveFromEnd: function () {


console.log('move from adaptive content');

});

Grid Transition

Grid Transition

 Function: Grid Transition

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
  • jQuery.ui.effects
Back to Top Button