Change notes to use warning class instead of blockquotes.

Author: scottgonzalez

entries/animate.xml

@@ -27,9 +27,9 @@
     <p>Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use <code>fontSize</code> or the CSS equivalent <code>'font-size'</code> rather than simply <code>'font'</code>. </p>
     <p>In addition to numeric values, each property can take the strings <code>'show'</code>, <code>'hide'</code>, and <code>'toggle'</code>. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.</p>
     <p>Animated properties can also be relative. If a value is supplied with a leading <code>+=</code> or <code>-=</code> sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.</p>
-    <blockquote>
+    <div class="warning">
       <p><strong>Note:</strong> Unlike shorthand animation methods such as <code>.slideDown()</code> and <code>.fadeIn()</code>, the <code>.animate()</code> method does <em>not</em> make hidden elements visible as part of the effect. For example, given <code>$('someElement').hide().animate({height:'20px'}, 500)</code>, the animation will run, but <em>the element will remain hidden</em>.</p>
-    </blockquote>
+    </div>
     <h4 id="duration">Duration</h4>
     <p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is <code>400</code> milliseconds. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
     <h4 id="complete">Complete Function</h4>
@@ -62,12 +62,12 @@
     </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>
-    <blockquote>
+    <div class="warning">
       <p><strong>Note: </strong>The <a href="http://jqueryui.com">jQuery UI</a> project extends the <code>.animate()</code> method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.</p>
-    </blockquote>
-    <blockquote>
+    </div>
+    <div class="warning">
       <p><strong>Note:</strong> if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A <a href="http://www.google.com/search?q=clearfix">clearfix</a> can be used to automatically fix the dimensions of your main element without the need to set this manually.</p>
-    </blockquote>
+    </div>
     <h4 id="step">Step Function</h4>
     <p>The second version of <code>.animate()</code> provides a <code>step</code> option &#x2014; a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (<code>now</code> and <code>fx</code>), and <code>this</code> is set to the DOM element being animated.
 </p>

entries/attr.xml

@@ -17,12 +17,12 @@
         <li><strong>Convenience</strong>: It can be called directly on a jQuery object and chained to other jQuery methods.</li>
         <li><strong>Cross-browser consistency</strong>: The values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The <code>.attr()</code> method reduces such inconsistencies.</li>
       </ol>
-      <blockquote>
+      <div class="warning">
         <p><strong>Note:</strong> Attribute values are strings with the exception of a few attributes such as value and tabindex.</p>
-      </blockquote>
-      <blockquote>
+      </div>
+      <div class="warning">
         <p><strong>Note:</strong> Attempting to change the <code>type</code> attribute (or property) of an <code>input</code> element created via HTML or already in an HTML document will result in an error being thrown by Internet Explorer 6, 7, or 8.</p>
-      </blockquote>
+      </div>
       <p>As of jQuery 1.6, the <code>.attr()</code> method returns <code>undefined</code> for attributes that have not been set. <strong>To retrieve and change DOM properties such as the <code>checked</code>, <code>selected</code>, or <code>disabled</code> state of form elements, use the <a href="http://api.jquery.com/prop/">.prop()</a> method.</strong></p>
 
       <h4>Attributes vs. Properties</h4>

entries/bind.xml

@@ -113,13 +113,13 @@ $('#bar').bind('click', {msg: message}, function(event) {
 </code></pre>
     <p>This time the variable is not referred to directly within the handlers; instead, the variable is passed in <em>by value</em> through <code>eventData</code>, which fixes the value at the time the event is bound. The first handler will now display <samp>Spoon!</samp> while the second will alert <samp>Not in the face!</samp>
     </p>
-    <blockquote>
+    <div class="warning">
       <p>Note that objects are passed to functions <em>by reference</em>, which further complicates this scenario.</p>
-    </blockquote>
+    </div>
     <p>If <code>eventData</code> is present, it is the second argument to the <code>.bind()</code> method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument.</p>
-    <blockquote>
+    <div class="warning">
       <p>See the <code>.trigger()</code> method reference for a way to pass data to a handler at the time the event happens rather than when the handler is bound.</p>
-    </blockquote>
+    </div>
     <p>As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.</p>
     <p><strong>Note: </strong>Although demonstrated in the next example, it is inadvisable to bind handlers to both the <code>click</code> and <code>dblclick</code> events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the <code>dblclick</code> and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.</p>
   </longdesc>

entries/clone.xml

@@ -42,19 +42,19 @@
     <div class="hello">Hello</div>
   </div>
 &lt;/div&gt;</code></pre>
-    <blockquote>
+    <div class="warning">
       <p><strong>Note:</strong> When using the <code>.clone()</code> method, you can modify the cloned elements or their contents before (re-)inserting them into the document.</p>
-    </blockquote>
+    </div>
     <p>Normally, any event handlers bound to the original element are <em>not</em> copied to the clone. The optional <code>withDataAndEvents</code> parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the <code>.data()</code> method) is also copied to the new copy. </p>
     <p>However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:</p>
     <pre><code>var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
     $clone = $elem.clone( true )
     .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing
 </code></pre>
     <p>As of jQuery 1.5, <code>withDataAndEvents</code> can be optionally enhanced with <code>deepWithDataAndEvents </code> to copy the events and data for all children of the cloned element.</p>
-    <blockquote>
+    <div class="warning">
       <p><strong>Note:</strong> Using <code>.clone()</code> has the side-effect of producing elements with duplicate <code>id</code> attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using <code>class</code> attributes as identifiers instead.</p>
-    </blockquote>
+    </div>
   </longdesc>
   <example>
     <desc>Clones all b elements (and selects the clones) and prepends them to all paragraphs.</desc>

entries/delay.xml

@@ -17,11 +17,11 @@
     <p>Using the standard effects queue, we can, for example, set an 800-millisecond delay between the <code>.slideUp()</code> and <code>.fadeIn()</code> of <code>&lt;div id="foo"&gt;</code>:</p>
     <pre><code>$('#foo').slideUp(300).delay(800).fadeIn(400);</code></pre>
     <p>When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.</p>
-    <blockquote>
+    <div class="warning">
       <p>
         <strong>The <code>.delay()</code> method is best for delaying between queued jQuery effects. Because it is limited&#x2014;it doesn't, for example, offer a way to cancel the delay&#x2014;<code>.delay()</code> is not a replacement for JavaScript's native <a href="https://developer.mozilla.org/en/DOM/window.setTimeout">setTimeout</a> function, which may be more appropriate for certain use cases.</strong>
       </p>
-    </blockquote>
+    </div>
   </longdesc>
   <example>
     <desc>Animate the hiding and showing of two divs, delaying the first before showing it.</desc>

entries/error.xml

@@ -33,9 +33,9 @@
     <p>
       <samp>Handler for .error() called.</samp>
     </p>
-    <blockquote>
+    <div class="warning">
       <p>The event handler <em>must</em> be attached before the browser fires the error event, which is why the example sets the src attribute after attaching the handler. Also, the error event may not be correctly fired when the page is served locally; <code>error</code> relies on HTTP status codes and will generally not be triggered if the URL uses the <code>file:</code> protocol.</p>
-    </blockquote>
+    </div>
     <p>Note: A jQuery error event handler should not be attached to the window object. The browser fires the window's error event when a script error occurs. However, the window error event receives different arguments and has different return value requirements than conventional event handlers. Use <code>window.onerror</code> instead.</p>
   </longdesc>
   <example>

entries/fadeOut.xml

@@ -38,9 +38,9 @@
       <img src="/resources/0042_06_39.png" alt=""/>
       <img src="/resources/0042_06_40.png" alt=""/>
     </p>
-    <blockquote>
+    <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="http://api.jquery.com/hidden-selector"> :hidden Selector</a>.</p>
-    </blockquote>
+    </div>
     <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>
     <h4 id="callback-function">Callback Function</h4>

entries/find.xml

@@ -46,9 +46,9 @@
     <p>If we begin at item II, we can find list items within it:</p>
     <pre><code>$('li.item-ii').find('li').css('background-color', 'red');</code></pre>
     <p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>
-    <blockquote>
+    <div class="warning">
       <p>Unlike in the rest of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</p>
-    </blockquote>
+    </div>
     <p><a href="http://api.jquery.com/jquery/#selector-context">Selector context</a> is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$('li.item-ii').find('li')</code> is equivalent to <code>$('li', 'li.item-ii')</code>.</p>
     <p><strong>As of jQuery 1.6</strong>, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:</p>
     <pre><code>var $allListElements = $('li');</code></pre>

entries/finish.xml

@@ -12,9 +12,9 @@
     <p>When <code>.finish()</code> is called on an element, the currently-running animation and all queued animations (if any) immediately stop and their CSS properties set to their target values. All queued animations are removed.</p>
     <p>If the first argument is provided, only the animations in the queue represented by that string will be stopped.</p>
     <p>The <code>.finish()</code> method is similar to <code>.stop(true, true)</code> in that it clears the queue and the current animation jumps to its end value. It differs, however, in that <code>.finish()</code> also causes the CSS property of all <em>queued</em> animations to jump to their end values, as well.</p>
-    <blockquote>
+    <div class="warning">
       <p>Animations may be stopped globally by setting the property <code>$.fx.off</code> to <code>true</code>. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.</p>
-    </blockquote>
+    </div>
   </longdesc>
   <example>
     <desc>Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.</desc>

entries/focus.xml

@@ -26,9 +26,9 @@
       <li>The <code>focus</code> event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as  form elements (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, etc.) and links (<code>&lt;a href&gt;</code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
       <li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
     </ul>
-    <blockquote>
+    <div class="warning">
       <p>Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use <code>.focus()</code> on elements that are visible. To run an element's focus event handlers without setting focus to the element, use <code>.triggerHandler("focus")</code> instead of <code>.focus()</code>.</p>
-    </blockquote>
+    </div>
     <p>For example, consider the HTML:</p>
     <pre><code>&lt;form&gt;
   &lt;input id="target" type="text" value="Field 1" /&gt;