SWiK
» tagged pages
» logout

(Feed found, click Add Page to syndicate.) Error finding feed, please try again » Find feed title

A Blog Page allows you to add entries, for news or other time sensitive postings

A Bookmarks page is a really simple list of links - ordered by date.

(Login required to save to your tagged pages.)
(or Cancel)

Preview Formatting

Make further edits, (or Cancel)

(Login required to save to your tagged pages.)
(or Cancel)

(Editing anonymously: to be credited for your changes, login or register a new account)

Change Page Permissions? Changing these permissions will adjust who can modify this page.

Anonymous (change)
(change)
(or Cancel)
→ Upload an image from your computer:
→ or Copy an image from a URL:
→ or Erase the current icon:
Icon Preview:

or Cancel

Erase Intermediate? The contents of Intermediate page and all pages directly attached to Intermediate will be erased.

or Cancel

(Editing anonymously: to be credited for your changes, login or register a new account)

other page actions:
Intermediate

Intermediate

sorted by: recent | see : popular
Content Tagged Intermediate

Algebra II - Math for Morons Like Us

On this and the following pages, we’ll try to clear up some common problems people have with intermediate algebra (Algebra II) and trigonometry (which ought …

http://library.thinkquest.org/20991/alg2/index.html

Intermediate Algebra-TOC

MathNotes currently offers two new resources to help you strengthen your understanding of the mathematics you are studying: InterAct Math software tutorials …

http://www.mathnotes.com/aw_intermediate.html

Teach Yourself Intermediate Algebra Visually in 24 hours

This rapid learning course is one of the pre-college math courses to prepare for the pre-requisite to college level math. The 24 chapters will enable you to master the algebra needed for college level courses, such as college algebra, college calculus etc.

http://www.rapidlearningcenter.com/mathematics/intermediate-algebra/intermediate-algebra.html

User:alberdarko1

High School Algebra

This rich-media series is designed for high school students and home schoolers, who are taking one-year (two-term) high school algebra 1 course and preparing to take the high school algebra 2 thereafter.

http://www.rapidlearningcenter.com/mathematics/high-school-algebra1/high-school-algebra1.html

Introduction to jQuery UI

After many months of stellar work, the jQuery UI team has released version 1.5 of their flagship suite of user-interface widgets, components, and effects. This release was focused on bringing you a standardized development API across all of the components, allowing for a more seamless experience when working with the jQuery UI library.

A very exciting CSS theming application was also released with jQuery UI 1.5, called ThemeRoller. ThemeRoller is an amazing way to customize the style and colors across all of the jQuery UI components. It comes with a few preset styles, as well as allowing you to create your own. Once you are done, it packages your theme into a zip file that contains all of the images and CSS you need.

Brief Overview of the jQuery UI Project

The jQuery UI project was originally created to bring you a set of "official" jQuery plugins. Mature components from the plugins repository were pulled together to form the first release of jQuery UI. But since each of these plugins had its own style, having been written by different authors, the first release of the library felt a bit cumbersome when packaged together. With that in mind, the focus of UI 1.5 was on achieving a coherent, standardized API to eliminate much of the differences between the components. Through much time and effort, many bugs and feature requests were addressed along the way as well.

Inside Look at jQuery UI Version 1.5

Before starting, I want to make sure you know where the jQuery UI Documentation is located. You may also want to head to the download page to grab the library for yourself. Note that the development bundle is the easiest to get started with.

First, let's start by including the necessary files for jQuery UI: jQuery latest js file, the Flora theme complete stylesheet, and the core UI file. Each of the components is built on top of these files. Here is how to include them:

PLAIN TEXT
HTML:
  1. <link rel="stylesheet" href="themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
  2. <script src="http://code.jquery.com/jquery-latest.js"></script>
  3. <script src="ui/ui.core.js"></script>

You may want to download these files and put them on your own server, but this is just fine for our demonstration.

At this point you may include the jquery.ui.all.js script for testing, or include each of the components individually. Here are the components that we are using for this demo:

PLAIN TEXT
HTML:
  1. <script src="ui/ui.draggable.js"></script>
  2. <script src="ui/ui.resizable.js"></script>
  3. <script src="ui/ui.accordion.js"></script>

Activating Components

Each component has a constructor method, which is the component name. For instance, we can make a div draggable by using the draggable() method:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme").draggable();
  3. });

 

The component defaults can be overridden by passing in options to the main function. For instance, if we want to make the div drag only horizontally, we can set the axis option to "x" with the following code:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme-x").draggable({ axis: "x" });
  3. });

 

Likewise, the Accordion can be accessed the same way. Here we set a custom option to specify the accordion to slide on the mouseover event:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $("#accordionDemo").accordion({ event: "mouseover" });
  3.  
  4. });

 

  • Test 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Test 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  • Test 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some of the components, such as draggable and resizable, can even be combined:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme-resize").draggable().resizable();
  3. });

 

This first makes the div draggable, then adds the resize handles to the div.

Now you should have what you need to start with each of the components! Head to the functional demos page to see in-depth examples of each of the components.

Looking at the Future of jQuery UI

With Paul Bakaus hired as (paid) full-time lead of jQuery UI, the project has been energized, charging forward by leaps and bounds. With an ever-growing set of UI components, jQuery UI's future is shaping up to be one of great promise.

jQuery: Learning jQuery

Working with Events, part 2

In my last article, I described the common problem of events seemingly ceasing to work for new elements added to a document, whether by some form of ajax or by DOM modification. We examined one way to overcome the problem: Event Delegation. With event delegation, we bind the event handler to a containing element that remains in the DOM and then check for the target of the event.

Cloning Nodes

This time, we'll take a look at re-binding event handlers. But before we do, I should mention that, as of jQuery version 1.2, event handlers can be cloned along with elements. Consider this unordered list:

PLAIN TEXT
HTML:
  1. <ul id="list3" class="eventlist">
  2.   <li>plain</li>
  3.   <li class="special">special <button>I am special</button></li>
  4.   <li>plain</li>
  5. </ul>

We can make a copy of <li class="special"> and insert it after the original, while at the same time retaining any event handlers that were attached within the original. The plain .clone() method doesn't work that way; instead, it just copies the element:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $('#list3 li.special button').click(function() {
  3.     var $parent = $(this).parent();
  4.     $parent.clone().insertAfter($parent);
  5.   });
  6. });

Try it:

  • plain
  • special I am special
  • plain

As you can see, the original button is able to keep creating new list items, but the buttons inside the "dynamically generated" list items can't create new ones.

To get the event handlers copied over as well, all we have to do is pass in true to the method's single argument:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   $('#list4 li.special button').click(function() {
  3.     var $parent = $(this).parent();
  4.     $parent.clone(true).append(' I\'m a clone!').insertAfter($parent);
  5.   });
  6. });

Note: I've added .append(' I\'m a clone!') here only as visual reinforcement of what is going on.

Try it now:

  • plain
  • special I am special
  • plain

Using .clone(true) is great when we want to make a copy of existing elements and their event handlers, but there are plenty of other situations that don't involve cloning in which we might want event handlers to persist.

Re-binding Basics

The basic concept behind re-binding is fairly straightforward: We create a function that binds the handlers and then call it whenever new elements are introduced. For example, with our unordered list above, we first create a function called addItem that registers the click handler, which in turn will add a new item:

PLAIN TEXT
JavaScript:
  1. function addItem() {
  2.   $('#list5 li.special button').click(function() {
  3.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  4.     $(this).parent().after($newLi);
  5.   }); 
  6. }

Next, we call that function when the DOM initially loads:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   addItem();
  3. });

Finally, we can call the function inside the click handler—and inside itself. That way, it will bind the event handlers to the new list item as well.

We'll add one more click handler to the button, but this one will not be re-bound, so that we can see the difference.

Here is what the code for buttons in #list5 looks like, all together:

PLAIN TEXT
JavaScript:
  1. function addItem() {
  2.   $('#list5 li.special button').click(function() {
  3.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  4.     $(this).parent().after($newLi);
  5.     addItem();
  6.   });
  7. }
  8.  
  9. $(document).ready(function() {
  10.   addItem();
  11.  
  12.   // non-rebinding click handler ...
  13.   $('#list5 li.special button').click(function() {
  14.     $(this).after(' pressed');
  15.   });
  16. });

Try this one out:

  • plain
  • special I am special
  • plain

We can see that "pressed" is appended to the first list item each time it is clicked, but it is not appended to any of the list items created by our clicks. On the other hand, the created buttons are able to generate further list items because that function is being rebound.

However, what we've just done produces unwelcome results if we click on a button more than once. The click handler is bound again with each click of a button, producing a multiplier effect. The first click of a button creates one extra list item; the second creates two; the third, four; and so on.

Unbind, then Bind

To avoid the multiple binding, we can unbind first and then re-bind. So in line 2, instead of this ...
$('#list5 li.special button').click(function() {

... we'll have this ...
$('#list6 li.special button').unbind('click').bind('click', function() {

Note the use of .bind() here. This is the universal event binder that jQuery uses. All the others, such as .click(), .blur(), .resize(), and so on, are shorthand methods for their .bind('event') equivalent.

The complete new code, again with the additional non-rebinding click handler for contrast, looks like this:

PLAIN TEXT
JavaScript:
  1. function addItemUnbind() {
  2.   $('#list6 li.special button')
  3.     .unbind('click')
  4.     .bind('click', function() {
  5.       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  6.       $(this).parent().after($newLi);
  7.       addItemUnbind();
  8.   });
  9. }
  10. $(document).ready(function() {
  11.   addItemUnbind();
  12.  
  13.   // non-rebinding click handler
  14.   $('#list6 li.special button').click(function() {
  15.     $(this).after(' pressed');
  16.   });
  17. });

See how this one works:

  • plain
  • special I am special
  • plain

Unfortunately, our attempt to unbind the addItemUnbind() function went too far, unbinding the "non-rebinding" click handler as well, before it even had a chance to run once (it's evident because there is no "pressed" text after the "I am special" button here). Clearly, we're going to have to be more careful about what we're unbinding.

Event Namespacing

One way to avoid the over-reaching event unbinding is to apply a "namespace" to the click event for both binding and unbinding. So, instead of .bind('click') and .unbind('click), we'll have, for example, .bind('click.addit') and .unbind('click.addit). Here is one last code sample, which looks identical to the previous, except that it now has the namespaced event (and the list id is list7):

PLAIN TEXT
JavaScript:
  1. function addItemNS() {
  2.   $('#list7 li.special button')
  3.     .unbind('click.addit')
  4.     .bind('click.addit', function() {
  5.       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  6.       $(this).parent().after($newLi);
  7.       addItemNS();
  8.   });
  9. }
  10. $(document).ready(function() {
  11.   addItemNS();
  12.  
  13.   // non-rebinding click handler
  14.   $('#list7 li.special button').click(function() {
  15.     $(this).after(' pressed');
  16.   });
  17. });

We should now — finally! — have a set of behaviors attached to these buttons that act the way we intend them to:

  • plain
  • special I am special
  • plain

For more information about event namespacing, read Brandon Aaron's article, Namespace Your Events.

Bonus: Unbind by Function Reference

If you've made it this far, then you must have extraordinary patience, in which case I'll reward it with one final method of rebinding. Rather than namespace the events, we can reference the function in the second argument of the .bind() and .unbind() methods. We have to shuffle things around a bit to avoid "too much recursion," but it'll do just fine like so:

PLAIN TEXT
JavaScript:
  1. function addItemFinal() {
  2.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  3.     $(this).parent().after($newLi);
  4.     $('#list8 li.special button')
  5.       .unbind('click', addItemFinal)
  6.       .bind('click', addItemFinal);
  7. }
  8.  
  9. $(document).ready(function() {
  10. $('#list8 li.special button').bind('click', addItemFinal);
  11.  
  12.   // non-rebinding click handler
  13.   $('#list8 li.special button').click(function() {
  14.     $(this).after(' pressed');
  15.   });
  16. });

Note here that there are no parentheses after "addItemFinal" when it appears inside the bind/unbind, because we are referencing the function, not calling it. So let's test it out one last time:

  • plain
  • special I am special
  • plain

Plugin Options

There are three great plugins that can do a lot of this work for us:

If this entry left you bewildered, or if you want a quick, well tested solution, you should definitely try one of them. Each works a little differently, but they're all super plugins.

jQuery: Learning jQuery

Using Low Pro for jQuery

Recently I have been getting a real buzz out of developing with jQuery. I've been using the library since 2006, releasing sporadic bits of code. In April of this year, I released the third revision of my most complex plugin, jMaps, and updated several other plugins, which are available in my mercurial repository.

This was also the same month I discovered a new plugin which has dramatically changed how I develop applications with jQuery. The plugin in question is Dan Webb's Low Pro for jQuery, a port of the plugin of the same name for Prototype.

What is Low Pro?

So what is Low Pro? It's a plugin that provides a way of making more object-oriented JavaScript through event delegation. jQuery's plugin architecture provides a really simple way of extending the core functionality, but there is no easy way of making macros of code that do several types of events on one element. Until now!

Probably the simplest way to explain how Low Pro works is to build a quick demonstration. Sometimes I find that too many tutorials out there expect prior knowledge, so with that in mind, I will try to make the tutorial as simple as possible. However, this example does use another couple of plugins that are outside the scope of this tutorial:

  • Live Query - Low Pro uses this plugin to make binding to dynamic elements in the DOM easier.
  • jQuery Validation - We'll use this plugin to show how we can bind other plugin functions to events.

Both these plugins already have excellent documentation, so if you wish to extend this example, please check them out.

Example 1: Creating a re-usable registration form

For this example we'll build a simple user registration form. This is something that is common enough on the web, but a nice advantage of this example is that it
can be used over and over again with little or no modification. Hopefully once you have learned this pattern, you will be able to see lots
of other applications that can be reused over and over again in the same fashion.

Our first step is to create our basic form:

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.   "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <title>Lowpro Example</title>
  7.     <script type="text/javascript" src="js/jquery.js" /></script>
  8.     <script type="text/javascript" src="js/jquery.livequery.js" /></script>
  9.     <script type="text/javascript" src="js/lowpro.jquery.js" /></script>
  10.     <script type="text/javascript" src="js/jquery.validate.js" /></script>
  11.     <script type="text/javascript" src="js/reg-form.js" /></script>
  12.   </head>
  13.   <body>
  14.     <div id="form-container">