The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
Name and email required. Check any number of boxes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19
0
0
0
| Code the first line that triggers an action when the user scrolls. | $(window).scroll(function() { | ^ *\$\(window\)\.scroll\(function\(\) { *$ | |
| Measure the height of a div and assign the number to a variable. Make up the id of the div and the variable name. | var firstPanHt = $("div#bl_1").height(); | ^ *var .+ = \$\(•div#.+•\)\.height\(\); *$ | |
| Code two lines of CSS that specify absolute position 300 pixels above the top edge of the screen. Don't bother to indent. | position: absolute; top: -300px; | ^ *position: absolute;\n *top: -300px; *$ | |
| Animate a div to 500 pixels below the top edge of the screen. Don't specify a speed. Make up the id of the div. | $("div#loris").animate({top: 500}); | ^ *\$\(•div#.+•\)\.animate\({top: 500}\); *$ | |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to animate a div to the top of the screen when the user scrolls. | $(window).scroll(function() { $("div#main").animate({top: "0"); }); | ||
| Animate all images to a position flush with the left side of the screen. Don't specify a speed. | $("img").animate({left: "0"}); | $`(`"`img`"`)`.`animate`(`{`left`:`1space"`0`"`}`)`; | |
| A number has been assigned to the variable pixels_down. Using the variable, animate a div whose id is "loris" that many pixels down from the top edge of the screen. | $("div#loris").animate({top: pixels_down}); | ||
| Code the first line that triggers an action when the user scrolls. | $(window).scroll(function() { | ^ *\$\(window\)\.scroll\(function\(\) { *$ | |
| Measure the height of a div and assign the number to a variable. Make up the id of the div and the variable name. | var firstPanHt = $("div#bl_1").height(); | ^ *var .+ = \$\(•div#.+•\)\.height\(\); *$ | |
| Animate a div to a certain number of pixels (your choice) below the top edge of the screen. Don't specify a speed. Make up the id of the div. | $("div#loris").animate({top: 500}); | ^ *\$\(•div#.+•\)\.animate\({top: [0-9]+}\); *$ | |
| When the user scrolls, measure the amount of scroll and assign it to a variable that hasn't yet been declared. Make up the variable name. | $(window).scroll(function() { var now_scrolled = $(window).scrollTop(); }); | ^ *\$\(window\)\.scroll\(function\(\) {\n *var .+ = \$\(window\)\.scrollTop\(\);\n}\); *$ | |
| When the user scrolls, animate an h2 heading down from the top by the same number of pixels as the height of a div. Do it in three lines of code. Don't specify a speed. Make up the ids of the heading and the div. | $(window).scroll(function() { $("h2#loris_promo").animate({top: $("div#first_div").height()}); }); | ^ *\$\(window\)\.scroll\(function\(\) {\n *\$\(•h2#.+•\)\.animate\({top: \$\(•div#.+•\)\.height\(\)}\);\n}\); *$ | |
| A number has been assigned to the variable pixels_down. Using the variable, animate a div whose id is "loris" that many pixels down from the top edge of the screen. | $("div#loris").animate({top: pixels_down}); | ^ *\$\(•div#loris•\)\.animate\({top: pixels_down}\); *$ | |
| Code the first line that triggers an action when the user scrolls. | $(window).scroll(function() { | ^ *\$\(window\)\.scroll\(function\(\) { *$ | |
| Measure the height of a div and assign the number to a variable. Make up the id of the div and the variable name. | var firstPanHt = $("div#bl_1").height(); | ^ *var .+ = \$\(•div#.+•\)\.height\(\); *$ | |
| Animate a div to a certain number of pixels (your choice) below the top edge of the screen. Don't specify a speed. Make up the id of the div. | $("div#loris").animate({top: 500}); | ^ *\$\(•div#.+•\)\.animate\({top: [0-9]+}\); *$ | |
| When the user scrolls, measure the amount of scroll and assign it to a variable that hasn't yet been declared. Make up the variable name. | $(window).scroll(function() { var now_scrolled = $(window).scrollTop(); }); | ^ *\$\(window\)\.scroll\(function\(\) {\n *var .+ = \$\(window\)\.scrollTop\(\);\n}\); *$ | |
| When the user scrolls, animate an h2 heading down from the top by the same number of pixels as the height of a div. Do it in three lines of code. Don't specify a speed. Make up the ids of the heading and the div. | $(window).scroll(function() { $("h2#loris_promo").animate({top: $("div#first_div").height()}); }); | ^ *\$\(window\)\.scroll\(function\(\) {\n *\$\(•h2#.+•\)\.animate\({top: \$\(•div#.+•\)\.height\(\)}\);\n}\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/cqsLdqma/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/vjwmn1LL/ |