Livetyping Navigation Cheat Sheet

Size: px

Start display at page:

Download "Livetyping Navigation Cheat Sheet"

Malcolm Hunter
5 years ago
Views:

Let s say you want to go back to the example that shows you how to make a slide-down notification.

1 Livetyping Navigation Cheat Sheet This document is aimed at helping you find your way back to stuff in the Livetyping course. Let s say you want to go back to the example that shows you how to make a slide-down notification. Just search for it in here, and you ll find out which lesson it was in and the nearest timestamp. Note that each lesson video includes chapter markers, which are also a handy way of finding stuff:

2 Lesson 1 00:00 Welcome Why prototyping is A Good Thing. 02:14 Course Structure What each lesson contains. 02:29 Working Environment A text editor and a browser, or JS Bin. 04:58 Let s Rock! A basic HTML page, opening and closing tags, <head>, <title>, and <body> tags. <p> and other text-related tags ( <em>, <strong>, <img>, placekitten, placehold.it). Attributes (mandatory and optional), self-closing tags, id, class. <a> for links. Headings ( <h1> to <h6> ), lists ( <ul>, <ol>, and <li> ). <pre>, <blockquote>, <dl> (definition list). 10:31 Form Elements <form> tag, <input> s of various types: text, password, , url, tel, number, date (and its variants), range. Important attributes: placeholder, value, required, autofocus, readonly, disabled. <button> (and <input type="button"> ). checkbox and radio types, and the checked and name attributes.

3 <label>, and the for and id elements to associate them with <input> s. <textarea>, <progress>. <select> and <option> for drop-down lists. Autosuggest/autocomplete with an <input> that has a list attribute that connects it to a <datalist> element. 17:38 Structural Elements Tables: <table>, <tr>, <th>, <td>. <div>, <header>, <footer>, <section>. Adding a bit of color with CSS. 19:16 More Tags, Anyone? There are lots more tags available 19:32 Now, go and play. Go try it!

4 Lesson 2 00:34 Appearance How to Make Tea example. The <style> element. Selectors and declarations, properties and values. 01:30 Specifying the font ( font- family ) and its weight ( font- weight ). Aligning text ( text- align ). Setting font size ( font- size ), and sizing units (pixels ( px ), percent ( % ), ems ( em ), and rems ( rem ). Making text italic ( font- style ). Line spacing ( line- height ). 4:30 Whitespace: margins ( margin, margin- bottom, margin- top, margin- left, margin- right ), and a first look at Firebug. Specifying multiple fonts in a font stack. 06:32 Other text stuff: underline ( text- decoration ), capitalization ( text- transform ), text shadow ( text- shadow ), useful for that embossed look. 07:15 Cascading, inheritance, and specificity. Using IDs ( # ) and classes (. ) in CSS selectors. Combining selectors.

5 10:28 Styling non-text stuff. Background colors ( background- color ). More on whitespace: padding, and how it s different from margins. Adding borders ( border ). Rounded corners ( border- radius ). Drop shadows ( box- shadow ). Playing with transparency ( opacity ). Opacity as part of color ( rgba ). 14:14 Hiding stuff ( visibility and display ). 14:55 Pseudo-classes: :hover, etc. 15:32 Everything is a rectangle. 16:03 Positioning CSS for sizing elements: height and width. Default positioning for block elements ( static positioning, display: block; ). Elements that are displayed inline by default, and how display:inline; works. display: inline- block; Other values for position. absolute positioned elements, and how to position them: margins, left, right, top, and bottom. 19:22 Floats (and relative positioning).

6 21:18 Nesting one element inside another. Using absolute positioning to stretch an element (instead of using width and height ). 22:09 Overlapping elements: z- index. 23:11 A more real-world example. Using all the stuff we just saw to lay out the sections of a page. The min- height property. 28:54 Adding some content. Overflow and how to handle it. The overflow property. 29:32 The limits of CSS. You can t calculate values. So we use JavaScript instead, like they do (or rather, did) in Google Reader. An intro to JavaScript. 31:02 Our first JS function. Declaring variables. The semicolon. Statements. Assigning a value to a variable, using a jquery selector. Objects, properties, methods. Calling an object s methods. Performing a calculation. jquery s $(document).ready() function. Calling our function. 35:14

7 Testing it. Making it work when the page is resized: binding an event handler.

8 Lesson 3 00:11 Pattern 1: Inline Editing Enabling editing for a checkbox label (like in a to-do list). Adding a checkbox and its label. Adding an text input. Adding classes so we can do stuff to them. Adding styles to make things look decent. And a heading. Adding a class and a CSS rule to hide the input. Adding the $(document).ready() function. 02:15 Adding an event handler to items with the editable class. The this keyword, how to use it. Hiding the label. Selecting the input (by using the next() function) and showing it. Testing it. 3:26 Adding a handler for when the input loses focus (the blur event). Hiding the input, and using prev() (the opposite of next() ) to get to the label, then show it. A gotcha: clicking shows the input, but doesn t give it focus. Chaining functions together. Adding a call to focus() to the chain. Saving in JS Bin (a good idea then, when the course was recorded, but since then JS Bin has been improved to include autosave). 05:05 Adding a visual clue that it s editable. First, using :hover in CSS.

9 Commenting stuff out in CSS. Now, in jquery: adding an event handler to label for hover. What happens when hover begins, and what happens when it ends. But first, including the jquery UI library (so we can animate stuff). Splitting code up onto multiple lines to make it easier to read and understand. The animate() function. Differences between CSS and JavaScript when it comes to names. Also putting things in quotes. Multiple arguments in function calls (must be separated by commas). What curly braces mean ( this is a list of name/value pairs ). Trying it out. Making the area that lights up bigger, by wrapping the label in a <div>. Indenting HTML for easier reading. Changing the jquery to make it work again: using parent() to go up to the parent element. 10:10 Another gotcha: hover still triggers the color change, even in edit mode. The fix: make it so hovering over the label triggers the change, but make the change happen on the parent <div>. Making it do the right thing when you hit Enter: first wrap the elements in <form> to make it into a proper form. Then handle the form s submit event. Inside the submit handler: using find() to get the <input> (using the :focus pseudo-selector), then call blur() on it. Trying it out it works! Except it reloads the page. Suppressing the actual form submit and page reload. In the blur handler, adding code to update the label. Using val() to get the input s

10 value, then call the label s text() function to set its text. Trying it again. Now it actually works! 14:19 Making it work for multiple items. Updating the label s click handler to get the value from the text. Adding more items. (Importance of classes.) Enter behavior is now broken. Fixing it by adding a (hidden) submit button. 16:10 Commenting your code. Comments in JavaScript two ways. How the code samples are structured. 17:15 Pattern 2: Inline Editing Multiple Fields Like editing the title and description of an image in Flickr. Adding an image (kittens!). Adding a title for the image. Having two <div> s: one for the static text, one for the inputs (an <input> and a <textarea> ). Adding Save and Cancel buttons. 19:57 Adding classes to the <div> s (same as before: editable and editing ). Modifying the CSS to change the appearance of <h3> (the image title) and to make the text look the same in the static text and inputs. Adding margins for a bit of whitespace. Also in the CSS: making the elements the same size. Using an attribute selector for the input (to target only <input> s of type text ). Modifying the JavaScript to make it work with the new HTML. Using multiple selectors in jquery.

11 23:55 It works, now let s make it look good. Making the buttons into jquery buttons. 26:33 Wiring up the Cancel button. Targeting using the attribute selector again. 27:27 Cosmetic changes to make it all line up and look good. Making the buttons smaller and adding spacing. Making them centered. Making the primary action button look more prominent. Using!important to override existing styling. A bit about CSS precendence and specificity. Adding margins to the <input> and the <textarea> to place them in the same places as the static text. 29:35 Adding more of the same and making sure it still works. Changing the whitespace (bottom margin in this case) so that the second image doesn t get pushed down when we edit the first one. Things that are missing: auto-selecting text in the field that has focus, hiding default text, handling multiple paragraphs in the description ( <textarea> ), handling (or at least, prototyping) what happens when things go wrong. How much do you really need to prototype? How hard is it? How easy is it to explain the desired behavior? (I wrote a blog post about this too, actually.) There s no one right way to do something! 33:33 Pattern 3: Tabs Simple Example Adding jquery and jquery UI libraries. Some CSS to make the text smaller. Adding a container for the tabs (a <div> ) and a <ul> containing an <li> with an

12 <a> inside (with the correct href ) for each tab. Adding a <div> for each tab s content. Making the IDs match the href s. Adding content pasting in some lorem ipsum. 34:56 Adding the $(document).ready() function. Converting what we added into tabs with the jquery tabs() function. 35:23 Pattern 4: Tabs In Context Adding tabs to our Google Reader-style example from earlier. Adding the <ul> and <div> s like before. Tabifying the <div>. Oh, and adding jquery UI Fixing the problems. Making all the text a bit smaller. Getting rid of the default border and the rounded corners ( border: none; and border- radius: 0; ). Accounting for the padding that jquery added ( padding: 0; ). Getting rid of the pink background. Moving overflow: auto; into the individual tabs so the scrollbar is in the right place. Using the absolute positioning trick again to give the <div> s the right height. Tweaking the value of top. Other tab stuff: making it so you can rearrange them, default tab, closable tabs, etc. See the jquery UI docs. Note that the tabs page on the main jquery documentation site that is referenced in the screencast no longer exists. 39:38 Pattern 5: Selection-dependent Inputs Adding a <select> for the dropdown list, with an <option> for each option. Adding a fake option for Select (so nothing gets selected by default). Adding a <form> for each option. First: . Adding a <div> for the buttons (inside the form).

13 Adding a <label> and an <input> for the address. Copying the form and changing the copies for phone and SMS. Adding a select for type of phone number (copy/paste, then change). Selecting and tabbing in JS Bin to change indentation. Adding some CSS to tidy things up. Nice fonts, smaller font sizes. Using display: block; to make the labels top-aligned. Adding whitespace. Adding a rule for hidden by default (the hbd class). Styling the forms: adding a border, padding, making the first select embedded in the border. 45:25 Wiring it up: in $(document).ready(), making the buttons into jquery buttons (using attribute selectors to target just the buttons). Adding the jquery and jquery UI libraries. Adding a CSS rule to make the buttons smaller, and to make the primary action button more important-looking. A brief word about jquery themes. Getting rid of the background that jquery gives the button, making it orange, making the text bold and black. Making the fake option in the dropdowns look different. Making the <input> wider. Hiding all the forms by adding the hbd class. Adding IDs to the forms so we can do stuff to them in our JavaScript. Adding a second field for re-typing the address. 48:38 Back to the JavaScript. Adding a handler for the first <select> s change event.

14 Using the if... else construct. If the selected value is , show the form, and hide the others (using chaining). else if for checking multiple conditions. Final else to define what happens if the user clicks on the fake Select option (hide everything). 50:36 An alternative to multiple if s: the switch statement (with a case for each option, and a default for anything else, and break s at the end of each one). It s better because it s easier to read, especially with many options. Tweaking stuff so it works right in render view. Margin on first <select>, reducing the width of the form.

15 Lesson 4 00:15 Pattern 5: Selection-dependent Inputs II New JS Bin! Extending the previous example: changing the options in one dropdown list depending on what s selected on another dropdown list. Adding a country selector. The lazy way: one (static) <select> for each country, show and hide depending on the country that is selected. The ampersand (&) is special! Character entities, like em-dashes, the copyright symbol, and the ampersand itself. Adding a disabled dropdown for when no country is selected. (It uses the disabled attribute.) The <select> s are different widths because of their different contents. Using Firebug to see the current width, then fixing it in CSS. Using a second switch to do the work here. 05:15 But this is a LOT of HTML. A better way: adding options to the dropdown list on-thefly depending on what the user selects. So now, we only need one <select> element. Using JSON to store the provider names. Simplest way: key-value pairs. Splitting the JSON up onto multiple lines to make it easier to read. 09:00 Adding code to remove the <option> s from the <select> ( empty() ) and enable it ( removeprop() ). (It s currently disabled.)

16 Adding the dummy <option> (using prepend() to add a chunk of HTML). Digging into the JSON object to pull out just what we want (providers for the USA) using the each() method. Building up the <option> that we want to add and storing it in a variable. Selecting the last <option> in the select, using the direct child selector ( > ) and the :last pseudo-selector. Using after() to insert the new <option> in the right place (as a sibling after the selected <option> ). Now the same for the UK and Germany. For the default case (when the user clicks on the dummy option), we disable the control (using prop() to add the disabled property). An even better way we might do this instead of a switch with multiple case statements, we could use the value of the selected item to get the list of providers. (See it in action here and download it, zipped, here.) 13:08 Animation! Animated transitions. Not always necessary. But good for: highlighting changes, making changes less disorienting, making better use of screen real estate. Different types of jquery animation functions: Specific functions that just do one thing, e.g., slidedown(), slideup(). Functions that change things in the interface, but that aren t animated by default, e.g., show(), hide(). But they can optionally be animated. The animate() function the Swiss army knife of animation. More control, but more complex. You ll probably need both jquery and jquery UI libraries. 15:37 Animation 1: Slide-down Notification Adding the jquery and jquery UI libraries.

17 Adding a <header> and a <section> with some (lorem ipsum) text. Adding a logo to the header and a title ( <h1> ). Adding a few CSS rules to make it look nice. (Note use of display: inline- block; for the title.) Adding the <div> for the notification and styling it. Note the use of position: absolute; to make the <div> sit in front of the content. Setting display: none; to hide it. 18:41 JavaScript. Selecting the <div>, and using chaining to show it, wait a bit, then hide it again. Adding arguments to show() and hide() to animate them. Adding an additional argument to change the animation s direction. It works, but it s not very smooth. Slowing it down to get a closer look. Commenting out hide() so we can inspect the <div>. Replacing the margins with padding. Much better. 21:30 Animation 2: Sticky Slide-down Notification Adding something to let the user dismiss the notification (the character entity). Enclosing it in a <span> so we can style it. Using CSS to change the pointer from a text selection pointer to a hand ( cursor: pointer; ). JavaScript: breaking up the functionality. Putting the hide() in a click handler on the <span> (the x ). Using parent() to get up from the <span> to the <div>. 22:39 Animation 3: Selection-dependent Inputs (Again, but Different) Changing the earlier example to use radio buttons, where the form appears directly below the selected radio button.

18 When a big chunk of content appears in the middle of existing content, animation is a good way to prevent it being jarring/disorienting. Getting rid of the <select> and adding radio buttons instead. Giving all the radio type <input> s the same name. The non-breaking space character entity ( ). Adding for to link the label to the <input>. Making the labels be on the same line as the radio buttons (changing display: block; that we previously added to <label> to display: inline- block; ). Adding a new rule for the labels in the forms so that they will get display: block;. But now all the radio buttons are on the same line. The solution: wrap each radio button and its label in a <div>. 25:51 Changing the JavaScript to make it work. Replacing the switch for the <select> with a handler for the radio buttons change event. Nested quotes in JavaScript. For name="type", we have to use double quotes, because input[name="type"] is already in single quotes. Inside the function, first hide all the forms. We re using slideup() this time (it s simpler). Selecting the form in the same <div> as the radio button that was clicked ( this ) and showing it using slidedown(). Adding a bit of CSS to sort out layout issues. Getting rid of the earlier negative top margin on <form>. Why do the two animations happen simultaneously? The jquery animation queue(s). jquery has one for each element being animated. If you re animating one element, the animations happen sequentially, because they are in the same queue. If you re animating multiple elements, the animation happens simultaneously (though you can make them happen sequentially if you want to more on that later, when we talk about callback functions).

19 29:03 Animation 4: Expanding Search Box An expanding search box, like on Slideshare. Recycling the slide-down notification example (but without the notification). (We comment out the code that shows and hides it.) Positioning the search box. Using float to push it over to the right. Styling it: padding, border- radius, width, opacity, no border. Adding a handler for the <input> s focus event. 31:44 The animate() function. Two versions: The four-argument version: properties : a set of CSS key-value pairs (a map ) that the function will animate towards duration : how long the animation will take easing : the easing function (the flow of the animation, how its speed changes over time). The default is called swing (and not linear, as I wrongly assert in the screencast). See this page for all the available easing functions. complete : a function that gets called when the animation ends (a callback function ). Kind of like chaining. Lets you make animations sequential instead of simultaneous. (See animation queues, above.) The two-argument version (which, unexpectedly, lets you do more than the fourargument version): properties : same as in the four-argument version options : another map, this time including duration, easing, and complete, but also a callback function for each step of the animation, whether to queue the animation or run it immediately, and a different easing for each CSS property being animated. Here, we re using the second version. First, the CSS key-value pairs. We want to animate the opacity to 1 and the width to 150 pixels. Notes:

20 In JavaScript, two-word attributes are written without a hyphen, and with the second word only capitalized. So instead of margin- left, like you d write in CSS, here you have to write marginleft. You can t use the all-in-one properties like border, margin, padding, etc. You have to do them separately. So instead of this: border: 1px solid black; You have to do this: borderwidth: 1, borderstyle: solid, bordercolor: black Numeric values don t get units. JavaScript expects just a number, in the appropriate units (so pixels for width, in this case). The second argumant is a map of options. Here, we just use it to set the duration (800ms). Clicking in the search box makes it grow wider and become fully opaque. But clicking outside has no effect. 34:34 Adding a handler for the blur event (when the <input> loses focus). MOAR animations! Let s animate some more properties: fontsize, font color, borderwidth and bordercolor. And add them to the blur handler too so they animate back. Animating other, unrelated elements. Reducing the opacity of <body>. Now we can see that, oh no! The border animations aren t working! This is because of border: none;. Changing it to be dark grey. Now it works.

21 37:00 jquery: The Rest All the examples are available on the code samples page. 37:25 Quick Example 1: Accordion <h3> s for section names, with a <div> after each one for the contents of the accordion section. And a wrapper <div> to contain the whole thing, with an id. The sub-options in the first section are hidden using display: none; in the CSS, and some JS shows and hides them. The accordion() function converts the wrapper <div> into an accordion, with a few options specified to: Collapse all the sections by default ( collapsible: true allows all sections to be closed (by default one must remain open) and active: false actually collapses them) Fit each section to its contents ( heightstyle: "content" ) The other function is an event handler that shows and hides the sub-options when you click the checkbox (using the toggle() function, which hides it if it s visible and shows it if it isn t). 38:53 Quick Example 2: Date Picker Also, validation! In the HTML, the alert is there all the time. We just show it and hide it as needed. It uses jquery s ui- state- error class to style it as an alert, and its ui- corner- all class to give it rounded corders. The alert icon also comes from jquery. It s a empty <span> with the classes ui- icon and ui- icon- alert (plus some inline CSS for positioning). (You can see all the available icons on the jquery Themeroller page.) The CSS mostly just sizes and positions stuff. Here we re using visibility: hidden; to hide the alert instead of display: none;. This means it still takes up space, so the stuff after it doesn t move around when we show and hide it.

22 Also styling for the error state for the fields (and for the border on the <inputs>, because the default one looks rubbish when you try to change its color). JavaScript: one line to add the datepickers to the fields. The rest is for the validation. It s all inside an event handler for the date inputs change event. This gets the dates from the two <input> s (using val() ) and compares them. (You have to use Date.parse() to convert the dates to numbers so that you can compare them.) The comparison just uses the less-than operator ( < ) and an if... else to do stuff depending on whether the return date is before the outward date or not. Within the first block (which is triggered if the return date is before the outward date), we just make the alert visible (using the css() function to set the value of the visible property to visible ) and add the error class to the <div> containing the input that was just changed (using addclass() ). (We already added the CSS rules for the class earlier.) Note that addclass() can be animated with jquery UI. And the else block just does the opposite (makes the alert hidden again, and removes the error class). 41:35 Quick Example 3: Dialog Box In the HTML, we have a <div> that will become the dialog box. Inside, the same content as we had in the accordion example. Plus a <div> containing the Save and Cancel buttons. Using <button> instead of <input> so we can add an icon. The only CSS change (compared to the accordion example) is to style the buttons. The JavaScript. One line to make the Open buttons and the Cancel button into jquery buttons. One line to make the <div> into a dialog box (the dialog() function). Another one does the same for the Save button, but adds an icon ( ui- icon- disk ). Then there s a click handler for the Open button that opens the dialog box by calling dialog(). Specifying "open" as the argument to dialog() calls the

23 dialog s open() function, which opens it. And there s another function call that converts the <div> into a dialog box. This call sets its title (the title option), makes it modal ( modal: true ), and keeps it closed by default ( autoopen: false ); without this, this function call would open it). There s a handler for the Submit and Cancel buttons click event that just closes the dialog (in the same way that we opened it above). And finally, there s the handler from the accordion example that shows and hides the sub-options when you select the checkbox. 43:15 Quick Example 4: Menu A menu with three items (with icons) that opens when you click a button. The structure and content is the same as a couple of earlier examples. Things we have to do ourselves: positioning, closing the menu when you click outside it. I also made it so that clicking on a menu item or on the menu button also closes it. In the HTML, we have a button to open the menu and a <ul> of <li> s (each of which contains an <a> ) for the menu itself. We ve also got <span> s with the relevant classes for the icons (here ui- icon plus one of ui- icon- gear, ui- icon- person, and ui- icon- power ). The button and the <ul> are wrapped in a <div>, we ll see why soon. In the CSS, in addition to the existing stuff, we ve got a rule for the wrapper <div> that positions it using a right float. And display: inline- block; keeps it lined up with the title. And the rule for the menu hides it by default and gives it absolute positioning. This means it will appear on top of the other content instead of pushing it out of the way. We also reduce the font size a bit. In the JavaScript, the first function call converts the button that we added into a jquery button and sets its label (in case you were wondering why it didn t get one in the HTML).

24 The next one converts our menu <ul> into a menu. After that comes the click handler for the button. It does two things: It makes the menu visible using toggle(). (It also means that if you click the button again, it hides the menu, which is what we wanted.) It positions the menu using position(). (You can call position() on any visible element.) This function uses natural language, and speaks from the point of view of the element you call it on, in this case, the menu.) It says position my top right corner at the bottom right corner of the button. Note that right/left must come before top/bottom. The next bit is a click handler for the links inside the menu. We need to provide event as the argument to function() here, then call preventdefault() on event inside the function. This stops the link doing its default thing, which is to go to the location specified in its href. (In this case. that s #, which means this page. So clicking it reloads the same page.) Then it hides the menu ( hide() ). Then we have a click handler for the whole page (on the html element), so that if you click outside the menu, it hides the menu (but only if the menu is visible notice the :visible pseudo-selector in there). The final bit is to get around the default jquery behavior when more than one handler applies to an element. In this case, clicking on the button (or a menu item) triggers the handler on the button, but also bubbles up to the click handler on the html element. This would make the menu close immediately after you open it. So again, we use an event in function(), but this time we call stoppropagation() to stop the click event triggering any handlers further up. 46:21 Quick Example 5: States All the jquery states, in one place. Interaction cues used on static content. The ui- widget class for font and font size, and ui- state- error, and ui- state- highlight classes for colors. Interaction states for buttons and the like. Many of these are applied by jquery

25 itself, for example, when you hover over a button. ui- state- hover, ui- state- focus, and ui- state- active. Combining the two different state types: ui- error- state for buttons does not work well. ui- error- state applied to a container <div> that contains text and buttons. This works better. ui- highlight- state for buttons again, does not work well. ui- highlight- state applied to a container <div> that contains text and buttons. Again, this works well. 49:04 Quick Example 6: Drag and Drop 1 jquery has some specific implementations of drag and drop for common use cases, such as sortable(), which makes a list sortable using drag and drop. In the HTML, we have a <ul> with a number of <li> s. Each of these contains some text and an icon (a span with the ui- icon and ui- icon- arrowthick- 2- n- s classes, which gives us a vertical, double-ended arrow, useful for indicating draggability). Each <li> has the ui- corner- all class to give it rounded corners. In the CSS, we just have rules to style each <li> and position the icon correctly relative to the text and to make it invisible by setting its opacity to zero. (We ll be animating this in a minute.) In the JavaScript, the first two lines enable the drag and drop functionality. sortable() makes the list sortable, and disableselection() prevents you being able to select the text in the items (which is kind of a, ahem, drag when you re trying to drag). Note that disableselection() has since been deprecated and this behavior has been built into sortable(), so you don t have to use it any more. 50:30 Quick Example 7: Drag and Drop 2

26 Extending the previous example: dragging an item from one list to another. In the HTML, it s the same, except for the second, empty <ul>. And there are some additional <div> s for positioning and styling. And the icon is now a gripper icon ( ui- icon- grip- dotted- vertical ). In the CSS, there are new rules for the new <div> s to position them and style them. There s float: left; to position the two divs side-by-side with a margin so there s space between them. And the <div> s get a background- color, padding, and width. The min- height declaration for <ul> stops an empty list from disappearing completely (and if that happens, you can t drop things on it). And at the bottom, there s a rule for elements with the list_placeholder class. More in a minute. In the JavaScript, not much has changed. I ve removed the code for animating the arrow icons. And the call to sortable() now gets a couple of options: connectwith: "ul" connects the two lists together. (Its value is a selector that specifies what the list links to.) It means you can drag from any <ul> to any other <ul>. The placeholder option specifies the classes jquery should apply to the blank spot where the item is going to land if you drop it. By default, this is a transparent rectangle the same size as the items. Here we re using jquery s ui- state- highlight class to give it color and a border, ui- corner- all to give it rounded corners, and our own list_placeholder class makes sure it s the right height. 52:58 Next Lesson: A Real Prototype! What to look forward to :)

27 Lesson 5 00:01 Building a Real Prototype 00:12 What we ll be building What the prototype will do: Multiple lists You can mark an item as done Hideable done items area You can add a note to an item You can rearrange items using drag and drop Tooltips for action icons Edit the name of a list in place Edit individual to-do items in place 02:11 Frameworks: Foundation The two best-known front-end frameworks: Bootstrap and Foundation. We ll be using Foundation. Including the Foundation CSS and JavaScript files (hosted on the Livetyping site). (Note that you can do this too, but JS Bin now include the option to include these files directly, which is easier.) 03:06 Basic page layout Specifying the layout by adding Foundation classes to the elements on the page. The Foundation grid, and its default width. Nesting grids. Row and column classes. (Note that more recent versions of Foundation use different class names. It works in a similar way, but the names have changed. If you using one of these newer versions, check the current Foundation documentation for the right class names.) Adding a two-column <div> containing the logo, and a ten-column <div> containing the heading.

28 Responsiveness! 04:50 Polypage Including Polypage, for states and notes. (It is also hosted on Livetyping you can include them from there. Or download them from GitHub.) Adding a line in our JavaScript to activate Polypage. Adding a Polypage note (by adding an element with a class of pp_notes ). Improving Polypage notes with our own CSS (which you can get here). Adding a page-level note. 06:52 More page layout and styling Styling the <header> and its <h1>. Adding a <section> and a <footer>. Dividing the page up into two columns for the list names (left) and the current list (right). Adding a Polypage note at a specific location. Styling the footer and the two divs in the middle section. 10:10 Stretching things to fit using JavaScript Defining a function to set the height of the middle section. (This is the same as the one from the end of Lesson 2.) Troubleshooting with Firebug <body> is only as tall as its contents. So we need to set its height to 100%. Being pragmatic: it doesn t matter why the height is not quite coming out right. We just need to know how to fix it. Modifying the JavaScript to stretch the two <div> s as well. 13:53 Showing and hiding stuff for different screen sizes (mobility classes) Adding a <div> for the mobile-only selector and hiding it on desktop. (By adding

29 the show- for- medium- down class. Newer versions of Foundation have slightly different class names for this.) Adding the hide- for- medium- down class to the left pane so that it is not shown on small screens. 15:05 Adding vertical tabs to the left pane Trying it the Foundation way (and failing miserably, ah well). Making it work on our own using JavaScript. But not yet. We ll come back to this later. Now, making sure the right pane gets resized correctly. Adding an id and a CSS rule to give it a background color and a right border. It s not getting resized. So we add it to the JavaScript, and it works. 18:02 Making things line up on medium-sized screens By default, when there are multiple columns, Foundation floats the last one over to the right. Adding the end class to both the listpicker and the right pane overrides this and so it does the trick. 18:51 Fixing up the left pane structure Getting rid of the <ul> and replacing the <li> s with <div> s. Adding classes so we can target them in CSS and JS. 19:40 Adding a to-do list HTML Reusing the <ul> in the right pane as a list of to-do-items. Adding a checkbox and a <label> to each one. 20:19 Styling the list and the left pane Adding a CSS rule for the list names (left pane). width, background- color, padding, border- bottom, border- right, and cursor. Another rule for the selected list name.

30 Using Firebug to figure out why they re not full-width. Foundation is adding padding, so we ll override it ( padding: none; ). Except that doesn t work. padding: 0; is the correct way to do this. Adding an ID to the <ul> containing the to-do items so we can style it. Adding a rule to style its list items ( <li> s). list- style- type: none; to lose the bullet. Adding a border, background- color, and margin. Also cursor: pointer; again, and a width of 100%. Adding a rule for the labels so each one is on the same line as its checkbox. And a left margin to space them away from the checkboxes. Changing the background color from pink to the same color as the selected item in the list selector ( # ). Getting rid of the right border that separates the list name from the list. (Using Firebug again to figure out why it s happening.) Adding padding to push the list items down a bit. Adding rounded corners to the list items using jquery s ui- corner- all class. 26:12 Adding a draggable icon (including show on hover and CSS transitions) Adding a <span> with the right jquery classes ( ui- icon and ui- icon- arrowthick- 2- n- s ) to each <li> to give it a draggable-looking icon. But it looks crap. So we add a CSS rule to change their display to inline- block. And vertical- align: text- top; to line them up better. Then a right margin to space the icon away from the checkbox. And finally we set their opacity to zero to hide them. (In a minute, we ll make them appear on hover.) Rearranging the CSS so it follows the order of elements on the page (for sanity). Adding JavaScript to make the icons appear on hover. This time, using the on() function. We need two handlers: one for mouseenter and one for mouseleave. The functions just use find() to find the icon (using its class name) and then addclass() and removeclass() respectively to add or remove a class (which will

31 control its visibility). Adding the class. We call it icon- full- opaque, and it just gives the element an opacity of 1. Using a CSS transition to animate the opacity change. The transition declaration, plus the versions with browser-specific prefixes. (This may no longer be necessary, as browsers standardize on the non-prefixed version.) We now have two rules for the same selector, so we combine them for neatness. Adding the class names to the on() functions on the JavaScript. It doesn t work. Firebug again. The JavaScript is OK we can see that the classes are getting added and removed. So the problem must be in the CSS. Ah, a missing colon. Oops. Adding the colon fixes it. 31:39 Making the list of to-do items sortable This just takes two lines of JavaScript. The first one (calling sortable() on the <ul> ) makes the list sortable, and the second one (calling disableselection() on it) is there becuase the documentation says you need it. (As we saw earlier, disableselection() has been deprecated since I recorded the screencasts and its behavior has been built into sortable(), so you don t have to use it any more.) 32:18 Making it look good on smartphones Adding a <meta> tag to tell mobile browsers how to display the page: <meta name="viewport" content="width=device- width" /> Now that it s being zoomed correctly, the header is too big. Hiding the header on mobile using Foundation s visibility classes. (Add the hide- for- medium- down class to the <header>.) And let s do the same for the <footer>. 33:40 Making it look good on tablets

32 We re not doing a very good job of using the available screen space here Changing the visibility classes to make it look the same on tablets as on the desktop. Replacing show- for- medium- down and hide- for- medium- down with show- for- small and hide- for- small. That looks much better. 34:07 Notes for to-do items Adding a class to an item to indicate it has a note. Restructuring the elements that make up a to-do item and chunking them using <div> s with appropriate classes. Nesting another <div> inside the note one for styling purposes. And some temporary content. Styling the note. Giving it a different background color, a top margin, and some padding. Another rule for the <p> s to reduce the whitespace and drop the font size down. Limiting the height with max- height and overflow: hidden;. Adding an indication that there is more content. Like Amazon does with product descriptions. We ll add a <div> over the top of the note with a gradient fill that goes from transparent to white. Using the CSS :before pseudo-element. Trying to add a chunk of HTML doesn t work. (I m using red so we can see it easily. Once we can see it and it s positioned correctly, then we ll change it.) Tangent: adding a bit of padding to the main to-do item content (i.e., not the note part). Fixing the :before thing. You can only use content to add a string. But this can be a space, which you can then (effectively) turn into a <div> by changing its display to block. Now we can add whatever styling we want to it. So we ll move the background- color and z- index declarations from the rule that we don t need any more into this rule. But still, nothing.

33 Using the same absolute positioning trick we saw earlier to stretch it to the size of its parent element. NOW we can see it! But it s a bit bigger than we want. Adding position: relative; to the parent (the other half of the positioning trick). That works. Adding rounded corners to the note by adding the ui- corner- bottom class. (This makes just the bottom corners rounded.) Changing the background color. Replacing background- color with background, so we can specify a gradient. Use something like the ColorZilla gradient editor to generate the background declaration and just paste it in. Looks good. Making the other list items the same as Cheese (except for the note). Using JavaScript to make the note expand when we click it. Using on() to add a click handler to the note. Using toggleclass() to add/remove a class (which we ll define in a minute). This is a bit like toggle(), which we used earlier to show or hide something, except it adds a class to the element if it doesn t have it, and removes it if it does. Adding a rule for the fullheight class. This just sets max- height to none, which means the <div> reverts to its default behavior, which means its height is determined by its contents. This doesn t remove the gradient overlay, so we need to add another rule for the same class, but now with the addition of the :before pseudo-element. This rule just means that when the <div> has the fullheight class, it doesn t have any content added before it. 42:58 Action icons for to-do items But how to add a note in the first place? We need a button or something. Also ones for adding a link and deleting or archiving an item. We ll add jquery icons for all three by adding <span> s with the appropriate classes: ui- icon for all three, and ui- iocn- document for adding a note, ui- icon- link for adding a link, and ui- icon- trash for delete/archive.

34 Why can t we see the icons? Because of our existing rule, which we added to hide the double-arrow icon. (But it hides ALL the icons.) So we need to split it up into two rules, one for all icons, containing all these declarations except opacity, and one just for the double-arrow, with just the opacity declaration. We can see the icons, but the positioning is wrong. Using a nested (Foundation) grid inside the to-do item to get the layout we want. Wrapping existing content in two <div> s. They don t add up to 12, but that s OK. The right class pushes the column all the way to the right. Adjusting column widths. Figuring out that maybe the standard Foundation grid isn t the best way to do this. Adding classes for the four-column mobile grid. (Note that more recent versions of Foundation give you much more control, and can definitely be used to easily do what we re trying to do here.) Adjusting the icon spacing to try to fix the layout on iphone. Floating the icons right (which reverses their order, and also applies to the double-arrow icons). Adding float: none; to the double-arrow fixes that part. And rearranging the icons in the HTML fixes the order. On the iphone, it s not perfect, but we ll come back to it later. The label text is a bit bolder than the rest. So we explicitly set its font- weight to normal. 47:50 Making the left pane sortable too. Changing the sortable ID to a class, which we can apply to both the to-do list and the list selector. (Note: We could have just added an ID to the list-selector and then target both elements in the JavaScript, but I think this is a neater way of doing things.) Changing the selectors in the CSS and in the JavaScript. And it just works. Adding an icon to indicate draggable-ness (this time with a gripper icon). It s getting floated right, so we add its class name to the rule for the double-arrow icon to stop

35 this happening. And also in the JavaScript so it will appear on hover. Which doesn t work Changing the JavaScript to target bith <div> s and <li> s. Now it works. The gripper icons are too close to the text. And actually, they look better than the double-arrow icons. Replacing the double-arrow icons with grippers. Adding a margin- right to the gripper icons in the left pane to space them away from the text. Making the three action icons semi-transparent, except when we want them not to be. That is, the note icon should be fully opaque if the item has a note. And the same for the link icon. And icons should become fully opaque on hover too. Adding the none class to icons (to signify no note or whatever). The trash icon always gets this class. Adding a matching CSS rule to set the opacity to 0.3. Copying the existing code (for adding and removing classes on hover) and changing it a bit. Here, the selector is icons with a class of none ( span.ui- icon.none ). We delete the find(), because here this is the icon. The rest is OK. This isn t working. Firebug to the rescue again. The right class is being added. Adding!important to the opacity declaration in the rule for the icon- full- opaque class. 54:30 Make stuff happen when you click the note icon 1 items with notes When an item has a note, clicking the icon should open or close the note. Adding a handler for the click event to the note icon. Saving work by calling existing code. We just trigger the click event on the note (using multiple calls to parent() and a find(), then click() ). 55:50 Make stuff happen when you click the note icon 2 items without notes Adding the icons to a to-do item that doesn t have a note, through the magic of copy/paste.

36 When an item doesn t have a note, clicking the icon should add one. (We re not adding the ability to actually enter anything to the note at this stage though.) Adding a new handler. It has the same selector, except for the addition of the none class selector. Again, this detects click events. Removing the none class (using removeclass() ). Adding the click handler to the icon to change its behavior. Adding the note. Defining the contents of the note (an HTML chunk) in a variable (called emptynote ). Back in the handler, we go up from the icon to the <li>, then call append() to add what s stored in the variable as the last child element of the <li>. Then (using chaining), we find() the note and add the click handler to it as well. This doesn t work yet. Commenting out lines of code and re-enabling them one-by-one until the problem reappears. The adding the note part is OK. So is the line that adds the click handler to the icon. So the problem must be in the line that calls removeclass(). And it s another stupid typo. I typed S instead of $. But now: another problem. Clicking the note icon again adds another note. Why? Adding a new click handler apparently doesn t replace the existing one. First, adding the icons to all the other to-dos (more copying and pasting). Removing the existing click handler before adding the new one by calling unbind() (which removes all existing event handlers there s only one in this case). Works great. But there s a better way! Using one() instead of on(). And the icon should already have this click handler, because we added it to all such icons. So we don t actually need to remove or add any handlers. Adding an extra paragraph to the empty note to make expand/collapse more

37 obvious. 01:03:38 Fixing left pane behavior so that clicking switches lists Adding a click handler to the list names in the left pane. The lazy way: using a switch. Using attr() to get the ID of the clicked name. Then a case for each possibility. Adding IDs to the left pane items and to the <ul> s we want to show and hide. (There s only one <ul> at the moment we ll add the others in a bit.) We ll add the case s and then add the IDs later. Each case hides all the lists and then shows the right one. Adding the IDs, updating the IDs in the JavaScript. It s not quite working right though Adding the missing break statements. Making the selected list name look selected. First, remove the active class from all the list names. Then add the active class to the one that was clicked ( this ). 01:07:21 Adding proto-to-dos to empty lists Adding lists for Errands and Computer with a single item (a proto-to-do ). Making them sortable by adding the sortable class, and hiding them initially ( style="display: none" ). Adding a new class for the <li> so we can style it differently. 01:08:36 End of Lesson 5 What s coming in Lesson 6.

38 Lesson 6 00:13 Styling the proto to-do Making the proto-to-do look different. Adding a CSS rule to make it semi-opaque and with italic text. Adding a proto-to-do to the Home list. 01:09 Adding a list selector for mobile Replacing the placeholder <p> with a <select>, with <option> s to match the list names in the left pane. It doesn t look wonderful, but we can make it look a bit better. For now, we add a rule to remove the border. Testing on a phone. The default behavior is to zoom in on the control when you tap it. Increasing the font size (by adding a font- size declaration to the CSS rule we just added) fixes it. 03:02 Hiding browser chrome on mobile Browser chrome takes up lots of space. Googling the problem and finding a piece of JavaScript we can borrow to solve it. Putting the code in the right places (i.e., the function definition goes outside $(document).ready(), and the bits that call it go inside). Adding some more content so we can test it properly, by copying and pasting. Testing again on the phone. It works. 04:55 Handling more content: scrolling Adding more content and testing to see how the prototype handles it. Problem: the content flows out over the footer. Adding an overflow: auto; to the relevant <div> fixes it. Doing the same thing in the left pane. We see the same problem, and the solution is exactly the same too.

HTML and CSS a further introduction

HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few