New terms from treehouse – jQuery Basics Part 2 – Mobile Drop Down, Password Confirmation and Drawing App Projects

Creating a Mobile Drop Down Menu

We have a site with a top nav that doesn’t look good on mobile. Highlighted to show some of the links go missing.

Here is our current problem/solution and psuedocode gameplan:

We’ll start by created a detached (aka disembodied) element for the select element. Then we’ll append it to the menu div, and check to see if it worked (it did).

Now we need to cycle over the menu links, so we’ll select those with “#menu a”. This is better than div a because it’s more specific. To cycle over them, we should look under the traverse section, and choose the each() method, which let’s us iterate over a matched object, executing a function for each matched element.

We’ll start with a disembodied element $anchor which simply refers to the link, the create an option element using one as well, calling it $option. We’ll then set the option’s text to that of the link’s using the text() method twice, once to set and once to get: $option.text($anchor.text());. Then, we’ll add these new options to the select element using  $select.append($option);. Finally, we’ll set the value attribute of the option element using the val() method listed under attributes. So we’ll write $option.val($anchor.attr(“href”);, which is saying, set the value attribute of option to the value of the href attribute on the anchor element.

Now, we’ll create a button and append it to the #menu div using the same disembodied element way as before.

Next we’ll bind a click handler to that button using $button.click(function(){});. Now we need to make it go to the select’s location when clicked. We want to use the value of the value attribute for the $select objects, so we can use the val() method again, this time as a getter because we’re not passing in any parameters. We’ll then use window.location, which is how Javascript let’s you change the windows location, and set it to that.

Now, when you choose the option from the drop down and click the Go button on the right, it takes you to the selected page.

---

Password confirmation project

Here we have some pop ups for when you put in your password wrong that we only want to show during certain conditions. Here’s that and the pseudocode gameplan:

We start by hiding the spans.

Now we need to select the password input when someone is writing in it. We’ll select it using the id on the input element, “password”. Then we’ll use the focus() method, under Events > Form Events, which occurs when you click on an input field, giving it focus. It accepts a handler, which is an anonymous or named function.

We’ll then use the val() method again, which works for select, textarea and input form elements. It returns a string, and strings in JS have a property called .length, which returns the length of the string, so we’ll put that at the end of it. We’ll then set that > 8 and we now have our parameter for our if/else block.

We now need to traverse the DOM a bit, because we’re trying to show/hide the span that comes after the input.

The next() method under traversing the DOM let’s us do that. We add this in to show and hide it.

But this doesn’t work. Even if we write 9 characters, it doesn’t disappear until we give it focus again. What we really need is a method that binds the event (what triggers the function) handler (its function) to when you’re done with your keypress: keyup(). We’ll add this to the end of our current thing, but rather than do the same code twice for hiding and showing, we’ll just make that into our own named method for later use, calling is passwordEvent. Now it works!

Now to do the confirmation password, which has an id of confirm_password. Since the solution here will probably be similar, we’ll start by getting another function ready, confirmPasswordEvent. We need the event to happen on confirmation input, so we’ll set that up the same way too.

Now we need to find out if the confirm password is equal to the first password.

But this is starting to get a bit messy, so we’ll make some variables for them, which allow us to use them instead and also replace all the $(this)’s from the last function.

We now need to show and hide the hint, so we can do just what we did before with next() and hide/show().

But what if our passwords match, then we go back and change the first password? The confirm hint should show up again because they don’t match, but it won’t unless we focus on it or keyup. We can do this by calling the confirm password events on the first password object as well.

A good thing to note – we can use focus() twice with different event handlers and they don’t mess with each other. So when we focus on it, it’s doing both focus() methods, not just the first one. It’s good we made them variables as well, because using $(this) would have messed this up.

Time to perfect this by making the submit button invalid if the password isn’t long enough or if they don’t match. So, we want to add the disabled boolean attribute to the submit input element.

We’ll start by making two functions, one to check if the first is 8 characters and the second to check if they’re matching. For the first one, we can actually replace the first part of the passwordEvent one in the if block, since it will be returning that and is the same thing.

What’s nice is that if there are other conditions need later for the password (like 1 cap 1 number, etc), we can just add them to the isPasswordValid() function now.

We’ll do the same thing for whether they’re matching.

Now we’ll make a function for whether it can submit or not. Remember, return with something after will return true or false.

Now we need a function to enable or disable the submit event. An exclamation point means “not”, so !true = false and !false = true. In the function, we’re selecting the submit button, the we’re changing the “disabled” property based on whether the canSubmit() returns true or false. However, right now if it’s true, which means the button should be good to submit, it would return true and add the disabled property. We want the opposite, so we put in !canSubmit(), which flips those values.

Now we can add that to our previous code, with keyup() at the end of each.

However, if we just click submit as soon as the page loads, all this doesn’t work because it’s dependent on a keyup event in the password or confirm inputs. So, we need to execute it when the page loads. So, we simply put this at the bottom.

---

Simple drawing application project

We should always aim for our projects to work without JS, this is called graceful degradation. 5 of the 6 projects we’ve done here do that, except for this one, but we don’t really have a choice as there’s no other way for us to get it working. Here’s the problem/solution and pseudocode game plan:

First is to get the color selector working. We’ll use the click() method. We should also create a variable for the .selected color, as we’ll likely be using that a bit for other stuff. We select it using the .selected selector, then we need its color property so we’ll use the .css() method.

We’ll probably want to cache the current color, so we can copy that code and put it in the function, using (this) instead for the selected color. Now, to deselect the sibling elements, we’ll first use this, for the thing we clicked, followed by the .sibling() method, which selects its sibling elements, then finally we can use the .removeClass() method to remove the specified .selected class from them.

Then, to add a class we simply use this and the addClass() method, and we’re good to go.

Now to make the new color button work. We want to hide or show the color selector when you click the button, based on whether it’s hiding or showing at that time. The show and hide methods aren’t the best option for this, you should use the toggle() method. With no parameters, it simply toggles the visibility of elements. So, we’ll set up a click method on the button, and the toggle method on the colorSelect div.

Now to update the color span when the sliders change. We’ll start by creating our own method called changeColor, which will change the background-color css property of our selected #newColor span. Then we need to select the range inputs, the sliders, which we can do with attribute selectors. We then use the on() method that says, on an input (which is when you move the slider in this case), it triggers the handler, which in this case is our changeColor function.

Now, in our changeColor() method, we created a variable for each of the color sliders, that takes their value, which is where the slider is at. We then did some math with the css() method that added the three variables together to give us an rbg value, which is what is set as the background color for the #newColor span. It starts as black when we click the new color button because all the sliders are at 0, making it black.

Now we need it to actually add the new color when you click the Add color button. We’ll start with the click method on the selected button, then create a disembodied list item element. We then want to alter that new color’s background color using the css() method. For the value we’ll use the $(“#newColor”).css(“background-color”) created from the previous method above. We’ll then append() it to the ul list in the div with the.controls class. We’ll then try and make it select it with a click() method.

Issue – the color gets added (yay!) but doesn’t get selected. The issue is because the click listener we created earlier that switched the selected color on picking one, when the page loads, it binds the click handler to the existing ones, and ignores any new list items. We need a method that will bind when the page loads but also for any future things elements added. The on() method let’s us do that. First we set what happens, the click, then the child element we want it to happen to, the “li”, then we set the function that runs when that happens.

Ok, finally we get to make the pencil draw stuff. This works via the HTML5 canvas element. First we select the canvas element using jQuery, then we’re actually going to select the canvas itself instead of the jQuery representation of the canvas, and we do this by writing [0] after it. This is actually the same as writing document.getElementByTagName(“canvas”)[0], only easier to write/read. The reason we do this is because the actual element has a special method we can call on that element, which is to get its context – .getContext().

Context in 2d and 3d graphics is just a way for the computer to know where to draw. We’ll set the value to “2d”. We’ll then save this as a variable. Online you may see it named ctx, which is short for context. Finally we’ll move it to the top so we can cache it as a variable when the page loads.

Now for the drawing code. We’ll start with the context variable, then the beginPath() method, which is saying in the context we want to start a path. We then use moveTo() to say the distance we want it to move on the x and y coordinates, in px. This will be our starting point. Then we use lineTo() to say where the line will go. If we write 20, 10, it will move on the x axis ten px. This is the ending point. Finally, we use .stroke(), and get this:

To draw a square, we just add more lineTo’s. For the last line, we can use a method called closePath(), which will close things up for you.

Now to make the pencil do this. When you draw, you don’t just click, you click and hold the mouse down, the let go, so we’ll use the mousedown(), mousemove()  and mouseup() methods, in that order. First we’ll select the canvas and cache it as a variable, putting it at the top of the page.

We’ll apply the mousedown() method to the $canvas object. Just like keyboard click events, there is an event object that can be passed into the handler. When we click down with a mousedown event, it gives us the coordinates. To save this, we’ll first create another global variable, lastEvent. Then in the mousedown() method we’ll pass in e and set lastEvent equal to that. When we check it in the console, we can see a bunch of properties for it now, based on where we clicked. This includes the offset x and y, which we’ll use in our drawing code.

Now we need to write what happens when the mouse is moved while being held down. When can chain the mousemove() method onto the one we just wrote, and will pass in e again. We can use the same code we used before with some tweaks. We’ll leave in beginPath, and for moveTo, which remember is the offset, well pass in the lastEvent variable with its properties for the x and y offsets. Now for the lineTo, which draws the line, we do e.offsetX and Y. We can then remove the other lineTo’s and the closePath as they’re not needed.

With the current code, we get this:

So we’re still drawing even when the mouse is up. What we need to do is update the last event so it stops drawing on mouseUp(). First we’ll set lastEvent to e again, which makes it at least follow the cursor. We want to store if a mouseDown has occurred, so we’ll create a variable for that, and set it to false. Then in our code below, we’ll set it to true. We’ll then use this to make an if block for the drawing code, which will only be true (and therefore running) when the mouse is down.

 

Now we get to add on the mouseup() method. We’ll add it in and make it so that it causes the mouseDown variable to be set to false, stopping the drawing.

Now to make it actually use the selected color. We do this with the strokeStyle property for context, and setting it to our color variable from before.

One last issue – when you draw outside the canvas and come back in, a line appears.

The mouseleave() method binds an event handler to when the mouse leaves a an element. We’ll the make the function simply trigger the mouseup() method from above, and we’re good.

Finally done, woooooo!

New terms from treehouse – HTML

Ok, onto the next course.

Starting with some history

HTML – Structural, CSS – Presentational, Javascript – Behavorial

A Markup Language is not the same as a programming language. Programming languages say how something should behave, while Markup languages add annotations and structure to a text document.

Sounds simple, but HTML is really there to tell the browser which part of the text is which – which is the headings, the images, the tables, the paragraphs etc – to give the text structure.

HTML was originally created for scientific papers, and was not intended to be as interactive as they are today.

The Internet – the physical infrastructure that’s spread around the globe for exchanging data

The World Wide Web (www obviously) is an example of a protocol that uses this. Other examples include VoIP, gaming and apps.

Hypertext is the concept of documents being able to be linked together

Global structure:

Set the doctype to html5 with this <!DOCTYPE html>

Save your first page as index.html. It’s very common, and when you put something with that name in a folder on a web server, the server will commonly direct to it by default.

For <html> tags, it wraps the whole document, and has an attribute lang, which should be set to “en” for english. <html lang=”en”></html>

<head> tag is header of the document, and used to include meta information, like links to stylesheets and javascript. Good example is <meta charset=”utf-8″>. May not be necessary all of the time, but is good to include.

<title> tag is for the title of the page. You can see it in the tab. Located nested inside the <head> tag.

<body> tag is for the content of the page, where all text, images, etc goes

<div> tag (for division) is for making divisions and sections of your page. Helps with the styling, and grouping things. It’s a block level element, so it takes up space and will break to the next line, pushing other elements out of the way.

Make sure to indent nested elements, it will make the whole thing a lot easier to read and see the structure.

<span> – very similar to a <div> tag, the difference being that it’s used to divide up text, rather than large sections of a website. This is an inline element, so it doesn’t take up space.

Text elements

There are six levels of header elements, <h1> through <h6>. I like the newspaper analogy they give here. h1 might be the name of the newspaper, h2 might be a section (like SPORTS!), h3 might be the name of an article, and so on. You can have as many of these as you want.

<em> is the emphasis tag. It’s an inline element, usually wrapped around some <p> text. By browser default it italicizes text, but that’s not its real purpose. It should be used when you want to emphasize a point in your text, but it’s subjective on when you want to use it.

<strong> is also an inline element. It will bold the text by browser default, but it should really be used when a thought or word in your text needs to be intensified, or made strong. em is for emphasis, strong is for stronger emphasis

<hr> is the horizontal rule tag, and is an empty aka void element, so it only has one tag. It makes a horizontal line on the page, which is called a horizontal rule. You can make real borders with CSS, so you want to use this when you want to break up text, both visually and semantically.

<blockquote> is used for quoting a section from another source. The cite attribute of the <blockquote> element is is used for citations, like for saying who the quote is from. Its value must be entered as a url:

<blockquote cite=”http://example.com/story.html”&gt;
<p>
This is a quote I made.
</p>
</blockquote>

<q> element is for quotes. It’s related to the blockquote element, and is used for inline content that doesn’t require paragraph breaks, like the block level blockquote element does. You can use the cite attribute here as well

<p>One time I said <q cite=”http://example.com/page.html”>It’ll be okay, I mean it won’t.</q></p>

<code> is a semantic element that represents a piece of computer code and is an inline element. Puts the selected text in a special, monospace font.

<p> The <code>drive()</code> function on the <code>vehicle</code> object</p>

<pre> element represents a block of preformatted text. It will retain the formatting it had when written in the code. This is the point of it. If you did the below example with a <p> element it would all appear on one line. By default it is slightly indented from the left side of the browser. <pre> and <code> can be used together to maintain code formatting.

<br> element represents a line break, and is a self closing, or empty, or void tag. Shouldn’t be used for making spaces and sections for your page, should be used for actual line breaks in text, like different lines of a poem.

<abbr> element is for abbreviations, like for an acronym. Is for semantics, and is an inline element. The title attribute is for the expansion of the acronym. This is just like the title tag for images where in that if you hover over its element, in this case the <abbr>, you can see what it says.

<p>I know how to use <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr> gear</p>

<address> element is for contact information. Typically use this with line breaks. If the address element is a direct child element of the body tag, then it’s the contact information for the whole document. If it’s inside another element, like one meant to represent a person or place, it would be for each individual one (like if you had a list of people and their addresses).

<cite> element represents the title of a work, like a book, movie, etc, and is an inline element.

<p>My favorite book is <cite>Fight Club</cite> by Chuck Palahniuk.</p>

<wbr> element represents a line break opportunity. It won’t always insert a line break like the <br> element does. If there’s not enough space on the page to fit the whole word in, then it will break the text on to the next page at the place that you specified.

<p>mybigwebsite<wbr>withalotofwords.com</p>

Lists

<ol> is an ordered list. <li> is for the list items in the list. Will number the list items in the order you wrote them, and do some indentation.

<ul> is for an unordered list, basically the same thing only it doesn’t put numbers with the list items, but bullet points instead (by default). However, unordered lists can be nested, and it will change the bullet point of the nested lists and indent them further. You need to make sure you put the nested list in the <li> element of the part you’re nesting into.

<dl> is the definition list element is used for groups of terms that need descriptions or definitions. This has two types of tags inside it, instead of just one. <dt> is the definition title element, for the main part of your list. <dd> element is for the definition description.

The <dt> tag is nested inside the <dl> one, while the <dd> one is just listed underneath the <dt> ones, and not actually nested in it. You only should indent if an element is nested inside another one.

You can also list two <dt> elements in a row, and then provide a definition for both of them underneath with a <dd> element.

Anchors

<a> is the anchor element, for linking pages together. The href (hyperlink reference) attribute let’s you choose what it links to, not just other pages but different parts of the same page. You do this by setting an id on the thing you want to link to, the setting the href=”#idname”. This will take you to the top of the referenced element. The “anchor” is what’s between the a tags, and the direction is the value entered for the href attribute.

It’s good practice to always provide a link to previous pages, so the user doesn’t have to use the backspace button.

To link to a different page in the same site, you’ll want to make sure that html file is in the same folder as the on you’re putting the anchor in, so you only have to write the file name: <a href=”contact.html>Contact Us</a>. Remember, this is called relative link, which uses a relative file path. This is different than using an absolute link, which would include the complete file path or link: http://www.example.com/contact.html. Relative links are better to use, as they make it easier if you need to change things (like if your domain changes).

When navigating file folders, typing “..” let’s you go up a folder from where the file is now.

broken link – when the browser can’t find the value for the href attribute for a link

URL – Uniform Resource Locator

URI – Uniform Resource Identifier. The difference between the two is that a URL is actually a specific type of a URI.

Images

img – image element, src attribute is for the location of the image, alt is for a text description of the image in case it doesn’t load or someone’s using a site reader due to vis, and also for search engines. title let’s you add a message that appears when they hover.

object element was introduced in HTML 4 by W3C with the intent of unifying embedding multimedia on the web. However, this didn’t work too well due to a mixture of plug ins and browser inconsistencies. The standard was open for interpretation. It’s okay though, because this typically entails copy and pasting embed code from another website, like youtube. width and height attributes let you set the width and height of the video in pixels.

param tags set various properties into the object element, with the name attribute, which tells you what the value is for, like “allowfullscreen” and the value attribute, which sets the value for that name attribute (like “true”).

The object and param tags are mostly for internet explorer compatibility.

embed tag kind of duplicates the object and param functionality for other browsers. embed is not actually a W3C standard, but it has better cross browser support, with the exception of IE. It’s a bit of a hack. It has a bunch of attributes that mimic the params: width, height, allowscriptaccess, allowfullscreen, src (for the link to the media). You need to have both to support everything though, but embed is better since it’s not owned by a specific company, like object is with Flash.

Example of what this looks like further down the page.

link tag goes inside head element. NOT the same as an anchor tag, won’t create a visible link for the user. Instead, it links to other resources so the page can use them. Attributes: rel is for the type of the link, type specifies the MIME type of the linked document/resource, and href lets you put the source of the link.

<link rel=”stylesheet” type=”text/css” href=”my_style.css”>

script tag is for adding javascript to the page. Similar to link in that it has a text and src attribute. Unlike link, this isn’t an empty tag so you need to add a closing one. The reason for this is that you can include scripting in this element rather than linking to one, but like internal CSS, this is frowned upon.

<script type=”text/javascript” src=”javascript/app.js”></script>

iframe element allows you to smash to web pages together, letting you load one page, into another page inside of a box. Goes in the body section. Attributes: height, width, src. Not an empty element, need to have a closing tag or stuff after it won’t load.

This is how you add html comments: <!- – Comment goes here. – ->

If you right click and choose “View page source” it will open a new tab with the HTML. Notice the URL, all it did was add “view-source:” to the front of it. For example: view-source:http://teamtreehouse.com/library/html/objects/includes-and-iframes.

Shortcut – View page source: Cmd + option +U

Tables

table element, ideally should only be used for tabular information and NOT page layout, which is what CSS is for. You put tr (table row) elements inside of the table element to make rows. Then, inside there, are two types of elements we can use. td for table data, or th for table headers. th has the default styling of being centered and bolded. To add new columns, just add more th and td elements to your table rows. border attribute can be used for the table element, but I believe it’s better to do it with css instead.

Now, how would you add a new row to just the second column and not the first? Just insert an empty td element ahead of it:

 

thead element is the table head element. You nest the tr with the th elements inside of it inside the thead one. Usually this is just for semantics, but when you have a large complex table, it makes it easier to search for search engines, easier for screen readers, and finally, will make it easier to select the table header for css styling.

tfoot is the table footer element. It goes beneath the thead element in the html, but will appear at the bottom of the table on the page. By default it will only appear in the first column, but you can use the colspan (column span) attribute to set how many columns the cell spans across.

align attribute can be used to set whether things are centered, to the left or to the right in their cell. valign attribute is for vertical alignment, and can be set to top, bottom, or middle. cellpadding attribute sets the padding for cells. cellspacing attribute can increase the space between table cells.

Forms

form element allows you to get input from the user. action attribute is required, it’s what will load once the form is submitted by the user. You can put a # in if you don’t have one for now. method attribute can be POST or GET (think API’s). name attribute just needs to be descriptive, describing what the form actually does. Will show up in server side programming, so you know which form got sent.

To actually have this submit to a site, you need to know about server side programming, like php, ruby, python, etc.

input element is what you actually use for a majority of the form elements. It’s very versitale, and the type attribute can be used to modify what it does.You then use the name attribute to say what this field would be for. Different type values include:

text – for text, duh. You can use the value attribute to put something in the text box for them.

password – will hide what the person is typing with little dot symbols.

radio – lets you click to choose one option from a group. Has the value attribute as well, that you can set to what that selection means. Should add text after to show what it means. By leaving the name attribute with the same value, the browser will know to group them together.

checkbox – similar to radio buttons but allows you to select multiple items at once. same value and name attributes.

submit – for submitting the form data. The value you set will be what it says on the button. When you click this button, it will take you to the page specified in the action attribute of the form element, and if your form had a password type input, your browser will ask you if you want to save that password.

Form styling depends on your OS and sometimes your browser. It’s fairly difficult to style form fields with CSS.

textarea element gives people more area to write things. The name attribute works just like for the input element where you’re saying what this field is for, the row attribute lets you set how many rows you give them and the cols attribute is for columns (cols and rows are really just an alternate way of thinking about width and height).

select element contains option elements. Good for when you have a few too many things for radio buttons, makes a dropdown box for you. optgroup element allows you to group options together, contains label attribute for describing what the group is for. This makes it so when you click on the dropdown the option elements nested inside it will appear in a group slightly indented, with the label attribute’s value in grey above.

<fieldset> element lets you break your form inputs into groups (which look like boxes). The <legend> element is nested inside that, and will be what the name is for that box. You can use the align attribute to center it.

<label> element is used to label each of the inputs. It has the for attribute, which lets you know which input it is labeling. In your input elements, you need to add the id attribute for this (which is different than the name one). Besides linking them, it will also make it so if you click on the label, it will put your cursor in the form field automatically. For check boxes and radio buttons, you’ll want to wrap the label around the word you put in after the input element.

Your name attribute doesn’t need to be the same as your for and id attributes (which do), but it’s a good idea to do so for sake of clarity.

 

All done! On to the next one, on to the next one.