knowledge-kitchen

JQuery for Web Designers - Programming Interactions for Non-Programmers (in Javascript)

adding interactive behavior to static web pages

  1. Overview
  2. Interactive Behaviors
  3. Installing JQuery
  4. Handling Events
  5. Modifying Content
  6. Conclusions

Overview

Javascript

Javascript is an interpreted programming language originally invented by Brendan Eich in 1995 at Netscape.

The browser wars

The browser wars

Some additional resources about the browser wars, for those interested.

Neverending war

The browser wars never quite ended…

Javascript today

Today, the browsers are mostly compatible in how they interpret Javascript

Interaction

Event-driven programming

When we speak fo using Javascript to add interactive behaviors to web pages, we are usually referring to Javascript’s ability to respond to events:

Types of events

We can broadly categorize events into three buckets

Installing JQuery

Download

To install JQuery, simply download it from the jquery.com web site.

Install

Once downloaded, add links to two Javascript files to your HTML.

<head>
  <title>JQuery Example</title>
  <meta charset="utf-8" />
  <!-- include any CSS links as you would normally do -->
  <!-- make sure the path below is correct for the version you downloaded and the folder you placed it into-->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>
</head>

Start using

Create the custom Javascript file you linked to and add the following starter code to it.

$(function () {
  //everything else you put into this file goes below here
  //everything else you put into this file goes above here
})

Handling Events

Click events

To handle click events, you will need to put something the user can click on into your HTML code.

<input type="button" id="my_button" value="Click me!" />

And then detect clicks on this element in your custom Javascript code (placed between the two comments noted previously).

$("input#my_button").click(function () {
  //everything you want to have happen when the button is clicked goes below here
  //everything you want to have happen when the button is clicked goes above here
})

Mouseover events

To handle mouseover events, when the user hovers their mouse over an element, you will need to put something the user can hover over into your HTML code.

<p id="my_paragraph">
  Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto
  percolator. As, single shot dripper a doppio americano wings.
</p>

And then detect mouseover events on this element in your custom Javascript code (placed between the two comments noted previously).

$("p#my_paragraph").mouseover(function () {
  //everything you want to have happen when the mouse goes over the paragraph goes below here
  //everything you want to have happen when the mouse goes over the paragraph goes above here
})

Mouseout events

To detect mouseout events - when the user stops hovering over this element - in your custom Javascript code (placed between the two comments noted previously).

$("p#my_paragraph").mouseout(function () {
  //everything you want to have happen when the mouse goes out of the paragraph goes below here
  //everything you want to have happen when the mouse goes out of the paragraph goes above here
})

Time-driven events

To perform some change to the page after a certain period of time has passed, use the setTimeout function.

setTimeout(function () {
  //everything you want to have happen after the specified time has passed goes below here
  //everything you want to have happen after the specified time has passed goes above here
}, 2000) // 2000 represents 2 seconds (in milliseconds) ... adjust this number as needed

Modifying Content

Hiding an element

Let’s say you had an image of a donkey in the HTML.

<img id="my_donkey" src="images/donkey.jpg" />

To hide this element, place this in the appropriate event handler code.

$("img#my_donkey").hide()

You can alternatively make an element gradually fade away.

$("img#my_donkey").fadeOut()

Showing a hidden element

To show an element that has been hidden, place this in the appropriate event handler code.

$("img#my_donkey").show()

You can alternatively make an element gradually fade in.

$("img#my_donkey").fadeIn()

Changing the content nested within an element

To alter the text nested within an element…

$("p#my_paragraph").text("Tri-tip prosciutto drumstick swine")

You can alternatively write HTML that will be nested within the selected element

$("p#my_paragraph").html(
  "<strong>Tri-tip <a href='http://nytimes.com'>prosciutto</a> drumstick swine"
)

Changing the style of an element

Any CSS styles can be adjusted through Javascript code

$("p#my_paragraph").css("color", "green")

Multiple styles can be changed at once:

$("p#my_paragraph").css({
  color: "green",
  "background-color": "blue",
  opacity: 0.5,
})

Modifying an element’s class

It is possible to change an element’s style by dynamically adding or removing a class to it.

For example, assume the following CSS code:

.pretty {
  font-weight: bold;
  background-color: pink;
}

The following would add the pretty class to an element, which would apply the corresponding CSS styles.

$("p#my_paragraph").addClass("pretty")

Removing a class is equally easy.

$("p#my_paragraph").removeClass("pretty")

Changing an attribute value

Any attribute of any HTML element can have its value changed.

For example, to change the source image used by an img element.

$("img#my_donkey").attr("src", "images/mule.jpg")

This, of course, assumes you have an image named mule.jpg in the images directory.

Animating an element

Any element can be animated by transitioning from its current styles to a new style. Animations can include transitions involving the dimension (width and height), position (top and left), or opacity (a number from 0 to 1)

For example, to move an element to near the top left of the browser viewport while resizing it:

// first make sure the element can be positioned before trying to change its position
$("img#donkey").css("position", "absolute")

// now animate it!
$("img#donkey").animate(
  {
    top: "10px",
    left: "20px",
  },
  2000
) // 2000 represents 2 seconds in milliseconds

Conclusions

At this point you have a solid understanding of the history and main uses of Javascript in general and JQuery in particular. Now try it!