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.

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

Sr.No.

Name & Description

Type

element

It creates a jQuery object into a Magellan.

jQuery

options

Default plugin setting is override.

Object

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

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.

The following are the functions used in magellan.

The array of pixel values are calculated lines of distinction between the locations on a page.

To update Magellan necessary functions are called upon DOM change.

The instance of magellan is destroyed.

foundation_navigation.htm