JavaScript Setup
We streamlined how you implement Foundation plugins by combining them into a single plugin under the $.fn.foundation() jQuery namespace.
Installation
Foundation JavaScript was designed to work with jQuery right out of the gate. In the <head> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements that older browsers may not recognize, and provides detection for mobile devices:
<script src="/js/vendor/modernizr.js"></script>Before the closing body tag, insert JQuery and FastClick.
HTML
<script src="/js/vendor/jquery.js"></script>
<script src="/js/vendor/fastclick.js"></script>Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins.
HTML
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>Initialize Foundation
After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.
We recommend that you initialize Foundation at the end of the page <body>.
HTML
<script>
$(document).foundation();
</script>Note: We include a tested version of jQuery in the Foundation repo to get you started quickly.
Adding New Content After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
$(document).foundation();Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
$(document).foundation('reflow');To be efficient, target the actual Foundation plugin you need to reflow:
$(document).foundation('orbit', 'reflow');
or
$(document).foundation('tab', 'reflow');
or
$(document).foundation('interchange', 'reflow');
etc...Configuration
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This way, you can select which plugins you want to customize, and which are fine by default. You can take a look at the call here:
$(document).foundation({tab: {toggleable: false}});The call will initialize all the plugins on the page and will configure tabs with toggleable enabled.
You can configure multiple libraries within the same call as well. Here are a few ways to make it happen:
JS
$(document).foundation({
reveal : {
animation_speed: 500
},
tooltip : {
disable_for_touch: true
},
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});The above will initialize all of the plugins with default settings as well as customized settings for reveal, tooltip, and topbar.
Data Options
Instead of passing the settings to the plugins using JavaScript, you can pass them through the markup using data-options. To pass in an option, just place it in the data-options HTML attribute of the element the plugin is being called on. To pass in multiple options, format them as a semicolon-delimited list:
<span data-tooltip data-options="disable_for_touch:true;touch_close_text:'close me'" class="has-tip" title="Tooltips are awesome!">Has Tooltip</span>A chart of of all the available data-options is below.
| Abide | live_validate | true |
| validate_on_blur | true | |
| focus_on_invalid | true | |
| error_labels | true | |
| timeout | 1000 | |
| Accordion | content_class | 'content' |
| active_class | 'active' | |
| multi_expand | false | |
| toggleable | true | |
| Clearing | close_selectors | '.clearing-close' |
| open_selectors | '' | |
| skip_selector | '' | |
| touch_label | '← Swipe to Advance →' | |
| Dropdown | active_class | 'open' |
| is_hover | false | |
| Interchange | load_attr | 'interchange' |
| Joyride | expose | false |
| modal | true | |
| keyboard | true | |
| tip_location | 'bottom' | |
| nub_position | 'auto' | |
| scroll_speed | 1500 | |
| scroll_animation | 'linear' | |
| timer | 0 | |
| start_timer_on_click | true | |
| start_offset | 0 | |
| next_button | true | |
| prev_button | true | |
| tip_animation | 'fade' | |
| pause_after | [] | |
| exposed | [] | |
| tip_animation_fade_speed | 300 | |
| cookie_monster | false | |
| cookie_name | 'joyride' | |
| cookie_domain | false | |
| cookie_expires | 365 | |
| tip_container | 'body' | |
| expose_add_class | '' | |
| Magellan | active_class | 'active' |
| threshold | 0 | |
| destination_threshold | 20 | |
| throttle_delay | 50 | |
| fixed_top | 0 | |
| offset_by_height | true | |
| OffCanvas | open_method | 'move' |
| close_on_click | false | |
| Orbit | animation | 'slide' |
| timer_speed | 10000 | |
| pause_on_hover | true | |
| resume_on_mouseout | false | |
| next_on_click | true | |
| animation_speed | 500 | |
| stack_on_small | false | |
| navigation_arrows | true | |
| slide_number | true | |
| slide_number_text | 'of' | |
| container_class | 'orbit-container' | |
| stack_on_small_class | 'orbit-stack-on-small' | |
| next_class | 'orbit-next' | |
| prev_class | 'orbit-prev' | |
| timer_container_class | 'orbit-timer' | |
| timer_paused_class | 'paused' | |
| timer_progress_class | 'orbit-progress' | |
| slides_container_class | 'orbit-slides-container' | |
| preloader_class | 'preloader' | |
| slide_selector | '*' | |
| bullets_container_class | 'orbit-bullets' | |
| bullets_active_class | 'active' | |
| slide_number_class | 'orbit-slide-number' | |
| caption_class | 'orbit-caption' | |
| active_slide_class | 'active' | |
| orbit_transition_class | 'orbit-transitioning' | |
| bullets | true | |
| circular | true | |
| timer | true | |
| variable_height | false | |
| swipe | true | |
| Reveal | animation | 'fadeAndPop' |
| animation_speed | 250 | |
| close_on_background_click | true | |
| close_on_esc | true | |
| dismiss_modal_class | 'close-reveal-modal' | |
| multiple_opened | false | |
| bg_class | 'reveal-modal-bg' | |
| root_element | 'body' | |
| bg | $('.reveal-modal-bg') | |
| Sliders | start | 0 |
| end | 100 | |
| step | 1 | |
| initial | 1 | |
| vertical | true | |
| display_selector | '#sliderOutput' | |
| Tab | active_class | 'active' |
| is_hover | false | |
| Tooltip | selector | '.has-tip' |
| additional_inheritable_classes | [] | |
| tooltip_class | '.tooltip' | |
| append_to | 'body' | |
| touch_close_text | 'Tap To Close' | |
| disable_for_touch | false | |
| hover_delay | 50 | |
| Topbar | index | 0 |
| sticky_class | 'sticky' | |
| custom_back_text | true | |
| back_text | 'Back' | |
| is_hover | true | |
| mobile_show_parent_link | false | |
| scrolltop | true | Plugin Name | Setting | Default Value |
Configure on the fly
New to Foundation 5, you can now reconfigure instances of your plugin after the page has loaded and Foundation has already been initialized.
Let's pretend that we have an alert that was on our page when Foundation was first initialized:
HTML
<div data-alert class="alert-box" id="myAlert">
This is a standard alert.
<a href="#" class="close">×</a>
</div>The default fade out speed is 300 milliseconds, if we wanted to change this to 3 seconds we could do the following:
JS
$('#myAlert').foundation({alert: {speed: 3000}});You can set any configuration option or callback this way.
Calling Internal Methods
Foundation JavaScript allows you call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, which are not initialized on page load by default.
This will fire the start method on Joyride:
JS
$(document).foundation('joyride', 'start');