Taxonomy

jQuery fun with lists and more lists

jeremy — Sat, 22 Mar 2008 01:23:00 -0600

Subtitle

jQuery - So simple even a designer can do it!

Article Body

This week I had the task of taking a rather long and complicated list and shortening it down into categories with sub lists. jQuery seemed like the best way to go as I've seen accordion style sliding list and things of that sort before. The only thing I hadn't come across was a list with a drop down menu which controlled the list and content below...so I set out to build one as well as teach myself some jQuery (I knew what it was, just never wrote my own jQuery code before).

So the idea here was I wanted a list to appear on the right side of my div which contained categories in which I could click on and have the content on the page, in lists, expand to show the selected list all while sliding away the previously displayed list.

This screenshot/mockup will help better explain the desired look and feel as well as functionality I was going for.

Sounds quite tricky but after a bit of messing around with some basic jQuery code and functionality I was able to get everything working somewhat well.

I first started out by building the header area with the "MOST RECENT" list and "SORT BY CATEGORY" text. I made it so when you click on the "MOST RECENT" link it would drop down a menu with the category listings. These category listings control what is shown on the page, it controls what list will appear when you click on your desired category.

So once I got the header portion built, I then begin making a list wrapped in custom divs for each of the category lists' content. Being that I have five categories I had to make 5 custom wrapped divs. For these divs were controlled by the category drop down list on right.

References

jQuery Tutorials for Designers

Visual jQuery 1.1

6 Tips: In the Know

fredric — Thu, 24 Jan 2008 22:47:18 -0700

Subtitle

So how do I stay 'in the know' and increase my Drupaliness?

Article Body

I'll go ahead and warn the readers that this article won't have any fancy code snippets or super dark magic to turn your site into ten billion dollars of reoccurring ad revenue. What it WILL do is give you some great pointers in ramping up your Drupal knowledge as you begin to take over the world...one Drupal site at a time.

Muahahahahahaha....but I digress.

1.) Stay on the channels

While you probably need some clout to get anything answered or explained in #drupal, #drupal-support is where the n00bies flock...and flock often. Although I wouldn't consider myself any type of <air quote> expert </air quote>, I can say that I have learned a lot by seeing some of the questions float through the channel. If you've got something interesting to add, be sure to speak up and give your support. The Open Source world is live and let live, so if you're on, say hi! I'm caramelson, btw.

Other channels to check out are #drupal-dojo and #drupal-themes (for the themers in the house).

Note: For those that don't know what I mean by <air quote>channels</ air quote>, I'm talking about IRC.

2.) Groups

Drupal groups is a cool thing. I've played with other CMS platforms before (Plone, Wordpress), and I can say that groups.drupal.org is a great bonus to this particular CMS community! You can find discussions tailored to just about anything. From local meetups to other Drupalers looking to make the next Facebook, you learn a lot from the ideas being tossed around. Some of the n00bie groups include Drupal Dojo and Drupal for Evil (semi-n00bie), and often have neat websites that have a host of tutorials, screencasts, and podcasts.

3.) Lullabot

References

Google Maps/Amazon/Banned Books Mashup - Part 2

justin — Mon, 07 Jan 2008 08:49:50 -0700

Subtitle

Geocoding with Google Maps API

Article Body

When we last heard from Our Hero, we’d begun the joyous process of creating a simple Google Maps/Amazon mashup. We took a peek at what the finished product should look like, we obtained our Google Maps API key, and we created our database tables and populated them with some data. All good things.

We also talked about geocoding, that process of converting a street address into the coordinates (longitude and latitude) that Google Maps digs. Our LOCATIONS table has some street addresses and empty columns just hankerin’ for some longitude and latitude info. Let’s do us some geocodin’.
This zip file contains the source for all the codin' we're doing today:

http://www.nerdliness.com/files/updatelnglat.zip

You'll need those files to follow along at home. While I'll break 'em down pretty much completely in the paragraphs to follow, I won't be reposting them in their entirety. If you try to just copy-and-paste from the text below, you'll be sadly disappointed when your efforts blow up because of a missing variable declaration, etc.

References

Google Maps API

Google Maps API: GGeoStatusCode

Google Maps API: GClientGeocoder Class

Google Maps API: Geocode Structure

Creating a Google Maps/Amazon.com/Banned Books Mashup

justin — Thu, 27 Dec 2007 15:20:27 -0700

Subtitle

Part One of God Only Knows How Many Steps...

Article Body

And now for something completely different…

Sorry to disappoint all the little nerdlings who come around here only for the Drupal goods, but today’s post won’t be at all related to our favorite CMS. We’ve talked about different Drupaly topics for weeks, now it’s time to shake things up a little. Today, kids, we’re going to make a basic Google Maps mashup.

Yeah, I know. The world needs another Google Maps mashup like I need a hole in my head, right? Who cares. They’re fun, and we’ll try to make our sample a little more interesting by throwing in a little Amazon.com action and some AJAX-y goodness.

So here’s what we’re shooting for:

http://www.nerdliness.com/ajaxdemo/

First of all, don’t laugh. Jeremy’s the form guy, I only do function. Sure, it ain’t much to look at, but it works and it’s kinda cool. And if we wanted it to look nice, we’d pay Jeremy his surprisingly reasonable freelance rate to pretty it up for us.

Ok, so what’s the big deal? What are we doing on that page? In a nutshell, we’re plotting, on the fly, the locations of every public school in Texas that, according to the ACLU of Texas, banned a book during 2006. I took the data from a PDF they release annually (http://www.aclutx.org/projects/bannedbookspg.php?pid=45) and used it to populate a MySQL table with the various data you see by clicking on the assorted links.

References

Google Maps API key Signup

Amazon.com Associates Signup

ACLU of Texas

We Screw Up So You Don't Have to...

justin — Thu, 06 Sep 2007 16:48:37 -0600

Subtitle

Three Basic Things You Can Do To Avoid Big SQL Mistakes

Article Body

We screw up so you don't have to...

My first job was at a local grocery store, cleaning the meat department after their bloody day of cutting, grinding, and packaging was complete. Not for the squimish, certainly, but nothing too difficult. After a couple of days on the job, I had everything down to a science and would usually be out the door within a couple of hours.

Part of that daily process involved cleaning out the deep fryer used by the in-store deli. You emptied the grease into a machine that filtered out all the day's crap, cleaned the fryer from top to bottom, then pumped the filtered grease back in. To get the grease out, you'd unscrew a bolt on the bottom just like you might when changing the oil in your car. All pretty straight-forward.

When they trained me, they warned me that some day I'd forget to put that plug back into the bottom of the fryer before pumping the grease in. I laughed. Who would be so stupid? I'm a freakin' Mensan, I think I can remember unplug, clean, plug, fill.

Since you're smart enough to read Nerdliness.com, I'm guessing you're smart enough to figure out what happened next. Couple weeks later, I forgot to put that damn plug back in before flipping on the pump. Turned my back on the machine to continue working on something else for a few minutes before I noticed that several gallons of grease were covering the meat department floor. Not good times.

Which, of course, leads us to... databases. Stick with me, it'll make sense in a minute.