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.


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
focus_on_invalid true
error_labels true
timeout 1000
Accordion active_class 'active'
toggleable true
Clearing close_selectors '.clearing-close'
touch_label '← Swipe to Advance →'
Dropdown active_class 'open'
is_hover false
Interchange load_attr 'interchange'
Joyride expose false
modal 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
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
OffCanvas close_on_click true
Orbit animation 'slide'
timer_speed 10000
pause_on_hover true
resume_on_mouseout false
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'
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'
bg_class 'reveal-modal-bg'
root_element 'body'
bg $('.reveal-modal-bg')
Sliders start 0
end 100
step 1
Tab active_class 'active'
is_hover false
Tooltip 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">&times;</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');
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »