Starting jQuery notes

Before starting

General comments. I have created some custom JavaScript using the jQuery library. This web page illustrates some of its use. I found jQuery to be fairly easy to learn and to use, as claimed. I believe a number of books are available, including an O'Reilly book on the subject. It appears to be a big topic and my discussions here are probably just introductory. But my initial experience with it is very positive.

Link modifications

The first use of this custom JavaScript is to make some modifications to the links on a web page. I created a JavaScript routine to modify all of the links that point outside of this site so that 1 (optionally) they contain an image indicating you are going out of site; 2 they have a popup title giving the URL where the link points to; 3 the destination URL will open in a new window if the link is clicked. You should see this effect in the above "jQuery" link.

The "link modifications" are done automatically by just including the JavaScript file, and require no other web page insertions.

Collapsing sections

A second application is to be able to expand and collapse a section by clicking on it. Clicking on the text followed by the "..." expands the section, and clicking on the section itself will collapse it into its smaller form.

Another example of using collapsing sections is found in this post, done a while back.

To use collapsing sections, as in this post, it is necessary to put some JavaScript in the web page itself. It is also necessary to put in <span> and <div> elements with unique id tags. These go around the "title" area and the "expand area". To see this in greater detail, look at the source html for this post. In general it takes some work to set up a document as seen here.

There are three collapsing section techniques that I have developed.

• Method one allows sections to be collapsed by clicking on the header. When this is done the header collapses and the section to display is shown. When this content section is clicked, it disappears, and the header again appears. Clicking the freeze button will prevent collapses from occurring, and this is done for the whole web page displayed. Clicking the toggle button will expand or collapse all sections on the web page. This technique is not illustrated in this post.
• Method two is like method one except that the toggling and the collapsing is specified for only certain specified elements. Thus you can freeze and expand/collapse only those items in a given area (such as a post) rather than the whole web page. The first two methods allow for any section to be initially opened or collapsed.
• Method three is a technique that allows you to put collapsing sections into collapsing sections. When the title is clicked, its content expands, and when the title is clicked again, the content disappears. The title always remains. At the moment the "freeze" and "toggle" buttons do not apply to this technique. With this technique the default is that all sections are initially collapsed. This can be overridden on a per collapsing section basis, but it takes more work.

This post uses methods 2 and 3 above. Generally one would not use a hybrid technique, such as here, unless to make a point, as I am doing. Method 1 is illustrated in this post.

I use raw HTML mode in word press to paste in the JavaScript.

When programming JavaScript, it is handy to have a manual nearby. Here are some online manual references: 1, 2, 3, 4, 5, *6, 7.

The custom solution created here works quite nicely and accomplishes the objectives that I wanted to achieve. Many other effects other than what I am using here are also possible. I wanted to get some "hands on", and my general reaction is quite favorable. This is an excellent library!

It might have been easier to use the "accordion" feature of the UI library. But I wanted to try out some of the programming for myself. It works great.

Here is a one hour YouTube video on advanced JQuery given by a 12 year old. I learned a lot watching this. This is one of the more inspiring videos I have seen in a while. If you want something simpler, try this simpler introduction.

Although this may be good jQuery, I can criticize my posting methodology in that both this post and the custom jQuery have been updated too often. Generally I am too anxious to "get stuff out". The minute after I put out a new version, I think of another thing.

This JavaScript is not free software but I will give a complimentary no-cost copy to people if they ask. If you want to use these techniques that I use here you can just ask. Note that there is no documentation, and free consulting does not come with this offer.

I point out that a large set of plug-ins are available and you may want to check out free and documented stuff before you try me. There is probably a better solution than what I created here.

The solution here should really be wrapped into a plug in. If I get time, I may work on this.

There are a few small bugs, either in my programming, the browser, or the JQuery.

This technique is still evolving and is likely to change in the future.