Enhancing with jQuery

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

Hello there! If you are new to Websites for Small Biz, you might want to subscribe to the RSS feed for updates on this topic. You can also join us on Facebook.

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:

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% [?]