AM2 Concepts and Topics

The display property

One important CSS property of all elements is display, which controls how elements are rendered on the page.

While this property takes many different values, for our purposes we need to understand four values (which are also the most commonly used).

  1. inline - this is the default value for elements such as a, span, q, img, inputetc. It means that elements are rendered in one line and follow other inline elements, without going in a new line (unless all space is filled).
  2. block - this is the default value for elements such as p, div, ul, li and more. Every element will be rendered as a block and they will be stacked vertically on top of one another.
  3. inline-block - this value allows an element to behave as an inline element for the purposes of placement, but by retaining the block properties for what is nested within it.
  4. none - this value makes an element disappear from the page. It is not rendered on the page. It is good for things we want to show only on certain occasions (such as the overlay on the image).

Here is a jsFiddle I created to show the differences between inline, block, inlinbe-block and understand the nonevalue.

jQuery Library

The jsFiddle above and others in these notes are using the jQuery library. Thus, if you want to use the same methods on your code, you need to import the library with the script tag first.

Absolute and Relative Positioning

We saw the CSS property float in AM1. In this AM, we will use a new property, position. This property is more complex to use than float and it should be used only in certain circumstances. For example, to display the Facebook button at a certain position on the page, or to show the overlay on top of the image. In our course website, you can see the position property at work with the fixed navbar at the top of every page, and the side navbar with the notes content.

The position property takes three values: absolute, fixed, relative. I show examples of each in this jsFiddle. Look at the CSS rule for each div. Play with the values or comment out properties to see their effect on the page.

To learn more about differences between float and position, read these notes that I wrote for the CS110 course. Particularly look at the many examples to show each property' value at work.

Other kinds of events

Most elements on a HTML page can respond to user events, as long as we provide Javacript code to handle such events. This process is known as event binding. There are many ways to do this, for example, the DOM method addEventListener. We often though will bind an event handler (a function) to a named attribute, such as onclick, onfocus, onload, onscroll, etc.

For a list of all possible event attributes for which we can provide event handlers, consult this reference by W3Schools.

For AM2, we need the events onmouseover and onmouseout to create the overlay effect on the div for each result.

Here is a jsFiddle I created to show onmouseover and onmouseout for two different p elements of the same class. In order to compare the difference between Javacript and jQuery code, I have also shown the jQuery solution, which uses the method .hover() with two functions to deal with mouseover and mouseout respectively.

Can I use the CSS pseudo-selector :hover?

When looking at the above jsFiddle, it might occur to you to perform the same effect without JS or jQuery, but by simply using the CSS pseudo-selector :hover.

Indeed, for the shown example, that will work great. I have modified the previous jsFiddle to remove the Javascript and do the same only with CSS. Here is the new solution.

You can also use a more complex selector p:hover span and a rule to make that appear when the p is hovered.

The need for JS/jQuery arises where you're also changing the content of elements on the fly, in addition to their appearance. However, experiment! Sometimes, you can go a far way with CSS.

Some useful Javascript methods

Here are some Javascript functions you might find useful.

  1. .search() - The search method works on string objects. It will return the index of the found substring or -1 if it was not found.
  2. .sort() - The sort method works with all objects. However, by default, it sorts alphabetically and that is not what we want for numbers (2 is less than 10, but alphabetically is after 10). To solve this issue, we use a comparing function as a parameter to the sort method. The jsFiddle below shows an example for sorting numbers in ascending and descending order.
  3. .indexOf() - The indexOf method works with array objects. Given an argument it returns the index of it in the array if it finds it, or -1 othewrwise. Copy the following example on the console to test it out. 
    var arr = [10, 20, 3, 45];
alert(arr.indexOf(45)); // will display 3
alert(arr.indexOf(40)); // will display -1

Here is a jsFiddle I created to show the methods search and sort in action. Code uses jQuery library to deal with events and the page update.