Update docs

README.md

@@ -72,6 +72,7 @@ To see this working take a look at this [example](http://davidjbradshaw.com/ifra
   * [Methods](docs/iframed_page/methods.md)
 * [Troubleshooting](docs/troubleshooting.md)
 * [Upgrade from version 3](docs/upgrade.md)
+* [Version history](CHANGELOG.md)
 
 ## License
 

docs/getting_started.md

@@ -0,0 +1,39 @@
+## Getting Started
+
+### Install
+
+This package can be installed via NPM (`npm install iframe-resizer --save`).
+
+### Usage
+
+The package contains two minified JavaScript files in the [js](../js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with **native** JavaScript;
+
+```js
+var iframes = iFrameResize( [{options}], [css selector] || [iframe] );
+```
+
+or via **jQuery**.
+
+```js
+$('iframe').iFrameResize( [{options}] );
+```
+
+The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) contained within your iFrame. <i>This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page</i>.
+
+### Typical setup
+
+The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
+
+```html
+<style>iframe{width: 1px;min-width: 100%;}</style>
+<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
+<script>iFrameResize({log:true}, '#myIframe')</script>
+```
+
+**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
+
+If you have problems, check the [troubleshooting](troubleshooting.md) section.
+
+### Example
+
+To see this working take a look at this [example](http://davidjbradshaw.com/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).

docs/parent_page/options.md

@@ -149,12 +149,14 @@ Some CSS techniques may require you to change this setting to one of the followi
 * **bodyScroll** uses `document.body.scrollWidth` <sup>*</sup>
 * **documentElementOffset** uses `document.documentElement.offsetWidth`
 * **documentElementScroll** uses `document.documentElement.scrollWidth` <sup>*</sup>
-* **scroll** takes the largest value of the two scroll options
+* **scroll** takes the largest value of the two scroll options <sup>*</sup>
 * **max** takes the largest value of the main four options <sup>*</sup>
 * **min** takes the smallest value of the main four options <sup>*</sup>
 * **rightMostElement** Loops though every element in the the DOM and finds the right most point <sup>†</sup>
 * **taggedElement** Finds the left most element with a `data-iframe-width` attribute
 
-Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see [iFrame Page Options](https://github.com/davidjbradshaw/iframe-resizer#iframe-page-options) section below.
+Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see the [iFrame Page Options](../iframed_page/options.md) section for more details
 
 <sup> † </sup> <i>The **rightMostElement** option is the most reliable way of determining the page width. However, it does have a performance impact as it requires calculating the position of every element on the page. The **taggedElement** option provides much greater performance by limiting the number of elements that need their position checked.</i>
+
+<sup>*</sup> These methods can cause screen flicker in some browsers.

docs/readme.md

@@ -1,2 +1,14 @@
 # iFrame-Resizer Documentation
 
+* [Getting Started](getting_started.md)
+* **Parent Page API**
+  * [Options](parent_page/options.md)
+  * [Events](parent_page/events.md)
+  * [Methods](parent_page/methods.md)
+* **IFramed Page API**
+  * [Options](iframed_page/options.md)
+  * [Events](iframed_page/events.md)
+  * [Methods](iframed_page/methods.md)
+* [Troubleshooting](troubleshooting.md)
+* [Upgrade from version 3](upgrade.md)
+* [Version history](../CHANGELOG.md)

docs/upgrade.md

@@ -1,5 +1,5 @@
 ## Upgrading to version 4
 
-In version 4 support for IE 8-10 and Andriod 4.4 has been removed, if you still need this then please use version 3 or this library.
+In version 4 support for IE 8-10 and Andriod 4.4 has been removed, if you still need this then please use version 3 of this library.
 
 The callback methods have been renamed to onEvents, so for example `scrollCallback` is now called `onScroll`. This is to enable better integration with modern libraries such as React.