From 784a95d94598301a35a89a591a426438cace96a7 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 10 Feb 2014 21:34:05 -0800
Subject: Documents #10140

---
 docs/javascript.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 16cd66e65..1d2a980ae 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1094,6 +1094,8 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 {% endhighlight %}
 </div>
 
+
+
 <!-- Popovers
 ================================================== -->
 <div class="bs-docs-section">
@@ -1160,8 +1162,11 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 
   <h3>Live demo</h3>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</a>
   </div>
+{% highlight html %}
+<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</a>
+{% endhighlight %}
 
   <h4>Four directions</h4>
   <div class="bs-example tooltip-demo">
@@ -1197,6 +1202,20 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on right
 </button>
+{% endhighlight %}
+
+  <h4>Dismiss on next click</h4>
+  <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
+  <div class="bs-example" style="padding-bottom: 24px;">
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</a>
+  </div>
+{% highlight html %}
+<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</a>
+{% endhighlight %}
+{% highlight js %}
+$('.popover-dismiss').popover({
+  trigger: 'focus'
+})
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-warning">
-- 
cgit v1.2.3


From 7d1fd44b9a9a998850533c1023667e2ee6cb1ad0 Mon Sep 17 00:00:00 2001
From: Heinrich Fenkart <hnrch02@gmail.com>
Date: Fri, 28 Feb 2014 20:11:02 +0100
Subject: Fix small typo in JavaScript docs

---
 docs/javascript.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index cc125d832..bf5944fcb 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -65,7 +65,7 @@ $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Boot
 {% endhighlight %}
 
   <h3 id="js-events">Events</h3>
-  <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+  <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
   <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
   <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
 {% highlight js %}
-- 
cgit v1.2.3


From 0b8d27a125dfaace415818d2bcb7c018a0ec0bd0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 7 Mar 2014 01:30:38 -0800
Subject: fix derped html

---
 docs/javascript.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index a60c4df7f..48e07485a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1169,10 +1169,10 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 
   <h3>Live demo</h3>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</a>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
   </div>
 {% highlight html %}
-<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</a>
+<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 {% endhighlight %}
 
   <h4>Four directions</h4>
@@ -1214,10 +1214,10 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   <h4>Dismiss on next click</h4>
   <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</a>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
   </div>
 {% highlight html %}
-<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</a>
+<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
 {% endhighlight %}
 {% highlight js %}
 $('.popover-dismiss').popover({
-- 
cgit v1.2.3


From 4d870af2aad36563883ac5751f52d9f0288a0673 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 9 Mar 2014 15:19:26 -0700
Subject: Fixes #12487: Document required use of position relative for
 scrollspy

---
 docs/javascript.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 48e07485a..d3eeeb5c2 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -665,8 +665,16 @@ $('#myDropdown').on('show.bs.dropdown', function () {
 
   <h2 id="scrollspy-usage">Usage</h2>
 
+  <h3>Requires relative positioning</h3>
+  <p>No matter the implementation method, scrollspy requires the use of <code>position: absolute;</code> on the element you're spying on. In most cases this is the <code>&lt;body&gt;</code>.</p>
+
   <h3>Via data attributes</h3>
   <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
+{% highlight css %}
+body {
+  position: relative;
+}
+{% endhighlight %}
 {% highlight html %}
 <body data-spy="scroll" data-target=".navbar-example">
   ...
@@ -680,7 +688,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
 {% endhighlight %}
 
   <h3>Via JavaScript</h3>
-  <p>Call the scrollspy via JavaScript:</p>
+  <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
 {% highlight js %}
 $('body').scrollspy({ target: '.navbar-example' })
 {% endhighlight %}
-- 
cgit v1.2.3


From aacafb2d5c28460477311e92de4de8ac88b2461a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 9 Mar 2014 16:03:46 -0700
Subject: Fixes #12892: Link to one of the SO articles on Bootstrap modals and
 YouTube

---
 docs/javascript.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index d3eeeb5c2..798ac1110 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -231,13 +231,17 @@ $('#myModal').on('show.bs.modal', function (e) {
 </div>
 {% endhighlight %}
 
-
   <div class="bs-callout bs-callout-warning">
     <h4>Make modals accessible</h4>
     <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
     <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
   </div>
 
+  <div class="bs-callout bs-callout-info">
+    <h4>Embedding YouTube videos</h4>
+    <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
+  </div>
+
   <h2 id="modals-sizes">Optional sizes</h2>
   <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
   <div class="bs-example">
-- 
cgit v1.2.3