Skip to content

Commit

Permalink
Typo and wording
Browse files Browse the repository at this point in the history
  • Loading branch information
Pete Cooper committed May 29, 2014
1 parent f13eeb3 commit 28ebb2c
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions doc/pages/javascript-utilities.html
@@ -1,20 +1,20 @@
---
title: Javascript Utilities
title: JavaScript Utilities
---

<h3 class="subheader">Foundation includes a handful of helpful Javascript utilities to help you add common functionalities to your apps and plugins.</h3>
<h3 class="subheader">Foundation includes a handful of helpful JavaScript utilities to help you add common functionalities to your apps and plugins.</h3>

***

<h3 id="using">Using the Javascript Utilities</h3>
<h3 id="using">Using the JavaScript Utilities</h3>

There are two ways to use the Foundation utilities: by calling them within the Foundation.utils namespace and by inheriting them into an object.

<h4>Foundation.utils</h4>

As long as <kbd>foundation.js</kbd> has been loaded into the page, you can access any of the Foundation utilities by calling <code>Foundation.utils.{function_name}</code>.

For example, if you type the following into the Javascript console it will return a 6-digit alphanumeric string.
For example, if you type the following into the JavaScript console it will return a 6-digit alphanumeric string.

{{#markdown}}
```javascript
Expand All @@ -25,7 +25,7 @@ <h4>Foundation.utils</h4>

<h4>Method Inheritance</h4>

If you have any plain ole&#8217; Javascript object (a POJO), then you can inherit any of the Foundation Javascript utilities by calling the <code>Foundation.inherit</code> method. To use the inherit method, pass in the object you want to inherit the methods, followed by a space separated string of methods that you want to inherit.
If you have any plain ole&#8217; JavaScript object (a POJO), then you can inherit any of the Foundation JavaScript utilities by calling the <code>Foundation.inherit</code> method. To use the inherit method, pass in the object you want to inherit the methods, followed by a space separated string of methods that you want to inherit.

{{#markdown}}
```javascript
Expand Down Expand Up @@ -183,7 +183,7 @@ <h4>Method Signature</h4>

<h3 id="data-options">Data Options</h3>

The <code>data_options</code> method parses a semi-colon delimited set of values in the selected element&#8217;s <code>data-options</code> HTML attribute. It&#8217;s useful for allowing settings to be passed into a script or plugin from the markup.
The <code>data_options</code> method parses a semicolon delimited set of values in the selected element&#8217;s <code>data-options</code> HTML attribute. It&#8217;s useful for allowing settings to be passed into a script or plugin from the markup.

<div class="row">
<div class="large-6 columns">
Expand Down Expand Up @@ -225,7 +225,7 @@ <h3 id="media-queries">Media Queries</h3>

Media queries are the backbone of most responsive CSS techniques, though they can be a bit unwieldy to deal with. To make them easier to deal with, we&#8217;ve included two helper methods (<code>register_media</code> and <code>add_custom_rule</code>), as well as polyfilled the native function <code>matchMedia</code> to work with all the browsers Foundation supports.

<strong>Register Media</strong> is used to add a new media query to Foundation&#8217;s list of JS accessible media queries. These can be found by calling <code>Foundation.media_queries</code>. The method works by appending a meta tag to the head of the document and checking the font-family of the element&#8217;s computed styles for the media query string.
<strong>Register Media</strong> is used to add a new media query to Foundation&#8217;s list of JavaScript-accessible media queries. These can be found by calling <code>Foundation.media_queries</code>. The method works by appending a meta tag to the head of the document and checking the <code>font-family</code> of the element&#8217;s computed styles for the media query string.

<strong>Add Custom Rules</strong> is a method to add a custom CSS rule as a string to the document. If a media query is passed in the method will apply the style within that media query, otherwise it will be applied globally.

Expand Down Expand Up @@ -294,7 +294,7 @@ <h4>Method Signature</h4>

<h3 id="image-loaded">Image Loaded</h3>

While binding to the document ready event is usually good enough for most plugins that manipulate the DOM, sometimes you need ALL the content to be loaded before you start calculating things like element sizes. This is especially important with images, which can take a while to load and drastically affect the layout of the page, depending on their size.
While binding to the document ready event is usually good enough for most plugins that manipulate the DOM, sometimes you need ALL the content to be loaded before you start calculating things like element sizes. This is especially important with images, which can take a while to load and significantly affect the layout of the page, depending on their size.

This can be avoided by using the <code>image_loaded</code> method, which lets you pass in a callback to be executed when an image has completely finished loading. Passing in a jQuery selector that matches multiple images will cause the callback to be executed when all of the images are fully loaded.

Expand Down

0 comments on commit 28ebb2c

Please sign in to comment.