Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Style and typography fixes, and code style adherence in the Effects section. #290

Closed
wants to merge 3 commits into from

2 participants

@alimony

See commit messages for details.

alimony added some commits
@alimony alimony Code style adherence.
Mostly spaces to tabs, a few empty line changes, and a few comment
reformats.
45884ad
@alimony alimony Style and typography fixes.
* Curly apostrophes and quotation marks.
* Em dashes.
* Remove double-spaces after periods.
* Replace stray .note HTML divs with Markdown.
* Remove any trailing whitespace.
* Put inline code Markdown on a few function mentions.
dce8821
@alimony alimony No entities. 062970f
@ajpiano ajpiano closed this in 58ac547
@alimony alimony referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@rmurphey rmurphey referenced this pull request from a commit in rmurphey/learn.jquery.com
@rmurphey rmurphey Merge branch 'master' into fix_method_refs
* master: (21 commits)
  0.2.7
  Remove remaining trailing whitespace from all pages. Fixes #313.
  Style and typography fixes, and code style adherence in the JavaScript 101 section. Fixes #312.
  0.2.6
  Correct comment in :input selector in Selecting Elements article. Fixes #306.
  Expand the JavaScript 101 'Scope' article with more useful information and explanations. Fixes #201.
  Added 0 to the list of falsy values in JavaScript 101 Conditional Code article. Fixes #300. Fixes #271
  Inserted missing word in the JavaScript 101 Arrays article. Fixes #299.
  Fixed inconsistency in showLinkLocation example in Basic Plugin Creation article. Fixes #307.
  Fix example and other style cleanup in Basic Plugin Creation article. Fixes #310. Fixes #311.
  Update list of reserved words in JavaScript. Fixes #301.
  Style and typography fixes and code style adherence in the Events section. Fixes #294.
  Style and typography fixes, and code style adherence in the Effects section. Fixes #290.
  Style and typography fixes, and code style adherence in the Code Organization section. Fixes #287.
  Remove double ampersands in README header. Fixes #284.
  Code and prose style improvements to all articles in Ajax chapter. Fixes #283.
  Style fixes on the About page. Fixes #279.
  Style guide fixes for the index, contributing, and About jQuery articles. Fixes #270
  relabel queue/dequeue content as advanced
  Added a missing 'i' in the for loop. Fixes #280.
  ...

Conflicts:
	page/ajax/ajax-and-forms.md
	page/ajax/jquery-ajax-methods.md
	page/effects/custom-effects.md
	page/effects/intro-to-effects.md
	page/events/event-basics.md
	page/events/event-helpers.md
	page/events/introduction-to-custom-events.md
	page/events/triggering-event-handlers.md
bac5e33
@arthurvr arthurvr referenced this pull request from a commit in arthurvr/learn.jquery.com
@alimony alimony Style and typography fixes, and code style adherence in the Effects s…
…ection. Fixes #290.
f419b87
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 4, 2013
  1. @alimony

    Code style adherence.

    alimony authored
    Mostly spaces to tabs, a few empty line changes, and a few comment
    reformats.
  2. @alimony

    Style and typography fixes.

    alimony authored
    * Curly apostrophes and quotation marks.
    * Em dashes.
    * Remove double-spaces after periods.
    * Replace stray .note HTML divs with Markdown.
    * Remove any trailing whitespace.
    * Put inline code Markdown on a few function mentions.
Commits on Mar 5, 2013
  1. @alimony

    No entities.

    alimony authored
This page is out of date. Refresh to see the latest.
View
4 page/effects.md
@@ -6,8 +6,8 @@ customFields:
key: "icon"
value: "picture"
---
-jQuery makes it trivial to add simple effects to your page. Effects can use
-the built-in settings, or provide a customized duration. You can also create
+jQuery makes it trivial to add simple effects to your page. Effects can use
+the built-in settings, or provide a customized duration. You can also create
custom animations of arbitrary CSS properties.
For complete details on jQuery effects, visit the
View
42 page/effects/custom-effects.md
@@ -2,50 +2,46 @@
title : Custom Effects with $.fn.animate
level: beginner
source: http://jqfundamentals.com/legacy
-attribution:
+attribution:
- jQuery Fundamentals
---
jQuery makes it possible to animate arbitrary CSS properties via the
-`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
+`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
value, or to a value relative to the current value.
```
-// Custom effects with `$.fn.animate`">
-$("div.funtimes").animate({
- left : "+=50",
- opacity : 0.25
- },
- // duration:
- 300,
- // callback:
- function() {
- console.log("done!");
- }
+// Custom effects with $.fn.animate
+$( "div.funtimes" ).animate({
+ left: "+=50",
+ opacity: 0.25
+ },
+ 300, // Duration
+ function() { // Callback when the animation is finished
+ console.log( "done!" );
+ }
});
```
-<div class="note">
-Color-related properties cannot be animated with `$.fn.animate` using jQuery
-out of the box. Color animations can easily be accomplished by including the
-[color plugin](http://github.com/jquery/jquery-color). We'll discuss using
+**Note:** Color-related properties cannot be animated with `$.fn.animate` using jQuery
+out of the box. Color animations can easily be accomplished by including the
+[color plugin](http://github.com/jquery/jquery-color). We'll discuss using
plugins later in the book.
-</div>
### Easing
Definition: Easing describes the manner in which an effect occurs — whether
the rate of change is steady, or varies over the duration of the animation.
-jQuery includes only two methods of easing: swing and linear. If you want more
+jQuery includes only two methods of easing: swing and linear. If you want more
natural transitions in your animations, various easing plugins are available.
As of jQuery 1.4, it is possible to do per-property easing when using the
`$.fn.animate` method.
```
-// Per-property easing">
-$("div.funtimes").animate({
- left: [ "+=50", "swing" ],
- opacity: [ 0.25, "linear" ]
+// Per-property easing
+$( "div.funtimes" ).animate({
+ left: [ "+=50", "swing" ],
+ opacity: [ 0.25, "linear" ]
}, 300 );
```
View
147 page/effects/intro-to-effects.md
@@ -9,36 +9,36 @@ jQuery can show or hide content instantaneously with `$.fn.show` or `$.fn.hide`:
```
// Instantaneously hide all paragraphs
-$("p").hide();
+$( "p" ).hide();
// Instantaneously show all divs that have the hidden style class
-$("div.hidden").show();
+$( "div.hidden" ).show();
```
-When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
+When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page.
-jQuery can also show or hide content by means of animation effects. You can tell
-`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
+jQuery can also show or hide content by means of animation effects. You can tell
+`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
in a string-valued argument of `slow`, `normal`, or `fast`:
```
// Slowly hide all paragraphs
-$("p").hide("slow");
+$( "p" ).hide( "slow" );
// Quickly show all divs that have the hidden style class
-$("div.hidden").show("fast");
+$( "div.hidden" ).show( "fast" );
```
-If you prefer more direct control over the duration of the animation effect, you
+If you prefer more direct control over the duration of the animation effect, you
can pass the desired duration in milliseconds to `$.fn.show` and `$.fn.hide`:
```
// Hide all paragraphs over half a second
-$("p").hide( 500 );
+$( "p" ).hide( 500 );
// Show all divs that have the hidden style class over 1.25 seconds
-$("div.hidden").show( 1250 );
+$( "div.hidden" ).show( 1250 );
```
Most developers pass in a number of milliseconds to have more precise control
@@ -46,104 +46,104 @@ over the duration.
##Fade and Slide Animations
-You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
-when showing and hiding content in an animated way. If you would rather show or hide content with
-one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
-show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
+You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
+when showing and hiding content in an animated way. If you would rather show or hide content with
+one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
+show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
rapidly making changes to an element's CSS `height` property.
```
// Hide all paragraphs using a slide up animation over 0.8 seconds
-$("p").slideUp( 800 );
+$( "p" ).slideUp( 800 );
// Show all hidden divs using a slide down animation over 0.6 seconds
-$("div.hidden").slideDown( 600 );
-```
+$( "div.hidden" ).slideDown( 600 );
+```
-Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
-animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property.
+Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
+animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property.
```
// Hide all paragraphs using a fade out animation over 1.5 seconds
-$("p").fadeOut( 1500 );
+$( "p" ).fadeOut( 1500 );
// Show all hidden divs using a fade in animation over 0.75 seconds
-$("div.hidden").fadeIn( 750 );
-```
+$( "div.hidden" ).fadeIn( 750 );
+```
##Changing Display Based on Current Visibility State
-jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle`
-will show content that is currently hidden and hide content that is currently visible. You can pass the
+jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle`
+will show content that is currently hidden and hide content that is currently visible. You can pass the
same arguments to `$.fn.toggle` as you pass to any of the effects methods above.
```
// Instantaneously toggle the display of all paragraphs
-$("p").toggle();
+$( "p" ).toggle();
// Slowly toggle the display of all images
-$("img").toggle("slow");
+$( "img" ).toggle( "slow" );
// Toggle the display of all divs over 1.8 seconds
-$("div").toggle( 1800 );
+$( "div" ).toggle( 1800 );
```
-`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
+`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
toggle the display of content with just a slide or a fade using `$.fn.slideToggle` and `$.fn.fadeToggle`.
```
// Toggle the display of all ordered lists over 1 second using slide up/down animations
-$("ol").slideToggle( 1000 );
+$( "ol" ).slideToggle( 1000 );
// Toggle the display of all blockquotes over 0.4 seconds using fade in/out animations
-$("blockquote").fadeToggle( 400 );
+$( "blockquote" ).fadeToggle( 400 );
```
##Doing Something After an Animation Completes
A common mistake when implementing jQuery effects is assuming that the execution of the next method in your
-chain will wait until the animation runs to completion.
+chain will wait until the animation runs to completion.
```
// Fade in all hidden paragraphs; then add a style class to them (not quite right)
-$("p.hidden").fadeIn( 750 ).addClass("lookAtMe");
+$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );
```
-It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
-animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
-you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
-to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
+It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
+animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
+you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
+to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
getting started.
To defer an action until after an animation has run to completion, you need to use an animation callback
-function. You can specify your animation callback as the second argument passed to any of the
-animation methods discussed above. For the code snippet above, we can implement a callback as follows:
+function. You can specify your animation callback as the second argument passed to any of the
+animation methods discussed above. For the code snippet above, we can implement a callback as follows:
```
// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
-$("p.hidden").fadeIn( 750, function(){
- // this = DOM element which has just finished being animated
- $( this ).addClass("lookAtMe");
+$( "p.hidden" ).fadeIn( 750, function() {
+ // this = DOM element which has just finished being animated
+ $( this ).addClass( "lookAtMe" );
});
```
-Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
-that the callback will be called for each element in the jQuery object. This means that if your
-selector returns no elements, your animation callback will never run! You can solve this problem by
+Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
+that the callback will be called for each element in the jQuery object. This means that if your
+selector returns no elements, your animation callback will never run! You can solve this problem by
testing whether your selection returned any elements; if not, you can just run the callback immediately.
```
// Run a callback even if there were no elements to animate
-var $someElement = $("#nonexistent");
+var $someElement = $( "#nonexistent" );
var cb = function() {
- console.log("done!");
+ console.log( "done!" );
};
if ( $someElement.length ) {
- $someElement.fadeIn( 300, cb );
+ $someElement.fadeIn( 300, cb );
} else {
- cb();
+ cb();
}
```
@@ -153,41 +153,40 @@ jQuery provides some additional features for controlling your animations:
### `$.fn.stop`
-`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
+`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
end-users control over page animations by rigging a button they can click to stop the animations.
```
// Create a button to stop all animations on the page:
-$("input").attr({
- type: "button",
- value: "Stop All Animations"
+$( "input" ).attr({
+ type: "button",
+ value: "Stop All Animations"
}).on( "click", function() {
- $("body *").filter(":animated").stop();
+ $( "body *" ).filter( ":animated" ).stop();
}).appendTo( document.body );
```
### `$.fn.delay`
-`$.fn.delay` is used to introduce a delay between successive animations. For example:
+`$.fn.delay` is used to introduce a delay between successive animations. For example:
```
-// Hide all level 1 headings over half a second; then wait for 1.5 seconds
+// Hide all level 1 headings over half a second; then wait for 1.5 seconds
// and reveal all level 1 headings over 0.3 seconds
-$("h1").hide( 500 ).delay( 1500 ).show( 300 );
+$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );
```
### `jQuery.fx`
-The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
-the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
-number of milliseconds. The default value of `jQuery.fx.speeds` is:
+The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
+the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
+number of milliseconds. The default value of `jQuery.fx.speeds` is:
```
{
- slow: 600,
- fast: 200,
- // Default speed, used for "normal"
- _default: 400
+ slow: 600,
+ fast: 200,
+ _default: 400 // Default speed, used for "normal"
}
```
@@ -199,23 +198,23 @@ jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.excruciating = 60000;
```
-`jQuery.fx.interval` controls the number of frames per second that are
-displayed in an animation. The default value is 13 milliseconds between
-successive frames. You can set this a lower value for faster browsers
-to make the animations run smoother. However this will mean more frames
-per second and thus a higher computational load for the browser, so you
+`jQuery.fx.interval` controls the number of frames per second that is
+displayed in an animation. The default value is 13 milliseconds between
+successive frames. You can set this to a lower value for faster browsers
+to make the animations run smoother. However this will mean more frames
+per second and thus a higher computational load for the browser, so you
should be sure to test the performance implications of doing so thoroughly.
Finally, `jQuery.fx.off` can be set to true to disable all animations. Elements
-will immediately be set to the target final state instead. This can be
+will immediately be set to the target final state instead. This can be
especially useful when dealing with older browsers; you also may want to
provide the option to disable all animations to your users.
```
-$("input").attr({
- type : "button",
- value : "Disable Animations"
-}).on( "click", function(){
- jQuery.fx.off = true;
+$( "input" ).attr({
+ type: "button",
+ value: "Disable Animations"
+}).on( "click", function() {
+ jQuery.fx.off = true;
}).appendTo( document.body );
```
View
63 page/effects/queue-and-dequeue-explained.md
@@ -4,64 +4,55 @@ level: beginner
source: http://jqueryfordesigners.com/api-queue-dequeue/
---
-When you use the animate and show, hide, slideUp, etc effect methods, youre
-adding a job on to the fx queue. By default, using queue and passing a function,
-will add to the fx queue. So were creating our own bespoke animation step:
+When you use the `animate`, and `show`, `hide`, `slideUp`, etc. effect methods, you're
+adding a job to the effects queue. By default, using `queue()` and passing a function,
+will add it to the effects queue. So we're creating our own bespoke animation step:
```
-$(".box").animate({
- height : 20
+$( ".box" ).animate({
+ height: 20
}, "slow" ).queue(function() {
-
- $("#title").html("We're in the animation, baby!");
-
+ $( "#title" ).html( "We're in the animation, baby!" );
});
```
-As I said though, these methods come in pairs, so anything you add using queue,
+As I said though, these methods come in pairs, so anything you add using `queue()`,
you need to dequeue to allow the process to continue. In the code above, if I
chained more animations on, until I call `$( this ).dequeue()`, the subsequent
-animations wouldnt run:
+animations wouldn't run:
```
-$(".box").animate({
- height : 20
+$( ".box" ).animate({
+ height: 20
}, "slow" ).queue(function() {
-
- $("#title").html("We're in the animation, baby!");
-
- $( this ).dequeue();
-
+ $( "#title" ).html( "We're in the animation, baby!" );
+ $( this ).dequeue();
}).animate({
- height: 150
+ height: 150
});
```
-Keeping in mind that the animation wont continue until weve explicitly called
-dequeue, we can easily create a pausing plugin, by adding a step in the queue
-that sets a timer and triggers after n milliseconds, at which time, it dequeues
+Keeping in mind that the animation won't continue until we've explicitly called
+`dequeue()`, we can easily create a pausing plugin, by adding a step in the queue
+that sets a timer and triggers after `n` milliseconds, at which time, it dequeues
the element:
```
$.fn.pause = function( n ) {
-
- return this.queue(function() {
-
- var el = this;
- setTimeout( function() {
- return $( el ).dequeue();
- }, n );
- });
-
+ return this.queue(function() {
+ var el = this;
+ setTimeout(function() {
+ return $( el ).dequeue();
+ }, n );
+ });
};
-$(".box").animate({
- height : 20
+$( ".box" ).animate({
+ height: 20
}, "slow" ).pause( 1000 ).animate({
- height: 150
+ height: 150
});
```
-
-Remember that the first argument for queue and dequeue are `fx`, and that in
-all of these examples I’m not including it because jQuery set the argument to `fx` by default - so I don’t have to specify it.
+Remember that the first argument for `queue()` and `dequeue()` is `fx`, and that in
+all of these examples I'm not including it because jQuery sets the argument to `fx` by default — so I don't have to specify it.
View
324 page/effects/uses-of-queue-and-dequeue.md
@@ -6,75 +6,73 @@ source: http://gnarf.net/2010/09/30/the-uses-of-jquery-queue-and-dequeue/
Queues in jQuery are used for animations. You can use them for any purpose you
like. They are an array of functions stored on a per element basis, using
-`jQuery.data()`. The are First-In-First-Out (FIFO). You can add a function to the
+`jQuery.data()`. They are First In, First Out (FIFO). You can add a function to the
queue by calling `.queue()`, and you remove (by calling) the functions using
`.dequeue()`.
To understand the internal jQuery queue functions, reading the source and
looking at examples helps me out tremendously. One of the best examples of a
-queue function Ive seen is `.delay()`:
+queue function I've seen is `.delay()`:
```
$.fn.delay = function( time, type ) {
- time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+ time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
- type = type || "fx";
+ type = type || "fx";
- return this.queue( type, function() {
+ return this.queue( type, function() {
- var elem = this;
+ var elem = this;
- setTimeout(function() {
+ setTimeout(function() {
- jQuery.dequeue( elem, type );
+ jQuery.dequeue( elem, type );
- }, time );
+ }, time );
- });
+ });
};
```
## The default queue – fx
-The default queue in jQuery is fx. The default queue has some special
+The default queue in jQuery is `fx`. The default queue has some special
properties that are not shared with other queues.
-- Auto Start: When calling `$(elem).queue(function() {});` the fx queue will
- automatically dequeue the next function and run it if the queue hasnt
+- Auto Start: When calling `$(elem).queue( function() {} );` the fx queue will
+ automatically dequeue the next function and run it if the queue hasn't
started.
-- inprogress sentinel: Whenever you `dequeue()` a function from the fx queue,
+- &ldquo;inprogress&rdquo; sentinel: Whenever you `dequeue()` a function from the fx queue,
it will `unshift()` (push into the first location of the array) the string
- "inprogress" – which flags that the queue is currently being run.
-- Its the default! The fx queue is used by `.animate()` and all functions that
+ &ldquo;inprogress&rdquo; which flags that the queue is currently being run.
+- It's the default! The fx queue is used by `.animate()` and all functions that
call it by default.
-<div class="note">
-If you are using a custom queue, you must manually `.dequeue()` the functions, they will not auto start!
-</div>
+**Note:** If you are using a custom queue, you must manually `.dequeue()` the functions, they will not auto start!
## Retrieving/Setting the queue
You can retrieve a reference to a jQuery queue by calling `.queue()` without a
function argument. You can use the method if you want to see how many items are
-in the queue. You can use push, pop, unshift, shift to manipulate the queue in
+in the queue. You can use `push`, `pop`, `unshift`, and `shift` to manipulate the queue in
place. You can replace the entire queue by passing an array to the `.queue()`
function.
## Quick Examples:
```
-// lets assume $elem is a jQuery object that points to some element we are animating.
+// Let's assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
-// remove the last function from the animation queue.
+// Remove the last function from the animation queue.
var lastFunc = queue.pop();
-// insert it at the beginning:
+// Insert it at the beginning:
queue.unshift( lastFunc );
-// replace queue with the first three items in the queue
+// Replace queue with the first three items in the queue.
$elem.queue( queue.slice( 0, 3 ) );
```
@@ -82,141 +80,115 @@ $elem.queue( queue.slice( 0, 3 ) );
```
$(function() {
-
- // lets do something with google maps:
- var $map = $("#map_canvas");
-
- var myLatlng = new google.maps.LatLng( -34.397, 150.644 );
-
- var myOptions = {
- zoom: 8,
- center: myLatlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var geocoder = new google.maps.Geocoder();
-
- var map = new google.maps.Map( $map[0], myOptions );
-
- var resized = function() {
-
- // simple animation callback - let maps know we resized
- google.maps.event.trigger( map, "resize" );
-
- };
-
- // wait 2 seconds
- $map.delay( 2000 );
-
- // resize the div:
- $map.animate({
- width: 250,
- height: 250,
- marginLeft: 250,
- marginTop:250
- }, resized );
-
- // geocode something
- $map.queue(function( next ) {
-
- // find stackoverflow's whois address:
- geocoder.geocode( {
- address: "55 Broadway New York NY 10006"
- }, handleResponse );
-
- function handleResponse( results, status ) {
-
- if ( status === google.maps.GeocoderStatus.OK ) {
-
- var location = results[ 0 ].geometry.location;
-
- map.setZoom( 13 );
-
- map.setCenter( location );
-
- new google.maps.Marker({
- map: map,
- position: location
- });
-
- }
-
- // geocoder result returned, continue with animations:
- next();
-
- }
-
- });
-
- // after we find stack overflow, wait 3 more seconds
- $map.delay( 3000 );
-
- // and resize the map again
- $map.animate({
- width: 500,
- height: 500,
- marginLeft:0,
- marginTop: 0
- }, resized );
+ // Let's do something with Google Maps:
+ var $map = $( "#map_canvas" );
+
+ var myLatlng = new google.maps.LatLng( -34.397, 150.644 );
+
+ var myOptions = {
+ zoom: 8,
+ center: myLatlng,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+
+ var geocoder = new google.maps.Geocoder();
+
+ var map = new google.maps.Map( $map[0], myOptions );
+
+ var resized = function() {
+ // simple animation callback - let maps know we resized
+ google.maps.event.trigger( map, "resize" );
+ };
+
+ $map.delay( 2000 ); // Wait for two seconds.
+
+ // resize the div:
+ $map.animate({
+ width: 250,
+ height: 250,
+ marginLeft: 250,
+ marginTop:250
+ }, resized );
+
+ // geocode something
+ $map.queue(function( next ) {
+ // find stackoverflow's whois address:
+ geocoder.geocode( {
+ address: "55 Broadway New York NY 10006"
+ }, handleResponse );
+
+ function handleResponse( results, status ) {
+ if ( status === google.maps.GeocoderStatus.OK ) {
+ var location = results[ 0 ].geometry.location;
+ map.setZoom( 13 );
+ map.setCenter( location );
+ new google.maps.Marker({
+ map: map,
+ position: location
+ });
+ }
+
+ // geocoder result returned, continue with animations:
+ next();
+ }
+ });
+
+ // after we find stack overflow, wait 3 more seconds
+ $map.delay( 3000 );
+
+ // and resize the map again
+ $map.animate({
+ width: 500,
+ height: 500,
+ marginLeft:0,
+ marginTop: 0
+ }, resized );
});
```
### Queueing something like Ajax Calls:
```
-// jQuery on an empty object, we are going to use this as our Queue
+// jQuery on an empty object, we are going to use this as our queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
-
- // hold the original complete function
- var oldComplete = ajaxOpts.complete;
-
- // queue our ajax request
- ajaxQueue.queue(function( next ) {
-
- // create a complete callback to fire the next event in the queue
- ajaxOpts.complete = function() {
-
- // fire the original complete if it was there
- if ( oldComplete ) {
-
- oldComplete.apply( this, arguments );
-
- }
-
- // run the next query in the queue
- next();
-
- };
-
- // run the query
- $.ajax( ajaxOpts );
-
- });
-
+ // Hold the original complete function.
+ var oldComplete = ajaxOpts.complete;
+
+ // Queue our ajax request.
+ ajaxQueue.queue(function( next ) {
+ // Create a complete callback to fire the next event in the queue.
+ ajaxOpts.complete = function() {
+ // Fire the original complete if it was there.
+ if ( oldComplete ) {
+ oldComplete.apply( this, arguments );
+ }
+ // Run the next query in the queue.
+ next();
+ };
+
+ // Run the query.
+ $.ajax( ajaxOpts );
+ });
};
-// get each item we want to copy
-$("#items li").each(function( idx ) {
-
- // queue up an ajax request
- $.ajaxQueue({
- url: "/ajax_html_echo/",
- data: {
- html : "[" + idx + "] " + $( this ).html()
- },
- type: "POST",
- success: function( data ) {
-
- // Write to #output
- $("#output").append( $("<li>", {
- html: data
- }));
-
- }
- });
-
+// Get each item we want to copy.
+$( "#items li" ).each(function( idx ) {
+ // Queue up an ajax request.
+ $.ajaxQueue({
+ url: "/ajax_html_echo/",
+ data: {
+ html: "[" + idx + "] " + $( this ).html()
+ },
+ type: "POST",
+ success: function( data ) {
+ // Write to #output.
+ $( "#output" ).append( $( "<li>", {
+ html: data
+ }));
+ }
+ });
});
```
@@ -225,39 +197,29 @@ $("#items li").each(function( idx ) {
```
var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
-$.each( [1,2,3], function( i, num ) {
-
- // lets add some really simple functions to a queue:
- theQueue.queue( "alerts", function(next) {
-
- // show something, and if they hit "yes", run the next function.
- if ( confirm("index:" + i + " = " + num + "\nRun the next function?") ) {
-
- next();
-
- }
-
- });
-
+$.each([ 1, 2, 3 ], function( i, num ) {
+ // Let's add some really simple functions to a queue:
+ theQueue.queue( "alerts", function( next ) {
+ // Show something, and if they hit "yes", run the next function.
+ if ( confirm( "index: " + i + " = " + num + "\nRun the next function?" ) ) {
+ next();
+ }
+ });
});
-// create a button to run the queue:
-$("<button>", {
- text: "Run Queue",
- click: function() {
-
- theQueue.dequeue("alerts");
-
- }
-}).appendTo("body");
-
-// create a button to show the length:
-$("<button>", {
- text: "Show Length",
- click: function() {
-
- alert(theQueue.queue("alerts").length);
-
- }
-}).appendTo("body");
+// Create a button to run the queue.
+$( "<button>", {
+ text: "Run Queue",
+ click: function() {
+ theQueue.dequeue( "alerts" );
+ }
+}).appendTo( "body" );
+
+// Create a button to show the length.
+$( "<button>", {
+ text: "Show Length",
+ click: function() {
+ alert( theQueue.queue( "alerts" ).length );
+ }
+}).appendTo( "body" );
```
Something went wrong with that request. Please try again.