Browse files

Fix a few typos in documentation.

  • Loading branch information...
1 parent c9bf7cb commit 53ba97da293bf17fc507aa04e9931140080a3eb2 @johnboxall johnboxall committed Feb 26, 2013
Showing with 154 additions and 138 deletions.
  1. +2 −7 www/_includes/nav-docsv2.md
  2. +31 −31 www/_includes/navv2.html
  3. +2 −11 www/_layouts/basev2.html
  4. +1 −1 www/_layouts/docv2.html
  5. +56 −30 www/index.html
  6. +9 −11 www/v2/docs/capturing.md
  7. +53 −47 www/v2/docs/index.md
View
9 www/_includes/nav-docsv2.md
@@ -1,5 +1,5 @@
# v2 Documentation Index
-
+
- [Quick start]({{ site.baseurl }}/v2/docs/)
- [Capturing]({{ site.baseurl }}/v2/docs/capturing)
- [`Capture.init()`]({{ site.baseurl }}/v2/docs/capturing/#captureinitdocument-prefixx-)
@@ -9,9 +9,4 @@
- [`render(htmlString)`]({{ site.baseurl }}/v2/docs/capturing/#renderhtmlstring)
- [`renderCapturedDoc()`]({{ site.baseurl }}/v2/docs/capturing/#rendercaptureddoc)
- [`restore()`]({{ site.baseurl }}/v2/docs/capturing/#restore)
- - [`Browser Support`]({{ site.baseurl }}/v2/docs/capturing/#browser-support)
-
- - Image Resizing (Coming Soon)
- - Jazzcat (Coming Soon)
- - Templating (Coming Soon)
- - Glossary (Coming Soon)
+ - [`Browser Support`]({{ site.baseurl }}/v2/docs/capturing/#browser-support)
View
62 www/_includes/navv2.html
@@ -1,31 +1,31 @@
- <div class="nav-wrapper">
- <ul class="nav">
- <li class="nav-about">
- {% active_links %}
- <a href="/mobifyjs/" class="rounded about">About</a>
- {% endactive_links %}
- </li>
- <li class="nav-docs">
- {% active_links prefix %}
- <a href="/mobifyjs/v2/docs/" class="rounded">Docs</a>
- </li>
- <li class="nav-examples">
- <a href="/mobifyjs/v2/examples/" class="rounded">Examples</a>
- </li>
- <li class="nav-community">
- <a href="/mobifyjs/v2/community/" class="rounded">Community</a>
- </li>
- <li class="dropdown nav-version">
- <a class="dropdown-toggle rounded" data-toggle="dropdown" href="#">
- 2.0<b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="/mobifyjs/docs/">1.1</a></li>
- </ul>
- </li>
- <li>
- <a href="//twitter.com/mobifyjs" class="rounded"><i class="icon-twitter"></i></a>
- </li>
- </ul><!-- .nav -->
- {% endactive_links %}
- </div>
+<div class="nav-wrapper">
+ <ul class="nav">
+ <li class="nav-about">
+ {% active_links %}
+ <a href="/mobifyjs/" class="rounded about">About</a>
+ {% endactive_links %}
+ </li>
+ <li class="nav-docs">
+ {% active_links prefix %}
+ <a href="/mobifyjs/v2/docs/" class="rounded">Docs</a>
+ </li>
+ <li class="nav-examples">
+ <a href="/mobifyjs/v2/examples/" class="rounded">Examples</a>
+ </li>
+ <li class="nav-community">
+ <a href="/mobifyjs/v2/community/" class="rounded">Community</a>
+ </li>
+ <li class="dropdown nav-version">
+ <a class="dropdown-toggle rounded" data-toggle="dropdown" href="#">
+ 2.0<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="/mobifyjs/docs/">1.1</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="//twitter.com/mobifyjs"
+ class="rounded"><i class="icon-twitter"></i></a>
+ </li>
+ </ul><!-- .nav -->
+ {% endactive_links %}
+</div>
View
13 www/_layouts/basev2.html
@@ -2,20 +2,11 @@
layout: base
---
-
<div class="navbar row-fluid">
- <div class="navbar-inner">
+ <div class="navbar-inner">
<a class="brand" href="/mobifyjs/">Mobify.js</a>
-
{% include navv2.html %}
-
- <!-- Not Implemented
- <form class="navbar-search pull-right" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- -->
-
</div><!-- .navbar-inner -->
</div><!-- .navbar -->
-{{ content }}
+{{ content }}
View
2 www/_layouts/docv2.html
@@ -10,4 +10,4 @@
<div class="span4 sidebar-nav docs-nav rounded shaded">
{% active_links %}{% markdown %}{% include nav-docsv2.md %}{% endmarkdown %}{% endactive_links %}
</div>
-</div>
+</div>
View
86 www/index.html
@@ -8,7 +8,7 @@
<div class="span1"></div>
<div class="span10 video-intro">
<div class="alert alert-block">
- <p>Looking for the 1.1 documention? <a href="/mobifyjs/v1/">Head over here.</a></p>
+ <p>Looking for the 1.1 documentation? <a href="/mobifyjs/v1/">It's right here!</a></p>
</div>
</div>
</div>
@@ -20,7 +20,12 @@
Adapt your site for <strong>any device</strong>.
</p>
<p class="lead-mini">
- Mobify.js is an open source library that helps you adapt any website to support any device. Core to Mobify.js is its ability to capture and manipulate the DOM before any resources have downloaded, which unlocks the ability to do resource control, conditional loading, image resizing, javascript concatination and more. Powers millions of daily mobile visits to your favourite websites.
+ Mobify.js is an open source library that helps you adapt any website
+ to support any device. Core to Mobify.js is its ability to capture
+ and manipulate the DOM before any resources have downloaded, which
+ unlocks the ability to do resource control, conditional loading,
+ image resizing, javascript concatination and more. Powers millions
+ of daily mobile visits to your favourite websites.
</p>
</div>
@@ -44,20 +49,30 @@
<div class="row-fluid">
<div class="span6">
<div class="install-summary">
- <h2>Use Mobify.js to adapt your existing responsive site</h2>
- <p>Mobify.js gives you the ability to adapt your website by offering a number of performance enhancements (conditional loading, image resizing, script concatination, and more) and makes it easy to optimize per device.</p>
-
+ <h2>Adapt an existing responsive site</h2>
+ <p>
+ Mobify.js gives you the ability to adapt your
+ website by offering a number of performance
+ enhancements (conditional loading, image
+ resizing, script concatination, and more) and
+ makes it easy to optimize per device.
+ </p>
<div class="actions">
- <a href="/mobifyjs/v2/docs/"><i class="icon-beaker"></i>Get Started</a>
+ <a href="/mobifyjs/v2/docs/">
+ <i class="icon-beaker"></i>Get Started</a>
</div>
</div>
</div>
<div class="span6">
<div class="install-summary">
- <h2>Use Mobify.js to recreate pages using client-side templating</h2>
- <p>Mobify.js allows you to further adapt pages using client-side templating (powered by Dust.js) when you need to rewrite the original markup of your existing site.</p>
-
+ <h2>Recreate pages using client-side templating</h2>
+ <p>
+ Mobify.js allows you to further adapt pages
+ using client-side templating (powered by
+ Dust.js) when you need to rewrite the original
+ markup of your existing site.
+ </p>
<div class="actions">
<a href="#" onclick="return false;">(Coming Soon)</a>
</div>
@@ -72,7 +87,11 @@
<div class="social-proof">
<div class="row-fluid">
<div class="span6">
- <p class="quote">&#8220;Mobify.js has been a great match for our business, we have been able to launch 7 mobile websites with a team of two front-end developers.&#8221;</p>
+ <p class="quote">
+ &#8220;Mobify.js has been a great match for our business, we
+ &#have been able to launch 7 mobile websites with a team of two
+ &#front-end developers.&#8221;
+ </p>
<p><cite>&#8211; Jake Rutter, Direct Wines</cite></p>
</div>
<div class="span2"></div>
@@ -85,18 +104,29 @@
</div>
</div>
-
<div class="how-it-works">
<h2>Why Mobify.js?</h2>
<div class="row-fluid">
<div class="span4 manipulate-dom">
- <p>Take control of your existing DOM on mobile and tablets. Move elements around, replace heavy images and scripts with low-bandwidth optimized versions.</p>
+ <p>
+ Take control of your existing DOM on mobile and tablets. Move
+ elements around, replace heavy images and scripts with low-
+ bandwidth optimized versions.
+ </p>
</div>
<div class="span4 desktop-content">
- <p>Recreate brand new experiences using client-side templating when responsive falls short. As you make changes and add content your mobile site won&#8217;t fall out of sync.</p>
+ <p>
+ Recreate brand new experiences using client-side templating when
+ responsive falls short. As you make changes and add content your
+ mobile site won&#8217;t fall out of sync.
+ </p>
</div>
<div class="span4 responsive">
- <p>Use Mobify.js to adapt your site to all devices, for both responsive sites and sites that want to go mobile fast with client-side templating.</p>
+ <p>
+ Use Mobify.js to adapt your site to all devices, for both
+ responsive sites and sites that want to go mobile fast with
+ client-side templating.
+ </p>
</div>
</div><!-- .row-fluid -->
</div>
@@ -108,23 +138,19 @@
<span></span>
</div>
<div class="span5">
- <p>Let the team who created Mobify.js help you take your finely-tuned mobile site even further.</p>
-
- <p>The Mobify Cloud offers a distributed CDN, mobile workflow management, QA testing, automatic image resizing, smart JavaScript optimization, and more.</p>
+ <p>
+ Let the team who created Mobify.js help you take your finely-tuned
+ mobile site even further.
+ </p>
+ <p>
+ The Mobify Cloud offers a distributed CDN, mobile workflow
+ management, QA testing, automatic image resizing, smart JavaScript
+ optimization, and more.
+ </p>
</div>
<div class="span4 cta">
- <a href="http://cloud.mobify.com/" class="btn btn-primary rounded">Try Mobify Cloud for Free</a>
+ <a href="https://cloud.mobify.com/"
+ class="btn btn-primary rounded">Try Mobify Cloud for Free</a>
</div>
</div><!-- .row-fluid -->
-</div><!-- .next-level -->
-
-
-<script>
-
- $("a.play").click(function() {
- $("div.video-container").parent().addClass("animate-video").delay(500).addClass("display-video");
- $("div.video-container iframe").show(500);
- return(false);
- });
-
-</script>
+</div><!-- .next-level -->
View
20 www/v2/docs/capturing.md
@@ -5,9 +5,8 @@ title: Mobify.js Documentation
# Capturing
-To use the capturing API, you must install the correct tag on your site.
-If you have not already, please refer to the
-[quickstart guide](/mobifyjs/v2/docs/) to get setup.
+To use the Capturing API, you must first install the Mobify.js tag on your site.
+If you have not already, please refer to the [quickstart guide](/mobifyjs/v2/docs/) to get setup.
* TOC
{:toc}
@@ -31,12 +30,11 @@ properties prepended with a prefix to prevent resources from loading.
**Example**
- // change src of first script
+ // Change src of first script
var capture = Mobify.Capture.init();
var script = capturedDoc.getElementsByTagName("script")[0];
// Must use x-src, not src
script.setAttribute("x-src", "/path/to/script.js");
- }
capture.renderCapturedDoc();
### Useful properties
@@ -63,7 +61,7 @@ You have access to all DOM API methods on the `captured document`.
var capture = Mobify.Capture.init();
var capturedDoc = capture.getCapturedDoc();
- var paragraphs = capturedDoc.querySelectorAll("p")
+ var paragraphs = capturedDoc.querySelectorAll("p");
## window.capturing
@@ -98,13 +96,13 @@ alternative to `capturedDoc.outerHTML`.
## `render(htmlString)`
-Opens the original `document` and renders it from a clean slate
+Opens the original `document` and renders it from a clean slate
with the htmlString.
**Usage/Example:**
var capture = Mobify.Capture.init();
- capture.render("<html><body><h1>Test!</h1></body></html>")
+ capture.render("<html><body><h1>Test!</h1></body></html>");
__Note: This method is async__
@@ -117,7 +115,7 @@ Writes out the captured document to the original document.
var capture = Mobify.Capture.init();
// Removes all scripts
var scripts = capturedDoc.getElementsByTagName("script");
- for(var i = 0; i < scripts.length; i++) {
+ for (var i = 0; i < scripts.length; i++) {
var script = scripts[i];
script.parentNode.removeChild(script);
}
@@ -146,8 +144,8 @@ __Note: This method is async__
| Browser | Version |
|------------------------------|---------|
-| Webkit (Safari, Chrome, etc) | --- |
-| Firefox | 4.0+ |
+| Webkit (Safari, Chrome, etc) | --- |
+| Firefox | 4.0+ |
| Opera | 11.0+ |
| Internet Explorer | 10+ |
View
100 www/v2/docs/index.md
@@ -7,65 +7,71 @@ title: Mobify.js Documentation
## What is Mobify.js?
-Mobify.js is a library for adapting websites across a number of different kinds of devices. Core to Mobify.js is its ability to capture and
-manipulate the DOM before any resources have downloaded, which unlocks the ability to do resource control, conditional loading, image resizing, javascript
-concatination and more.
+Mobify.js is a library for adapting websites across a number of different kinds
+of devices. Core to Mobify.js is its ability to capture and manipulate the DOM
+before any resources have downloaded, which unlocks the ability to do resource
+control, conditional loading, image resizing, javascript concatination and
+more.
## Instructions
-1. Install the Mobify.js tag in your site. It must be placed **immediately** after
-the opening <head> tag. ([Non-minified version on Github](https://github.com/mobify/mobifyjs/blob/v2.0-documentation/tag/bootstrap.html)):
-
- <pre id="mobify-tag"><code class="javascript">&lt;script class="mobify" id="mobify-tag">(function(a,b,c,d,e){function f(a,c,d){var e=b.createElement("script"),f=b.getElementById("mobify-tag");return e.src=a,e.id=c,e.setAttribute("class",d),f.parentNode.insertBefore(e,f),e}!this.Mobify&&c()&&(b.write('&lt;plaintext style="display:none">'),setTimeout(function(){a.capturing=!0;var b=f(d,"mobify-js","mobify");b.onload=function(){e&&f(e,"mobify-js-main","mobify")}}))})(window,document,function(){var b,a=/webkit|msie\s10|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|3ds/i.exec(navigator.userAgent);return a&&(b=a[1]&&"firefox"===a[1].toLowerCase()&&4>+a[2]?!1:a[3]&&"opera"===a[3].toLowerCase()&&11>+a[4]?!1:!0),b?!0:!1},
- // path to Mobify.js library
- "//cdn.mobify.com/mobifyjs/mobify-2.0.0alpha1.min.js",
- // Path to main executable
- "/PATH/TO/main.js");
- &lt;/script>
- </code></pre>
-
-2. Create a new javascript file called `main.js`, and correctly
-set the path to this script by replacing /PATH/TO/ with the
-path to your new script.
-
-3. Copy the following code into your new js file. It is an example which will replace all images with grumpy cats on your site (and will NOT load the original image!):
-
- <pre><code class="javascript">
- var capturing = window.capturing || false;
- if (capturing) {
- console.log("Executing during capturing phase!");
-
- // Grab reference to the captured document
- var capture = Mobify.Capture.init();
- var capturedDoc = capture.capturedDoc;
-
- var grumpyUrl = "http://pics.blameitonthevoices.com/092012/small_grumpy%20cat%20caption.jpg";
-
- var imgs = capturedDoc.getElementsByTagName("img");
- for(var i = 0; i < imgs.length; i++) {
- var img = imgs[i];
- // To escape content, we prepend resources with x-,
- // so to change the src, you must set x-src. Read more:
- // www.mobifyjs.com/v2/docs/capturing/#new-mobifycapturedocument-prefixx-
- img.setAttribute("x-src", grumpyUrl);
- }
+1. Install the Mobify.js tag on your site. It must be placed **immediately** after
+ the opening <head> tag. [unminified][]:
+
+<pre id="mobify-tag"><code class="html">&lt;script class="mobify" id="mobify-tag">(function(a,b,c,d,e){function f(a,c,d){var e=b.createElement("script"),f=b.getElementById("mobify-tag");return e.src=a,e.id=c,e.setAttribute("class",d),f.parentNode.insertBefore(e,f),e}!this.Mobify&&c()&&(b.write('&lt;plaintext style="display:none">'),setTimeout(function(){a.capturing=!0;var b=f(d,"mobify-js","mobify");b.onload=function(){e&&f(e,"mobify-js-main","mobify")}}))})(window,document,function(){var b,a=/webkit|msie\s10|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|3ds/i.exec(navigator.userAgent);return a&&(b=a[1]&&"firefox"===a[1].toLowerCase()&&4>+a[2]?!1:a[3]&&"opera"===a[3].toLowerCase()&&11>+a[4]?!1:!0),b?!0:!1},
+// path to Mobify.js library
+"//cdn.mobify.com/mobifyjs/mobify-2.0.0alpha1.min.js",
+// Path to main executable
+"/PATH/TO/main.js");
+&lt;/script></code></pre>
+
+2. Create a new JavaScript file called `main.js`, and correctly
+ set the path to this script by replacing /PATH/TO/ with the
+ path to your new script.
+
+3. Copy the following code into your `main.js`. It is an example which will
+ replace all images with grumpy cats on your site and will NOT load the
+ original images:
+
+<pre><code class="javascript">var capturing = window.capturing || false;
+if (capturing) {
+ console.log("Executing during capturing phase!");
+
+ // Grab reference to the captured document
+ var capture = Mobify.Capture.init();
+ var capturedDoc = capture.capturedDoc;
+
+ var grumpyUrl = "http://pics.blameitonthevoices.com/092012/small_grumpy%20cat%20caption.jpg";
+
+ var imgs = capturedDoc.getElementsByTagName("img");
+ for (var i = 0; i < imgs.length; i++) {
+ var img = imgs[i];
+ // To escape content, we prepend resources with "x-",
+ // so to change the src, you must set x-src. Read more:
+ // www.mobifyjs.com/v2/docs/capturing/#new-mobifycapturedocument-prefixx-
+ img.setAttribute("x-src", grumpyUrl);
+ }
- // Render captured dom back to original document
- capture.renderCapturedDoc();
+ // Render captured dom back to original document
+ capture.renderCapturedDoc();
- } else {
- console.log("Executing during post-capturing phase!");
- }
- </code></pre>
+} else {
+ console.log("Executing during post-capturing phase!");
+}</code></pre>
-4. Browse to your site on a compatible browser - WebKit (Chrome, Safari, etc), FF4 or greater, Opera 11/12, IE10. Also, browse to a page with images to see the full effect of the grumpy cat!
+4. Browse to your site on a compatible browser - WebKit (Chrome, Safari, etc),
+ FF4 or greater, Opera 11/12, IE10. Also, browse to a page with images to see the
+ full effect of the grumpy cat!
- Note: You may also want to open up network tab of the web inspector on your browser to see that
-the original images from your site were not downloaded.
+ the original images from your site were not downloaded.
## Where to next?
* [Read our in-depth tutorial](./tutorial/)
* [Capturing Reference](./capturing/)
+
+
+[unminified]: https://github.com/mobify/mobifyjs/blob/v2.0-documentation/tag/bootstrap.html

0 comments on commit 53ba97d

Please sign in to comment.