From 306ec8135a911c0b925ad4397f550864cf7e193c Mon Sep 17 00:00:00 2001 From: Karl Swedberg Date: Wed, 2 Dec 2015 10:01:39 -0500 Subject: [PATCH] Add
and
for longdesc imgs --- entries/animate.xml | 10 ++++++++-- entries/click.xml | 5 +++-- entries/dblclick.xml | 5 +++-- entries/fadeIn.xml | 13 +++++++------ entries/fadeOut.xml | 13 +++++++------ entries/fadeTo.xml | 13 +++++++------ entries/height.xml | 5 +++-- entries/hide.xml | 12 ++++++------ entries/innerHeight.xml | 5 +++-- entries/innerWidth.xml | 5 +++-- entries/mousedown.xml | 5 +++-- entries/mouseenter.xml | 5 +++-- entries/mouseleave.xml | 5 +++-- entries/mouseout.xml | 5 +++-- entries/mouseover.xml | 5 +++-- entries/mouseup.xml | 5 +++-- entries/outerHeight.xml | 5 +++-- entries/outerWidth.xml | 9 +++++---- entries/scroll.xml | 5 +++-- entries/show.xml | 13 +++++++------ entries/slideDown.xml | 13 +++++++------ entries/slideToggle.xml | 26 ++++++++++++++------------ entries/slideUp.xml | 13 +++++++------ entries/toggle.xml | 26 ++++++++++++++------------ entries/width.xml | 5 +++-- 25 files changed, 131 insertions(+), 100 deletions(-) diff --git a/entries/animate.xml b/entries/animate.xml index 11477c2a..f138bc4d 100644 --- a/entries/animate.xml +++ b/entries/animate.xml @@ -56,12 +56,18 @@ $( "#clickme" ).click(function() { });

- +

+ +
figure 1
+

Note that the target value of the height property is 'toggle'. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:

- +

+ +
figure 2
+

The opacity of the image is already at its target value, so this property is not animated by the second click. Since the target value for left is a relative value, the image moves even farther to the right during this second animation.

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

diff --git a/entries/click.xml b/entries/click.xml index 206edf99..c6e9b168 100644 --- a/entries/click.xml +++ b/entries/click.xml @@ -34,9 +34,10 @@ Trigger the handler </div> -

+

-

+
figure 1
+

The event handler can be bound to any <div>:


 $( "#target" ).click(function() {
diff --git a/entries/dblclick.xml b/entries/dblclick.xml
index df7a5ae4..54962191 100644
--- a/entries/dblclick.xml
+++ b/entries/dblclick.xml
@@ -34,9 +34,10 @@
   Trigger the handler
 </div>
-

+

-

+
figure 1
+

The event handler can be bound to any <div>:


 $( "#target" ).dblclick(function() {
diff --git a/entries/fadeIn.xml b/entries/fadeIn.xml
index 819e663e..628e7e73 100644
--- a/entries/fadeIn.xml
+++ b/entries/fadeIn.xml
@@ -35,12 +35,13 @@ $( "#clickme" ).click(function() {
   });
 });
-

- - - - -

+
+ + + + +
figure 1
+

Easing

As of jQuery 1.4.3, 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 swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Callback Function

diff --git a/entries/fadeOut.xml b/entries/fadeOut.xml index 28228979..cfd1c6ae 100644 --- a/entries/fadeOut.xml +++ b/entries/fadeOut.xml @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() { }); }); -

- - - - -

+
+ + + + +
figure 1
+

Note: To avoid unnecessary DOM manipulation, .fadeOut() will not hide an element that is already considered hidden. For information on which elements jQuery considers hidden, see :hidden Selector.

diff --git a/entries/fadeTo.xml b/entries/fadeTo.xml index 5ce98458..ca382b0c 100644 --- a/entries/fadeTo.xml +++ b/entries/fadeTo.xml @@ -50,12 +50,13 @@ $( "#clickme" ).click(function() { }); }); -

- - - - -

+
+ + + + +
figure 1
+

With duration set to 0, this method just changes the opacity CSS property, so .fadeTo( 0, opacity ) is the same as .css( "opacity", opacity ).

diff --git a/entries/height.xml b/entries/height.xml index 7efdf312..548af238 100644 --- a/entries/height.xml +++ b/entries/height.xml @@ -9,9 +9,10 @@ Get the current computed height for the first element in the set of matched elements.

The difference between .css( "height" ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation.

-

+

-

+
figure 1
+

This method is also able to find the height of the window and document.


 // Returns height of browser viewport
diff --git a/entries/hide.xml b/entries/hide.xml
index cfe38a29..1a0093d5 100644
--- a/entries/hide.xml
+++ b/entries/hide.xml
@@ -52,12 +52,12 @@ $( "#clickme" ).click(function() {
   });
 });
-

- - - - -

+
+ + + + +
diff --git a/entries/innerHeight.xml b/entries/innerHeight.xml index 294666c2..b962c231 100644 --- a/entries/innerHeight.xml +++ b/entries/innerHeight.xml @@ -11,9 +11,10 @@

This method returns the height of the element, including top and bottom padding, in pixels.

This method is not applicable to window and document objects; for these, use .height() instead.

-

+

-

+
figure 1
+
diff --git a/entries/innerWidth.xml b/entries/innerWidth.xml index e98529d3..fbfd5df5 100644 --- a/entries/innerWidth.xml +++ b/entries/innerWidth.xml @@ -10,9 +10,10 @@

This method returns the width of the element, including left and right padding, in pixels.

This method is not applicable to window and document objects; for these, use .width() instead.

-

+

-

+
figure 1
+
diff --git a/entries/mousedown.xml b/entries/mousedown.xml index 9b1105d0..6217be54 100644 --- a/entries/mousedown.xml +++ b/entries/mousedown.xml @@ -33,9 +33,10 @@ Trigger the handler </div> -

+

-

+
figure 1
+

The event handler can be bound to any <div>:


 $( "#target" ).mousedown(function() {
diff --git a/entries/mouseenter.xml b/entries/mouseenter.xml
index 6985f396..de72455d 100644
--- a/entries/mouseenter.xml
+++ b/entries/mouseenter.xml
@@ -37,9 +37,10 @@
   Trigger the handler
 </div>
 <div id="log"></div>
-

+

-

+
figure 1
+

The event handler can be bound to any element:


 $( "#outer" ).mouseenter(function() {
diff --git a/entries/mouseleave.xml b/entries/mouseleave.xml
index 56adcb65..23508900 100644
--- a/entries/mouseleave.xml
+++ b/entries/mouseleave.xml
@@ -37,9 +37,10 @@
   Trigger the handler
 </div>
 <div id="log"></div>
-

+

-

+
figure 1
+

The event handler can be bound to any element:


 $( "#outer" ).mouseleave(function() {
diff --git a/entries/mouseout.xml b/entries/mouseout.xml
index bcdece5b..09c63aab 100644
--- a/entries/mouseout.xml
+++ b/entries/mouseout.xml
@@ -38,9 +38,10 @@
 </div>
 <div id="log"></div>
-

+

-

+
figure 1
+

The event handler can be bound to any element:


 $( "#outer" ).mouseout(function() {
diff --git a/entries/mouseover.xml b/entries/mouseover.xml
index f2ca8c02..5d4415da 100644
--- a/entries/mouseover.xml
+++ b/entries/mouseover.xml
@@ -38,9 +38,10 @@
 </div>
 <div id="log"></div>
-

+

-

+
figure 1
+

The event handler can be bound to any element:


 $( "#outer" ).mouseover(function() {
diff --git a/entries/mouseup.xml b/entries/mouseup.xml
index 31640a96..8fb2122b 100644
--- a/entries/mouseup.xml
+++ b/entries/mouseup.xml
@@ -34,9 +34,10 @@
   Trigger the handler
 </div>
-

+

-

+
figure 1
+

The event handler can be bound to any <div>:


 $( "#target" ).mouseup(function() {
diff --git a/entries/outerHeight.xml b/entries/outerHeight.xml
index bdd1bd7f..6a14fd7d 100644
--- a/entries/outerHeight.xml
+++ b/entries/outerHeight.xml
@@ -13,9 +13,10 @@
   
     
The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

     
This method is not applicable to window and document objects; for these, use .height() instead.

-    

+    

       
-    

+      
figure 1

+    

   
 	
   
diff --git a/entries/outerWidth.xml b/entries/outerWidth.xml
index a6ab2247..f39fe926 100644
--- a/entries/outerWidth.xml
+++ b/entries/outerWidth.xml
@@ -14,9 +14,10 @@
     
Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.

     
If includeMargin is omitted or false, the padding and border are included in the calculation; if true, the margin is also included.

     
This method is not applicable to window and document objects; for these, use .width() instead. Although .outerWidth() can be used on table elements, it may give unexpected results on tables using the border-collapse: collapse CSS property.

-    

+    

       
-    

+      
figure 1

+    

   
 	
   
@@ -63,7 +64,7 @@ $( "p:last" ).text(
   
     
When calling .outerWidth(value), 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 100px, 50%, or auto).

   
-  
+
   
     Change the outer width of each div the first time it is clicked (and change its color).
     d
 ]]>
   
-  
+
   
   
   
diff --git a/entries/scroll.xml b/entries/scroll.xml
index 8597018b..1a0e9cbd 100644
--- a/entries/scroll.xml
+++ b/entries/scroll.xml
@@ -43,9 +43,10 @@
 <div id="log"></div>

The style definition is present to make the target element small enough to be scrollable:

-

+

-

+
figure 1
+

The scroll event handler can be bound to this element:


 $( "#target" ).scroll(function() {
diff --git a/entries/show.xml b/entries/show.xml
index f0745958..60974469 100644
--- a/entries/show.xml
+++ b/entries/show.xml
@@ -53,12 +53,13 @@ $( "#clickme" ).click(function() {
   });
 });
-

- - - - -

+
+ + + + +
figure 1
+
diff --git a/entries/slideDown.xml b/entries/slideDown.xml index 01a14e03..204a9372 100644 --- a/entries/slideDown.xml +++ b/entries/slideDown.xml @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() { }); }); -

- - - - -

+
+ + + + +
figure 1
+

Easing

As of jQuery 1.4.3, 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 swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Callback Function

diff --git a/entries/slideToggle.xml b/entries/slideToggle.xml index e3c3d474..d6cd26b0 100644 --- a/entries/slideToggle.xml +++ b/entries/slideToggle.xml @@ -37,19 +37,21 @@ $( "#clickme" ).click(function() { });

With the element initially shown, we can hide it slowly with the first click:

-

- - - - -

+
+ + + + +
figure 1
+

A second click will show the element once again:

-

- - - - -

+
+ + + + +
figure 2
+

Easing

As of jQuery 1.4.3, 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 swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Callback Function

diff --git a/entries/slideUp.xml b/entries/slideUp.xml index 345d3c4f..3ecc8feb 100644 --- a/entries/slideUp.xml +++ b/entries/slideUp.xml @@ -36,12 +36,13 @@ $( "#clickme" ).click(function() { }); }); -

- - - - -

+
+ + + + +
figure 1
+

Easing

As of jQuery 1.4.3, 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 swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Callback Function

diff --git a/entries/toggle.xml b/entries/toggle.xml index 87cc15ce..26f85aa0 100644 --- a/entries/toggle.xml +++ b/entries/toggle.xml @@ -59,19 +59,21 @@ $( "#clickme" ).click(function() {

With the element initially shown, we can hide it slowly with the first click:

-

- - - - -

+
+ + + + +
figure 1
+

A second click will show the element once again:

-

- - - - -

+
+ + + + +
figure 2
+

The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the statement: 


diff --git a/entries/width.xml b/entries/width.xml
index 11fc2ebf..abc8aff3 100644
--- a/entries/width.xml
+++ b/entries/width.xml
@@ -9,9 +9,10 @@
     Get the current computed width for the first element in the set of matched elements.
     
       
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.

-      

+      

         
-      

+        
figure 1

+      

       
This method is also able to find the width of the window and document.

       

 // Returns width of browser viewport