Skip to content

Commit

Permalink
Add <figure> and <figcaption> for longdesc imgs
Browse files Browse the repository at this point in the history
  • Loading branch information
kswedberg committed Dec 2, 2015
1 parent 1cb3361 commit 306ec81
Show file tree
Hide file tree
Showing 25 changed files with 131 additions and 100 deletions.
10 changes: 8 additions & 2 deletions entries/animate.xml
Expand Up @@ -56,12 +56,18 @@ $( "#clickme" ).click(function() {
}); });
</code></pre> </code></pre>
<p class="image"> <p class="image">
<img src="/resources/animate-1.jpg" alt=""/> <figure>
<img src="/resources/animate-1.jpg" alt=""/>
<figcaption>figure 1</figcaption>
</figure>
</p> </p>
<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: <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:
</p> </p>
<p class="image"> <p class="image">
<img src="/resources/animate-2.jpg" alt=""/> <figure>
<img src="/resources/animate-2.jpg" alt=""/>
<figcaption>figure 2</figcaption>
</figure>
</p> </p>
<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> <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>
<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> <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>
Expand Down
5 changes: 3 additions & 2 deletions entries/click.xml
Expand Up @@ -34,9 +34,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_03.png" alt=""/> <img src="/resources/0042_05_03.png" alt=""/>
</p> <figcaption>figure 1</figcaption>

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg, I'm thinking of adding a bit more here, so it says something like:
figure 1 - Illustration of the rendered HTML
What do you think? I'm also wondering whether we should use Figure 1 or figure 1? @scottgonzalez do you have anything similar to this on UI?

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 2, 2015

Member

Nope, we only have live demos. Our resources directory is void of images :-)

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 2, 2015

Author Member

@agcolom : I don't have a preference for capitalized "Figure" or not. Is there a standard in published works? Also, adding a bit more is fine with me, but maybe we should deploy what we have first if there are no errors?

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg sure. So this is all live and I can just tag and deploy?

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 2, 2015

Author Member

yeah, it's pushed. Tagging and deploying should be all you need to do.

@scottgonzalez : I'm not seeing the css change on stage.api.jquery.com. Am I correct in assuming that something needs to be pushed to the api.jquery.com repo again before the css change will take effect there?

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 2, 2015

Member

All up :-) and working :-)
Thank you very much @kswedberg and @scottgonzalez !

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg I've checked your book and it says Figure there. Also it's aligned in the center. So which one do you prefer? I may have a slight preference for the left-aligned but not strongly opinionated on that one :-) @AurelioDeRosa would you have a preference between left-aligned and centered text for the figcaption? Thanks
alignment2
alignment

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 2, 2015

Author Member

@agcolom I agree that the left-aligned one looks better. The center-aligned text gets lost, at least to my eyes. And, sure, go with capital "F" :)

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

FWIW, I prefer to have a capital letter.

</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p> <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code> <pre><code>
$( "#target" ).click(function() { $( "#target" ).click(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/dblclick.xml
Expand Up @@ -34,9 +34,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_04.png" alt=""/> <img src="/resources/0042_05_04.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p> <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code> <pre><code>
$( "#target" ).dblclick(function() { $( "#target" ).dblclick(function() {
Expand Down
13 changes: 7 additions & 6 deletions entries/fadeIn.xml
Expand Up @@ -35,12 +35,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_33.png" alt=""/> <img class="column three" src="/resources/0042_06_33.png" alt=""/>

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

I'm not an expert but I wonder if from the accessibility point of view is confusing to have a figure with one figcaption and multiple images.

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 3, 2015

Author Member

Good catch, @AurelioDeRosa ! If I understand correctly, grouping images in a single figure is ok, but we should add ARIA attributes. Something like this, I think…

<figure role="group" aria-labelledby="fig1">
    <!-- images -->
    <figcaption id="fig1">Figure 1: …</figcaption>
</figure>

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 3, 2015

Member

Ok, I can make that change. @AurelioDeRosa does this sound good to you?

<img src="/resources/0042_06_34.png" alt=""/> <img class="column three" src="/resources/0042_06_34.png" alt=""/>
<img src="/resources/0042_06_35.png" alt=""/> <img class="column three" src="/resources/0042_06_35.png" alt=""/>
<img src="/resources/0042_06_36.png" alt=""/> <img class="column three" src="/resources/0042_06_36.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<h4 id="easing">Easing</h4> <h4 id="easing">Easing</h4>
<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> <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>
<h4 id="callback-function">Callback Function</h4> <h4 id="callback-function">Callback Function</h4>
Expand Down
13 changes: 7 additions & 6 deletions entries/fadeOut.xml
Expand Up @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_37.png" alt=""/> <img class="column three" src="/resources/0042_06_37.png" alt=""/>

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same concern here.

<img src="/resources/0042_06_38.png" alt=""/> <img class="column three" src="/resources/0042_06_38.png" alt=""/>
<img src="/resources/0042_06_39.png" alt=""/> <img class="column three" src="/resources/0042_06_39.png" alt=""/>
<img src="/resources/0042_06_40.png" alt=""/> <img class="column three" src="/resources/0042_06_40.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<div class="warning"> <div class="warning">
<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> <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>
</div> </div>
Expand Down
13 changes: 7 additions & 6 deletions entries/fadeTo.xml
Expand Up @@ -50,12 +50,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_41.png" alt=""/> <img class="column three" src="/resources/0042_06_41.png" alt=""/>
<img src="/resources/0042_06_42.png" alt=""/> <img class="column three" src="/resources/0042_06_42.png" alt=""/>
<img src="/resources/0042_06_43.png" alt=""/> <img class="column three" src="/resources/0042_06_43.png" alt=""/>
<img src="/resources/0042_06_44.png" alt=""/> <img class="column three" src="/resources/0042_06_44.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<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> <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>
</longdesc> </longdesc>
<note id="jquery.fx.off" type="additional" data-title=".fadeTo()"/> <note id="jquery.fx.off" type="additional" data-title=".fadeTo()"/>
Expand Down
5 changes: 3 additions & 2 deletions entries/height.xml
Expand Up @@ -9,9 +9,10 @@
<desc>Get the current computed height for the first element in the set of matched elements.</desc> <desc>Get the current computed height for the first element in the set of matched elements.</desc>
<longdesc> <longdesc>
<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> <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>
<p class="image"> <figure>
<img src="/resources/0042_04_01.png"/> <img src="/resources/0042_04_01.png"/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>This method is also able to find the height of the window and document.</p> <p>This method is also able to find the height of the window and document.</p>
<pre><code> <pre><code>
// Returns height of browser viewport // Returns height of browser viewport
Expand Down
12 changes: 6 additions & 6 deletions entries/hide.xml
Expand Up @@ -52,12 +52,12 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_05.png" alt=""/> <img class="column three" src="/resources/0042_06_05.png" alt=""/>
<img src="/resources/0042_06_06.png" alt=""/> <img class="column three" src="/resources/0042_06_06.png" alt=""/>
<img src="/resources/0042_06_07.png" alt=""/> <img class="column three" src="/resources/0042_06_07.png" alt=""/>
<img src="/resources/0042_06_08.png" alt=""/> <img class="column three" src="/resources/0042_06_08.png" alt=""/>
</p> </figure>

This comment has been minimized.

Copy link
@agcolom

agcolom Dec 3, 2015

Member

Just realised the figcaption was missing on this one. I'll add it while I add a capital F and add some description.

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Good catch @agcolom!

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 3, 2015

Author Member

thanks, @agcolom !

</longdesc> </longdesc>
<note id="jquery.fx.off" type="additional" data-title=".hide()"/> <note id="jquery.fx.off" type="additional" data-title=".hide()"/>
<example> <example>
Expand Down
5 changes: 3 additions & 2 deletions entries/innerHeight.xml
Expand Up @@ -11,9 +11,10 @@
<longdesc> <longdesc>
<p>This method returns the height of the element, including top and bottom padding, in pixels.</p> <p>This method returns the height of the element, including top and bottom padding, in pixels.</p>
<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> <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>
<p class="image"> <figure>
<img src="/resources/0042_04_02.png"/> <img src="/resources/0042_04_02.png"/>
</p> <figcaption>figure 1</figcaption>
</figure>
</longdesc> </longdesc>
<note id="dimensions-number" type="additional" data-title=".innerHeight()"/> <note id="dimensions-number" type="additional" data-title=".innerHeight()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".innerHeight()"/> <note id="hidden-element-dimensions" type="additional" data-title=".innerHeight()"/>
Expand Down
5 changes: 3 additions & 2 deletions entries/innerWidth.xml
Expand Up @@ -10,9 +10,10 @@
<longdesc> <longdesc>
<p>This method returns the width of the element, including left and right padding, in pixels.</p> <p>This method returns the width of the element, including left and right padding, in pixels.</p>
<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> <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>
<p class="image"> <figure>
<img src="/resources/0042_04_05.png"/> <img src="/resources/0042_04_05.png"/>
</p> <figcaption>figure 1</figcaption>
</figure>
</longdesc> </longdesc>
<note id="dimensions-number" type="additional" data-title=".innerWidth()"/> <note id="dimensions-number" type="additional" data-title=".innerWidth()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".innerWidth()"/> <note id="hidden-element-dimensions" type="additional" data-title=".innerWidth()"/>
Expand Down
5 changes: 3 additions & 2 deletions entries/mousedown.xml
Expand Up @@ -33,9 +33,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_01.png" alt=""/> <img src="/resources/0042_05_01.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p> <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code> <pre><code>
$( "#target" ).mousedown(function() { $( "#target" ).mousedown(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/mouseenter.xml
Expand Up @@ -37,9 +37,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</code></pre> &lt;div id="log"&gt;&lt;/div&gt;</code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_08.png" alt=""/> <img src="/resources/0042_05_08.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p> <p>The event handler can be bound to any element:</p>
<pre><code> <pre><code>
$( "#outer" ).mouseenter(function() { $( "#outer" ).mouseenter(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/mouseleave.xml
Expand Up @@ -37,9 +37,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</code></pre> &lt;div id="log"&gt;&lt;/div&gt;</code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_09.png" alt=""/> <img src="/resources/0042_05_09.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p> <p>The event handler can be bound to any element:</p>
<pre><code> <pre><code>
$( "#outer" ).mouseleave(function() { $( "#outer" ).mouseleave(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/mouseout.xml
Expand Up @@ -38,9 +38,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt; &lt;div id="log"&gt;&lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_07.png" alt=""/> <img src="/resources/0042_05_07.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p> <p>The event handler can be bound to any element:</p>
<pre><code> <pre><code>
$( "#outer" ).mouseout(function() { $( "#outer" ).mouseout(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/mouseover.xml
Expand Up @@ -38,9 +38,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt; &lt;div id="log"&gt;&lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_06.png" alt=""/> <img src="/resources/0042_05_06.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p> <p>The event handler can be bound to any element:</p>
<pre><code> <pre><code>
$( "#outer" ).mouseover(function() { $( "#outer" ).mouseover(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/mouseup.xml
Expand Up @@ -34,9 +34,10 @@
Trigger the handler Trigger the handler
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<p class="image"> <figure>
<img src="/resources/0042_05_02.png" alt=""/> <img src="/resources/0042_05_02.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p> <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code> <pre><code>
$( "#target" ).mouseup(function() { $( "#target" ).mouseup(function() {
Expand Down
5 changes: 3 additions & 2 deletions entries/outerHeight.xml
Expand Up @@ -13,9 +13,10 @@
<longdesc> <longdesc>
<p>The top and bottom padding and border are always included in the <code>.outerHeight()</code> calculation; if the <code>includeMargin</code> argument is set to <code>true</code>, the margin (top and bottom) is also included.</p> <p>The top and bottom padding and border are always included in the <code>.outerHeight()</code> calculation; if the <code>includeMargin</code> argument is set to <code>true</code>, the margin (top and bottom) is also included.</p>
<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> <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>
<p class="image"> <figure>
<img src="/resources/0042_04_03.png"/> <img src="/resources/0042_04_03.png"/>
</p> <figcaption>figure 1</figcaption>
</figure>
</longdesc> </longdesc>
<note id="dimensions-number" type="additional" data-title=".outerHeight()"/> <note id="dimensions-number" type="additional" data-title=".outerHeight()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".outerHeight()"/> <note id="hidden-element-dimensions" type="additional" data-title=".outerHeight()"/>
Expand Down
9 changes: 5 additions & 4 deletions entries/outerWidth.xml
Expand Up @@ -14,9 +14,10 @@
<p>Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.</p> <p>Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.</p>
<p>If <code>includeMargin</code> is omitted or <code>false</code>, the padding and border are included in the calculation; if <code>true</code>, the margin is also included.</p> <p>If <code>includeMargin</code> is omitted or <code>false</code>, the padding and border are included in the calculation; if <code>true</code>, the margin is also included.</p>
<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. Although <code>.outerWidth()</code> can be used on table elements, it may give unexpected results on tables using the <code>border-collapse: collapse</code> CSS property.</p> <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. Although <code>.outerWidth()</code> can be used on table elements, it may give unexpected results on tables using the <code>border-collapse: collapse</code> CSS property.</p>
<p class="image"> <figure>
<img src="/resources/0042_04_06.png"/> <img src="/resources/0042_04_06.png"/>
</p> <figcaption>figure 1</figcaption>
</figure>
</longdesc> </longdesc>
<note id="dimensions-number" type="additional" data-title=".outerWidth()"/> <note id="dimensions-number" type="additional" data-title=".outerWidth()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".outerWidth()"/> <note id="hidden-element-dimensions" type="additional" data-title=".outerWidth()"/>
Expand Down Expand Up @@ -63,7 +64,7 @@ $( "p:last" ).text(
<longdesc> <longdesc>
<p>When calling <code>.outerWidth(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>).</p> <p>When calling <code>.outerWidth(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>).</p>
</longdesc> </longdesc>

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Any reason for this empty line or a simple mistake? I recall we don't use them in our XML files.

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 3, 2015

Author Member

No reason, except that my text editor automatically adds it on save. Probably no harm either. There's this: http://stackoverflow.com/a/729795. But I'm not sure how relevant it is to our situation here. Is there something in the style guide about not ending with a new line? Is it something that deserves our attention? (honest questions; not being sarcastic.)

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 3, 2015

Member

I'm confused. The SO question/answer is about the terminating newline at the end of a file. These are blank lines in the middle of the file. We have no rules in any style guides about whitespace between elements in HTML or XML files.

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 3, 2015

Member

Also, this isn't a new line that @kswedberg created. His editor simply fixed (removed) the trailing whitespace on the existing line.

This comment has been minimized.

Copy link
@kswedberg

kswedberg Dec 3, 2015

Author Member

Ohh! sorry, @scottgonzalez. you're right. I wasn't looking carefully enough. IMO, this is a non-issue at worst and an improvement at best. ;)

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 7, 2015

Member

It's fine as it is then.

<example> <example>
<desc>Change the outer width of each div the first time it is clicked (and change its color).</desc> <desc>Change the outer width of each div the first time it is clicked (and change its color).</desc>
<code><![CDATA[ <code><![CDATA[
Expand Down Expand Up @@ -96,7 +97,7 @@ $( "div" ).one( "click", function() {
<div>d</div> <div>d</div>
]]></html> ]]></html>
</example> </example>

This comment has been minimized.

Copy link
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same here

<category slug="css"/> <category slug="css"/>
<category slug="dimensions"/> <category slug="dimensions"/>
<category slug="manipulation/style-properties"/> <category slug="manipulation/style-properties"/>
Expand Down
5 changes: 3 additions & 2 deletions entries/scroll.xml
Expand Up @@ -43,9 +43,10 @@
&lt;div id="log"&gt;&lt;/div&gt; &lt;div id="log"&gt;&lt;/div&gt;
</code></pre> </code></pre>
<p>The style definition is present to make the target element small enough to be scrollable:</p> <p>The style definition is present to make the target element small enough to be scrollable:</p>
<p class="image"> <figure>
<img src="/resources/0042_05_11.png" alt=""/> <img src="/resources/0042_05_11.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>The <code>scroll</code> event handler can be bound to this element:</p> <p>The <code>scroll</code> event handler can be bound to this element:</p>
<pre><code> <pre><code>
$( "#target" ).scroll(function() { $( "#target" ).scroll(function() {
Expand Down
13 changes: 7 additions & 6 deletions entries/show.xml
Expand Up @@ -53,12 +53,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_01.png" alt=""/> <img class="column three" src="/resources/0042_06_01.png" alt=""/>
<img src="/resources/0042_06_02.png" alt=""/> <img class="column three" src="/resources/0042_06_02.png" alt=""/>
<img src="/resources/0042_06_03.png" alt=""/> <img class="column three" src="/resources/0042_06_03.png" alt=""/>
<img src="/resources/0042_06_04.png" alt=""/> <img class="column three" src="/resources/0042_06_04.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
</longdesc> </longdesc>
<note id="jquery.fx.off" type="additional" data-title=".show()"/> <note id="jquery.fx.off" type="additional" data-title=".show()"/>
<example> <example>
Expand Down
13 changes: 7 additions & 6 deletions entries/slideDown.xml
Expand Up @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_17.png" alt=""/> <img class="column three" src="/resources/0042_06_17.png" alt=""/>
<img src="/resources/0042_06_18.png" alt=""/> <img class="column three" src="/resources/0042_06_18.png" alt=""/>
<img src="/resources/0042_06_19.png" alt=""/> <img class="column three" src="/resources/0042_06_19.png" alt=""/>
<img src="/resources/0042_06_20.png" alt=""/> <img class="column three" src="/resources/0042_06_20.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<h4 id="easing">Easing</h4> <h4 id="easing">Easing</h4>
<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> <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>
<h4 id="callback-function">Callback Function</h4> <h4 id="callback-function">Callback Function</h4>
Expand Down
26 changes: 14 additions & 12 deletions entries/slideToggle.xml
Expand Up @@ -37,19 +37,21 @@ $( "#clickme" ).click(function() {
}); });
</code></pre> </code></pre>
<p>With the element initially shown, we can hide it slowly with the first click:</p> <p>With the element initially shown, we can hide it slowly with the first click:</p>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_25.png" alt=""/> <img class="column three" src="/resources/0042_06_25.png" alt=""/>
<img src="/resources/0042_06_26.png" alt=""/> <img class="column three" src="/resources/0042_06_26.png" alt=""/>
<img src="/resources/0042_06_27.png" alt=""/> <img class="column three" src="/resources/0042_06_27.png" alt=""/>
<img src="/resources/0042_06_28.png" alt=""/> <img class="column three" src="/resources/0042_06_28.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<p>A second click will show the element once again:</p> <p>A second click will show the element once again:</p>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_29.png" alt=""/> <img class="column three" src="/resources/0042_06_29.png" alt=""/>
<img src="/resources/0042_06_30.png" alt=""/> <img class="column three" src="/resources/0042_06_30.png" alt=""/>
<img src="/resources/0042_06_31.png" alt=""/> <img class="column three" src="/resources/0042_06_31.png" alt=""/>
<img src="/resources/0042_06_32.png" alt=""/> <img class="column three" src="/resources/0042_06_32.png" alt=""/>
</p> <figcaption>figure 2</figcaption>
</figure>
<h4 id="easing">Easing</h4> <h4 id="easing">Easing</h4>
<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> <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>
<h4 id="callback-function">Callback Function</h4> <h4 id="callback-function">Callback Function</h4>
Expand Down
13 changes: 7 additions & 6 deletions entries/slideUp.xml
Expand Up @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
}); });
}); });
</code></pre> </code></pre>
<p class="image four-across"> <figure>
<img src="/resources/0042_06_21.png" alt=""/> <img class="column three" src="/resources/0042_06_21.png" alt=""/>
<img src="/resources/0042_06_22.png" alt=""/> <img class="column three" src="/resources/0042_06_22.png" alt=""/>
<img src="/resources/0042_06_23.png" alt=""/> <img class="column three" src="/resources/0042_06_23.png" alt=""/>
<img src="/resources/0042_06_24.png" alt=""/> <img class="column three" src="/resources/0042_06_24.png" alt=""/>
</p> <figcaption>figure 1</figcaption>
</figure>
<h4 id="easing">Easing</h4> <h4 id="easing">Easing</h4>
<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> <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>
<h4 id="callback-function">Callback Function</h4> <h4 id="callback-function">Callback Function</h4>
Expand Down

0 comments on commit 306ec81

Please sign in to comment.