A Smarter Way to Learn jQuery

Fill in the blank to truncate the paragraph to 4em.

p.short {
____________
overflow: hidden;
}

height: 4em;

^ *height: 4em; *$

Fill in the blank to hide the overflow.

p.short {
height: 4em;
____________
}

overflow: hidden;

^ *overflow: hidden; *$

Fill in the blank to allow the paragraph to display at full height.

p.full_height {
____________
}

height: auto;

^ *height: auto; *$

Code the jQuery selector that selects this link:

$("a#show_more")

^ *\$$•a#show_more•$ *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to code a link that doesn't link to anything.

Code the CSS line that hides overflow. Don't indent it.

overflow: hidden;

overflow`:`1spacehidden`;

Code the CSS line that allows a paragraph to display at full height. Don't indent it.

height: auto;

Select a link. Make up its id.

$("a#loris")

^ *\$$•a#.+•$ *$

Add a class to a paragraph. Make up the paragraph's id and the class name.

$("p#loris").addClass("fullHeight");

^ *\$$•p#.+•$\.addClass$•.+•$; *$

Code four lines that limit the length that a class of paragraph displays. Make up the class name and the number of ems.

p.short {
height: 4em;
overflow: hidden;
}

^ *p\..+ {\n *height: [0-9]+em;\n *overflow: hidden;\n *} *$

Code three lines that allow paragraphs of a certain class to display full-length. Make up the class name.

p.full {
height: auto;
}

^ *p..+ {\n *height: auto;\n *} *$

When the user clicks a link, a class is added to a paragraph. Make up the link id, paragraph id, and class name.

$("a#loris").on("click", function() {
$("p#more_loris").addClass("full_length");
});

^ *\$$•a#.+•$\.on$•click•, function\($ {\n *\$$•p#.+•$\.addClass$•.+•$;\n *}\); *$

Code the CSS line that allows a paragraph to display at full height. Don't indent it.

height: auto;

^ *height: auto; *$

Select a link. Make up its id.

$("a#loris")

^ *\$$•a#.+•$ *$

Add a class to a paragraph. Make up the paragraph's id and the class name.

$("p#loris").addClass("fullHeight");

^ *\$$•p#.+•$\.addClass$•.+•$; *$

Code four lines that limit the length that a class of paragraph displays. Make up the class name and the number of ems.

p.short {
height: 4em;
overflow: hidden;
}

^ *p\..+ {\n *height: [0-9]+em;\n *overflow: hidden;\n *} *$

Code three lines that allow paragraphs of a certain class to display full-length. Make up the class name.

p.full {
height: auto;
}

^ *p..+ {\n *height: auto;\n *} *$

When the user clicks a link, a class is added to a paragraph. Make up the link id, paragraph id, and class name.

$("a#loris").on("click", function() {
$("p#more_loris").addClass("full_length");
});

^ *\$$•a#.+•$\.on$•click•, function\($ {\n *\$$•p#.+•$\.addClass$•.+•$;\n *}\); *$

http://jsfiddle.net/ASmarterWayToLearn/ocz07Ltm/

http://jsfiddle.net/ASmarterWayToLearn/nc0xebpm/

A Smarter Way to Learn jQuery / Chapter 37 Exercises

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

Comments? Email me.