Oooh, Shiny..

UPDATE 5/24/12: This specific widget is no longer being used on my new template, though I am working on something similar.

I had some crazy idea earlier this week on something I wanted to develop for the site. I thought, what if people were able to hover over links that I have to my family tree section and get some basic information on that person without ever having to leave the post? Well, it went from idea to (almost) finished product in about 3 days. I know it’s not a perfect implementation and I plan on tweaking it to make it work better and more efficient.

So, now if you hover over a name on my posts that link to a person’s information page, like for example, Richard ZALEWSKI, it will show you basic information about my grandfather in a tooltip. If you want the full details, you can still click on the link and go to the family tree page. This only works on individuals right now and not family group sheets, but I don’t link to them that often.

I’ve tested the implementation in most of the major browsers including Internet Explorer 8, Mozilla Firefox 3.6, and Google Chrome 5. I’m pretty sure it works in just about everything as long as you have Javascript enabled, according to the tooltip code I used.

Let me know how you like it and if it’s too annoying or clunky. Constructive criticism is good so I can fix issues with it. So, you’re my beta testers! Enjoy.

For the technical mumbo-jumbo for all you geeks or if anyone is interested, keep reading.

For anyone interested in what I used to make this, or what is required if and when I give out the code, here it is.

The 4 main components that you need for this implementation are:

  • The Next Generation of Genealogy Sitebuilding (v7) - The software that my family tree is running on and the database layout that the script is expecting.
  • jQuery – The wonderful and amazing Javascript framework that is used for all of the tricky Javascript and tooltip work.
  • qTip – A jQuery plugin that makes creating and working with the tooltips a breeze.
  • CodeIgniter – The PHP framework I used to do all of the database heavy-lifting. This is just the option I found and used, but I may use another option in the future to make this script/addon easier to give out.

WordPress is not required, nor is any other blog software. You could run this on any page as long as the above four items are available, at this point.

In a nutshell, what this script does is it checks for all of the links on my site that include the “getperson.php” file in them. This is the file that shows an individual’s detailed info. When it sees you hover over one of these links, it grabs the person’s ID and runs it through the database grabbing all of the relevant information. Then it puts all of this info into the little tooltip that is created by qTip. In reality, there is more to it, but that’s how it works from a mile-high view.

I’m sorta proud of this little script I built, mainly because I wanted to do it and I did it. It’s probably not very clean or efficient, but I’ll get to it.

About Brian Zalewski

I started genealogy research about mid-1999. My grandfather had passed away in April of that year. Since then I’ve done a lot of research not only for myself, but for friends and other relatives. In 2006, I married the love of my life, Darcy, and welcomed the birth of our daughter, Aerissa Jean, in 2010 and our son, Xander Lee, in 2012. I can’t wait to tell them stories about all of their ancestors.

Additional Resources

A Featured Post

Thanks Google Books!

After getting more interested in the military history of my family tree due to the talks and searches I did on Saturday, I decided to try some other options. I usually don’t do a lot of searching on Google for family members, since I usually get a lot more misses than hits. I tried to […]

Comments

  1. I *love* jquery. Count me impressed! But it doesn’t just look cool — it’s useful and relevant too.

  2. Brian says:

    Yeah, that was part of my idea. I didn’t just want to do something with jQuery because I could. I wanted it to be somewhat useful, too. Thanks.brianjz

  3. Taneya says:

    how cool! I would be interested in using this if you were to decide to share the code! I use WordPress, so it would be even cooler if you made it a WP-plugin. I hope that you will consider sharing.taneya

  4. Brian says:

    Unfortunately, I’m not sure if I could make it an “official” WP plugin since it doesn’t touch the WP stuff. It mainly requires the TNG software. I just happen to be using it on WP, but it will technically work anywhere and doesn’t need WP.

    Plus, the backed code framework I used wouldn’t easily package into a plugin, which is why I plan to find another way to do it. But, it’s definitely on my radar. Thanks!brianjz