Starting jQuery notes

I am a bit slow in "catching onto" some things, but I have just learned about jQuery. This has been out around 2 years. This short post contains a few thoughts on my initial experiences with it. And it contains some starting examples illustrating the use of jQuery. There is some associated discussion.

Read more

Freeze | toggle

More discussion is given in the sections below.

Before starting

This illustrates a collapsing section in a collapsing section.

This document (post) is a little mixed up. It illustrates more than one technique for collapsing sections, and also illustrates the link modification technique. More discussion is in the following sections.

This is a little bit of a show off post. Isn't it cute? It illustrates several techniques all in one post.

General comments ...

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 ...

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 ...

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.

More discussion ...

""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.

Summary

Summary. Although I spent a good amount of time achieving the desired effects discussed above, it is still much easier than the older approach involving using DOM directly. The jQuery library abstracts this nicely and makes the programming task much easier.

The "old fashioned" DOM approach in which callback functions are placed in tags as attributes is just that: really old fashioned. This is maybe why more object-oriented programmers have not used it. On the other hand, JQuery makes use of modern object-oriented design pattern concepts in its use of chaining (with the this pointer), event propagation chains (returning nil or not), the invocation of its functions in object style (using dotted function calls on jQuery objects), and in its other features. So a person who likes object-orientation is comfortable with jQuery. And JavaScript, in which it is programmed, is actually one of the fanciest object oriented (and functional) languages around. JQuery objectifies the older approach in a way that is easy and yet elegant. It has been a while since I have run into any serious programming and programmers, and it is refreshing that people still care about it and are keeping this wonderful art alive.

Update 3

Leave a Reply