Category: jQuery

Enhancing with jQuery

By Leora Wenger, February 8, 2010 10:40 am

Every day people are tweeting links on Twitter with jQuery tips (see how do I learn jQuery). If you want to see, go to Twitter search and type “#jQuery” or “jquery”. Recently Kevin of Queness posted Create a Fast and Simple Toggle View Content with jQuery. At quick glance it looked good; in fact, it looked like a tutorial that might enhance my old Services page. So, as one does with hair salon makeovers, here is the before:
Services for Large and Small Websites page
If you click on it, you can see the after, how I redid the page with the jQuery tutorial.

As with many links I find, I don’t have time immediately to implement the tutorial. So I save the links I like to Delicious, a social bookmarking site. See my Delicious bookmarks here. Another place you can save favorite links for later perusal is StumbleUpon.

One of the reasons why I liked the idea of switching from the previous way I had set up the page is the new version is much easier to edit. The original way I set up the page, way back in about 2001, was with separate HTML files for each page. That method, if you have ever tried it, is a real pain to edit. Every time you make changes to one page, you have to update all the others. Then about two years ago I redid the page in PHP; better, because now I only had one page to edit, but one had to remember where everything was on the page and search if one wanted to do edits. With Kevin’s jQuery plugin, I am editing simple unordered lists – here is a sample piece of the code:

<ul id=”toggle-view”>
     <li>
      <h3> <img src=”../images/bullet/blue_square.gif” width=”10″ height=”10″ border=”0″ alt=”square”> Create a one to five page website.</h3>

     <span>+ </span>
<p>Work with Leora to create a site of just a few pages. She can help
with registering a domain name, setting up a hosting service, and setting up email with your company’s name.

You provide the text and work together with Leora to select the graphics and page layout. The site will be search-engine ready! If you want to update the site yourself, it can be set up in WordPress. Small sites are available for a flat fee.</p>
      </li>
      <li> … etc. …

And here is how the page looks now:
services page after jquery applied

Just to be sure it looked OK in IE6, because despite web developers and designers disliking the rendering abilities of IE6 many people still use that browser, I checked the new Services page with IE NetRenderer. It looked just fine.

Popularity: 4% [?]

6 Ways to Learn jQuery

By Leora Wenger, October 26, 2009 4:32 pm

You can implement jQuery plugins without really learning jQuery, but to get full use of this powerful client-side library, try these six suggestions to get started in your jQuery education:


1

Follow the tutorials on jQuery site. The list is quite extensive, seems to get updated, and includes events, Ajax, images, CSS and plugin development.


2

Learning jQuery: http://www.learningjquery.com/
This is a site dedicated to teaching jQuery, from beginner to advanced. One can keep up with the site by subscribing to the RSS feed.


3

bibeault_coverRead jQuery in Action by Bear Bibeault And Yehuda Katz
The book teaches important jQuery concepts such as the document ready handler, utility functions, filters and wrapped sets, understanding events and chaining.
Read a review of this book.


4

learningjQuery Read Learning jQuery 1.3 by Jonathan Chaffer and Karl Swedberg
This book is packed with examples of jQuery such as column highlighting, an image carousel, and enhanced forms. You will learn about the journey of an event and inserting new elements. There is a nice section in the back of sample plugins.

 

5

Follow this tutorial: jQuery for Absolute Beginners: The Complete Series – as the series is labeled, it really is for beginners. So if you are an experienced programmer, you may want to delve into the jQuery in Action book instead to learn how jQuery is unique.


6

Take a jQuery plugin and modify one or two parts of it.
Many of the jQuery posts on the web are lists of plugins that you can implement on a site without knowing much jQuery. To learn more, so you can write your own useful code, take an example from one of these posts and modify it slightly:

If you have your own suggestion for learning jQuery, feel free to leave your method in the comments.

Popularity: 3% [?]