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 Hamburger Menu Initialize Hamburger Menu Function: Hamburger Menu Initialize 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(); {01234} Initialize Navigation Initialize Navigation Function: Initialize Navigation Initialize NavigationinitNav(); 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). 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 }); 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 URLvar $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 URLvar $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 AligninitVerticalAlign : 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 Sizefunction getViewportSize() {}; Description Will return the viewport size; Parameters Use getViewportSize().width; // or getViewportSize().height; Equal Height Equal Height Function: Equal Height Equal HeightequalHeight = 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 Parametersvar 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 TransitiongridTransition: 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