Usage

Enable buttons via JavaScript:

Markup

Date: Mon, 18 Nov 2013 19:28:37 -0800 Subject: fix #11089: document modal show+shown events' relatedTarget property --- javascript.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 06a0bd021..06a5f4570 100644 --- a/javascript.html +++ b/javascript.html @@ -328,11 +328,11 @@ $('#myModal').modal({ show.bs.modal - This event fires immediately when the show instance method is called. + This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. shown.bs.modal - This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). + This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. hide.bs.modal @@ -346,8 +346,8 @@ $('#myModal').modal({ {% highlight js %} -$('#myModal').on('hidden.bs.modal', function () { - // do something… +$('#myModal').on('hidden.bs.modal', function (e) { + // do something... }) {% endhighlight %} -- cgit v1.2.3 From afbdc21def8cf451e73895a6e2594e3dfa0a64e5 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 18 Nov 2013 19:59:09 -0800 Subject: fixes part of #11117: doc that modal show()/hide() return before animation finishes --- javascript.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 06a5f4570..a6c3344f8 100644 --- a/javascript.html +++ b/javascript.html @@ -304,15 +304,15 @@ $('#myModal').modal({ {% endhighlight %}

.modal('toggle')

Manually toggles a modal.

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}

.modal('show')

Manually opens a modal.

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

{% highlight js %}$('#myModal').modal('show'){% endhighlight %}

.modal('hide')

Manually hides a modal.

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}

Events

-- cgit v1.2.3 From 7d456aef76e0e9353269feb71aef8b7ae61f2c1d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 Nov 2013 20:25:07 -0800 Subject: Update scrollspy docs to more clearly indicate usage --- javascript.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index a6c3344f8..9b808c364 100644 --- a/javascript.html +++ b/javascript.html @@ -529,6 +529,7 @@ $('#myDropdown').on('show.bs.dropdown', function () { {% endhighlight %} +

@@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

{% highlight html %} - + + ... + ... {% endhighlight %} @@ -596,7 +603,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Via JavaScript

Call the scrollspy via JavaScript:

{% highlight js %} -$('body').scrollspy({ target: '#navbar-example' }) +$('body').scrollspy({ target: '.navbar-example' }) {% endhighlight %}

-- cgit v1.2.3 From 1e6c95cd5d04ae5750d46195d652e21e9a461647 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 Nov 2013 20:39:00 -0800 Subject: improve affix docs with step-by-step walk through of plugin behavior and required CSS --- javascript.html | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 9b808c364..b424f46f6 100644 --- a/javascript.html +++ b/javascript.html @@ -1933,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () {

Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning of your content.

+ +

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the elemtn from there.

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

{% highlight html %} -

...

+ ... +

{% endhighlight %} -

Requires independent styling ;)

- Affix toggles between three states/classes: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin). - The .affix-top class should be in the regular flow of the document. The .affix class should be position: fixed. And .affix-bottom should be position: absolute. Note: .affix-bottom is special in that the plugin will place the element with JS relative to the offset: { bottom: number } option you've provided. -

Via JavaScript

Call the affix plugin via JavaScript:

{% highlight js %} -- cgit v1.2.3