Menu icon Foundation
Magellan reflow/reinit/calcPoints- how to use?

I'm trying to use Magellan on a form that shows/hides various divs as you click radio buttons. As things expand and the page gets longer, Magellan doesn't update the nav targets to the new height.

I've tried:

new Foundation.Magellan('#form', 'reflow');

,

$(document).foundation('magellan', 'reflow');

 

on the first line of app.js and also inside the code that controls the showing/hiding:

var formShowHide = {

	init: function() {
		this.applyConditionalRequired();
		this.bindUIActions();
	},

	bindUIActions: function() {
		$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
	},

	applyConditionalRequired: function() {

		$(".require-if-active").each(function() {
			var el = $(this);
			if ($(el.data("require-pair")).is(":checked")) {
				el.prop("required", true);
			} else {
				el.prop("required", false);
			}
		});
	}
};

formShowHide.init();

What am I doing wrong? I keep getting the error: 

foundation.min.js:1 Uncaught ReferenceError: We're sorry, 'magellan' is not an available method for this element.

I'm using Foundation 6.2.3 and the documentation is not very clear on how to use plugins.

MagellanjavascriptReflowReinitcalcpointsdocumentationF6sites

I'm trying to use Magellan on a form that shows/hides various divs as you click radio buttons. As things expand and the page gets longer, Magellan doesn't update the nav targets to the new height.

I've tried:

new Foundation.Magellan('#form', 'reflow');

,

$(document).foundation('magellan', 'reflow');

 

on the first line of app.js and also inside the code that controls the showing/hiding:

var formShowHide = {

	init: function() {
		this.applyConditionalRequired();
		this.bindUIActions();
	},

	bindUIActions: function() {
		$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
	},

	applyConditionalRequired: function() {

		$(".require-if-active").each(function() {
			var el = $(this);
			if ($(el.data("require-pair")).is(":checked")) {
				el.prop("required", true);
			} else {
				el.prop("required", false);
			}
		});
	}
};

formShowHide.init();

What am I doing wrong? I keep getting the error: 

foundation.min.js:1 Uncaught ReferenceError: We're sorry, 'magellan' is not an available method for this element.

I'm using Foundation 6.2.3 and the documentation is not very clear on how to use plugins.

Robert Stark over 2 years ago

I found this enabled me to re-fire magellan

 

$(window).on('scroll.zf.trigger', function(data) {
		
	$('#magellan').foundation('reflow');
	
});