A Smarter Way to Learn jQuery

Fill in the blank to measure the window's width.

var windowWidth = $(window)._________

width();

^ *width; *$

Fill in the blank to measure the window's width.

var windowWidth = ________.width();

$(window)

^ *\$$window$ *$

Measure the window's width and assign the number to a variable. Make up the variable name.

var winWidth = $(window).width();

^ *var .+ = \$$window$\.width; *$

If the window's width is 1000 and the image is 400, what is the offset to center it? Answer with a number.

300

^ *300 *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to calculate the offset and assign it to a variable.

var imageHorizOffset = ((windowWidth - 400) / 2) + "px";

The window's width has been assigned to the variable windowWidth. The image is 250 pixels wide. Fill in the blank to center the image.

var imageHorizOffset = ((______________) / 2) + "px";

windowWidth - 250

windowWidth`1space-`1space250

The window's width has been assigned to the variable windowWidth. The image is 400 pixels wide. Fill in the blank to center the image.

var imageHorizOffset = _________________ + "px";

((windowWidth - 400) / 2)

The window's width has been assigned to the variable windowWidth. The div is 500 pixels wide. Fill in the blank to center the div.

var divHorizOffset = _______________________

((windowWidth - 500) / 2) + "px";

^ *$\(windowWidth - 500$ \/ 2\) \+ •px•; *$

The window's width has been assigned to the variable windowWidth. The width of the div has been assigned to the variable divW. Fill in the blank to center the div.

var divHorizOffset = _______________________

((windowWidth - divW) / 2) + "px";

^ *$\(windowWidth - divW$ \/ 2\) \+ •px•; *$

Assign the offset for horizontally centering an image to a variable. Make up the variable name, and also the variable name for the window's width. Make up the image's width.

var imageHorizOffset = ((windowWidth - 400) / 2) + "px";

^ *var .+ = $\(.+ - [0-9]+$ \/ 2\) \+ •px•; *$

The offset for centering $(this) has been assigned to the variable divHorizOffset. Animate it using the variable.

$(this).animate({left: divHorizOffset});

^ *\$$this$\.animate${left: divHorizOffset}$; *$

1. Measure the window's width, assigning it to a variable. 2. Calculate the offset for horizontally centering $(this) and assign it to a variable. 3. Animate $(this), landing it in the center. Make up the two variable names and the width of $(this).

var winWidth = $(window).width();
var leftOffset = ((winWidth - 400) / 2) + "px";
$(this).animate({left: leftOffset});

^ *var (.+) = \$$window$\.width;\n *var (.+) = $\(\1 - [0-9]+$ \/ 2\) \+ •px•;\n *\$$this$\.animate${left: \2}$; *$

The window's width has been assigned to the variable windowWidth. The image is 400 pixels wide. Fill in the blank to center the image.

var imageHorizOffset = _________________ + "px";

((windowWidth - 400) / 2)

^ *$\(windowWidth - 400$ \/ 2\) *$

The window's width has been assigned to the variable windowWidth. The div is 500 pixels wide. Fill in the blank to center the div.

var divHorizOffset = _______________________

((windowWidth - 500) / 2) + "px";

^ *$\(windowWidth - 500$ \/ 2\) \+ •px•; *$

The window's width has been assigned to the variable windowWidth. The width of the div has been assigned to the variable divW. Fill in the blank to center the div.

var divHorizOffset = _______________________

((windowWidth - divW) / 2) + "px";

^ *$\(windowWidth - divW$ \/ 2\) \+ •px•; *$

Assign the offset for horizontally centering an image to a variable. Make up the variable name, and also the variable name for the window's width. Make up the image's width.

var imageHorizOffset = ((windowWidth - 400) / 2) + "px";

^ *var .+ = $\(.+ - [0-9]+$ \/ 2\) \+ •px•; *$

The offset for centering $(this) has been assigned to the variable divHorizOffset. Animate it using the variable.

$(this).animate({left: divHorizOffset});

^ *\$$this$\.animate${left: divHorizOffset}$; *$

var winWidth = $(window).width();
var leftOffset = ((winWidth - 400) / 2) + "px";
$(this).animate({left: leftOffset});

^ *var (.+) = \$$window$\.width;\n *var (.+) = $\(\1 - [0-9]+$ \/ 2\) \+ •px•;\n *\$$this$\.animate${left: \2}$; *$

http://jsfiddle.net/ASmarterWayToLearn/6snq99vu/

http://jsfiddle.net/ASmarterWayToLearn/0o98r3tL/

A Smarter Way to Learn jQuery / Chapter 40 Exercises

Congratulations. You've successfully completed all the exercises for this chapter.

Comments? Email me.