Skip to content

Commit 306ec81

Browse files
kswedbergkswedberg
committed
Add <figure> and <figcaption> for longdesc imgs
1 parent 1cb3361 commit 306ec81

25 files changed

Lines changed: 131 additions & 100 deletions

‎entries/animate.xml‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,18 @@ $( "#clickme" ).click(function() {
5656
});
5757
</code></pre>
5858
<p class="image">
59-
<img src="/resources/animate-1.jpg" alt=""/>
59+
<figure>
60+
<img src="/resources/animate-1.jpg" alt=""/>
61+
<figcaption>figure 1</figcaption>
62+
</figure>
6063
</p>
6164
<p>Note that the target value of the <code>height</code> property is <code>'toggle'</code>. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
6265
</p>
6366
<p class="image">
64-
<img src="/resources/animate-2.jpg" alt=""/>
67+
<figure>
68+
<img src="/resources/animate-2.jpg" alt=""/>
69+
<figcaption>figure 2</figcaption>
70+
</figure>
6571
</p>
6672
<p>The <code>opacity</code> of the image is already at its target value, so this property is not animated by the second click. Since the target value for <code>left</code> is a relative value, the image moves even farther to the right during this second animation.</p>
6773
<p>Directional properties (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) have no discernible effect on elements if their <code>position</code> style property is <code>static</code>, which it is by default.</p>

‎entries/click.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@
3434
Trigger the handler
3535
&lt;/div&gt;
3636
</code></pre>
37-
<p class="image">
37+
<figure>
3838
<img src="/resources/0042_05_03.png" alt=""/>
39-
</p>
39+
<figcaption>figure 1</figcaption>
40+
</figure>
4041
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
4142
<pre><code>
4243
$( "#target" ).click(function() {

‎entries/dblclick.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@
3434
Trigger the handler
3535
&lt;/div&gt;
3636
</code></pre>
37-
<p class="image">
37+
<figure>
3838
<img src="/resources/0042_05_04.png" alt=""/>
39-
</p>
39+
<figcaption>figure 1</figcaption>
40+
</figure>
4041
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
4142
<pre><code>
4243
$( "#target" ).dblclick(function() {

‎entries/fadeIn.xml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ $( "#clickme" ).click(function() {
3535
});
3636
});
3737
</code></pre>
38-
<p class="image four-across">
39-
<img src="/resources/0042_06_33.png" alt=""/>
40-
<img src="/resources/0042_06_34.png" alt=""/>
41-
<img src="/resources/0042_06_35.png" alt=""/>
42-
<img src="/resources/0042_06_36.png" alt=""/>
43-
</p>
38+
<figure>
39+
<img class="column three" src="/resources/0042_06_33.png" alt=""/>
40+
<img class="column three" src="/resources/0042_06_34.png" alt=""/>
41+
<img class="column three" src="/resources/0042_06_35.png" alt=""/>
42+
<img class="column three" src="/resources/0042_06_36.png" alt=""/>
43+
<figcaption>figure 1</figcaption>
44+
</figure>
4445
<h4 id="easing">Easing</h4>
4546
<p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
4647
<h4 id="callback-function">Callback Function</h4>

‎entries/fadeOut.xml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
3636
});
3737
});
3838
</code></pre>
39-
<p class="image four-across">
40-
<img src="/resources/0042_06_37.png" alt=""/>
41-
<img src="/resources/0042_06_38.png" alt=""/>
42-
<img src="/resources/0042_06_39.png" alt=""/>
43-
<img src="/resources/0042_06_40.png" alt=""/>
44-
</p>
39+
<figure>
40+
<img class="column three" src="/resources/0042_06_37.png" alt=""/>
41+
<img class="column three" src="/resources/0042_06_38.png" alt=""/>
42+
<img class="column three" src="/resources/0042_06_39.png" alt=""/>
43+
<img class="column three" src="/resources/0042_06_40.png" alt=""/>
44+
<figcaption>figure 1</figcaption>
45+
</figure>
4546
<div class="warning">
4647
<p><strong>Note: </strong>To avoid unnecessary DOM manipulation, <code>.fadeOut()</code> will not hide an element that is already considered hidden. For information on which elements jQuery considers hidden, see <a href="/hidden-selector/"> :hidden Selector</a>.</p>
4748
</div>

‎entries/fadeTo.xml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,13 @@ $( "#clickme" ).click(function() {
5050
});
5151
});
5252
</code></pre>
53-
<p class="image four-across">
54-
<img src="/resources/0042_06_41.png" alt=""/>
55-
<img src="/resources/0042_06_42.png" alt=""/>
56-
<img src="/resources/0042_06_43.png" alt=""/>
57-
<img src="/resources/0042_06_44.png" alt=""/>
58-
</p>
53+
<figure>
54+
<img class="column three" src="/resources/0042_06_41.png" alt=""/>
55+
<img class="column three" src="/resources/0042_06_42.png" alt=""/>
56+
<img class="column three" src="/resources/0042_06_43.png" alt=""/>
57+
<img class="column three" src="/resources/0042_06_44.png" alt=""/>
58+
<figcaption>figure 1</figcaption>
59+
</figure>
5960
<p>With <code>duration</code> set to <code>0</code>, this method just changes the <code>opacity</code> CSS property, so <code>.fadeTo( 0, opacity )</code> is the same as <code>.css( "opacity", opacity )</code>.</p>
6061
</longdesc>
6162
<note id="jquery.fx.off" type="additional" data-title=".fadeTo()"/>

‎entries/height.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
<desc>Get the current computed height for the first element in the set of matched elements.</desc>
1010
<longdesc>
1111
<p>The difference between <code>.css( "height" )</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>
12-
<p class="image">
12+
<figure>
1313
<img src="/resources/0042_04_01.png"/>
14-
</p>
14+
<figcaption>figure 1</figcaption>
15+
</figure>
1516
<p>This method is also able to find the height of the window and document.</p>
1617
<pre><code>
1718
// Returns height of browser viewport

‎entries/hide.xml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ $( "#clickme" ).click(function() {
5252
});
5353
});
5454
</code></pre>
55-
<p class="image four-across">
56-
<img src="/resources/0042_06_05.png" alt=""/>
57-
<img src="/resources/0042_06_06.png" alt=""/>
58-
<img src="/resources/0042_06_07.png" alt=""/>
59-
<img src="/resources/0042_06_08.png" alt=""/>
60-
</p>
55+
<figure>
56+
<img class="column three" src="/resources/0042_06_05.png" alt=""/>
57+
<img class="column three" src="/resources/0042_06_06.png" alt=""/>
58+
<img class="column three" src="/resources/0042_06_07.png" alt=""/>
59+
<img class="column three" src="/resources/0042_06_08.png" alt=""/>
60+
</figure>
6161
</longdesc>
6262
<note id="jquery.fx.off" type="additional" data-title=".hide()"/>
6363
<example>

‎entries/innerHeight.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
<longdesc>
1212
<p>This method returns the height of the element, including top and bottom padding, in pixels.</p>
1313
<p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/height/">.height()</a></code> instead.</p>
14-
<p class="image">
14+
<figure>
1515
<img src="/resources/0042_04_02.png"/>
16-
</p>
16+
<figcaption>figure 1</figcaption>
17+
</figure>
1718
</longdesc>
1819
<note id="dimensions-number" type="additional" data-title=".innerHeight()"/>
1920
<note id="hidden-element-dimensions" type="additional" data-title=".innerHeight()"/>

‎entries/innerWidth.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
<longdesc>
1111
<p>This method returns the width of the element, including left and right padding, in pixels.</p>
1212
<p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/width/">.width()</a></code> instead.</p>
13-
<p class="image">
13+
<figure>
1414
<img src="/resources/0042_04_05.png"/>
15-
</p>
15+
<figcaption>figure 1</figcaption>
16+
</figure>
1617
</longdesc>
1718
<note id="dimensions-number" type="additional" data-title=".innerWidth()"/>
1819
<note id="hidden-element-dimensions" type="additional" data-title=".innerWidth()"/>

0 commit comments

Comments
 (0)