- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Magellan JavaScript Reference
Foundation provides JavaScript components for Magellan as listed below.
Initializing
You can initialize the Magellan in JavaScript by using foundation.magellan.js and foundation.core.js plugins.
Foundation.Magellan
It specifies instance of a Magellan as defined below −
var elem = new Foundation.Magellan(element);
Sr.No. | Name & Description | Type |
---|---|---|
1 |
element It creates a jQuery object into a Magellan. |
jQuery |
2 |
options Default plugin setting is override. |
Object |
Plugin Options
You can use the following plugin to customize the Magellan instance. You can set the plugin option as individual data attributes.
Sr.No. | Name & Description | Example |
---|---|---|
1 |
animationDuration Set the time in ms while scrolling between the locations. |
500 |
2 |
animationEasing Use animation style, while scrolling between the locations. |
ease-in-out |
3 |
threshold For location changes use number of pixels as a marker. |
50 |
4 |
activeClass In magellan container apply the class for active link location. |
active |
5 |
deepLinking Script allows to manipulates the current page URL |
true |
6 |
barOffset Set number of pixels to offset when using sticky nav bar. |
25 |
Events
The Magellan plugin attached to any element can trigger the following event.
Sr.No. | Name & Description |
---|---|
1 |
update.zf.magellan It triggers an event when the magellan is finished updating to the new active element. |
Functions
The following are the functions used in magellan.
.calcPoints
The array of pixel values are calculated lines of distinction between the locations on a page.
.reflow
To update Magellan necessary functions are called upon DOM change.
.destroy
The instance of magellan is destroyed.