I’ve noticed that there’s been a lot of new visitors reaching my site through searches for jQuery. Unfortunately I’m no jQuery expert. I’ve been using it to some success, but I’m still figuring out all its variables. Regardless, I learned all this by doing what you all are doing - searching. So I figured since I’ve accumulated a reasonable amount of links and tutorials that I should give back. There are great tutorial sites out there, but sometimes seeing something implemented within an active site and not a demo provides more insight. Plus, I’ve encountered numerous problems leading to solutions which might help as well.

What jQuery Scripts is Artboredom using?

This site is the dictionary definition of the word “sandbox”. I’m deploying all different types of scripts many times regardless of their UI effectiveness. I want to see what they’re capable of before going live on a client’s site and livelihood. In addition, I want to see where they work and where they don’t. For this post I’m just going to run down the list of what’s active and what I’ve tried here on Artboredom.

jQuery Main Content Gallery Slider/Glider

From a website called LavaBlast. They use it on their home page and were cool enough to put together a tutorial on how to build it. Don’t let all the ASP.NET talk freak you out. Take a look at their simple demo sans content and that’s all you need!

prettyPhoto jQuery Lightbox Clone

Just like the way this one feels. There are a ton of these out there that all have great features and benefits, this one simply stuck with me. Take a look at prettyPhoto.

jQuery Slide Panel

I tried so many versions of these that I can’t remember what I ended up deploying in my portfolio page. I recently tried to add some dynamic elements to my menu area but it conflicted too much with the glider (z-index battle and bugs). So I went through my bookmarks and pulled out one that I remember liking for its simplicity. You can find this at Web Designer Wall which is a fantastic website which you should bookmark if you already haven’t.

Coda-like jQuery Tooltip

Another area inundated with examples. For some of my client sites I’ve used MooTools for my tooltips. For the longest time there weren’t any elegant jQuery tips (or at least I couldn’t find them). And by elegant, I mean good! The basic MooTools version had a nice fade-in and fade-out effect that most of the jQuery versions did not.

I’ve been intrigued by what Panic used on the Coda website though. It’s not as dynamic as a pointer-following tooltip, but sometimes a little understatement is nice. Especially when you have other dynamic elements moving on the same page. Unfortunately many that have been created are dependent on being contained in unordered lists. Most things I want a tooltip on aren’t lists! That’s where this little guy comes in from Digital Vision’s website. I haven’t tried it just yet, but the deployment looks absolutely simple. Here’s the demo.

What I’m Trying Next

In the coming days (!?) I’m honestly going to try and post some more links that I’ve found incredibly helpful in my progression. I’ll also post some of my favorite Tweeple from Twitter who are constantly throwing out great content for web design in general.

Thanks for stopping by and forgive me if you arrive and divs are flying everywhere and dynamic content isn’t so dynamic. Hopefully I’m getting something out of that FAIL you’ve witnessed!