Archive for the ‘Javascript’ Category

A Simple jQuery Photo Gallery

Thursday, December 29th, 2011
A Simple jQuery Photo Gallery

Simple is best

I haven’t done anything on jQuery in a while, so I thought I would write about another simple photo gallery I had to write. Nothing complicated, and easy to add to or edit. I’m basically writing some jQuery to automatically write the large image source attribute, and the thumbnail’s CSS background property, then throwing in some simple effects. For those of you that are just learning jQuery, you will hopefully learn something and be able to modify this little script to suit your needs. So lets get started. Take a look at the demo first though, so you can see what is going on.

View Demo
(more…)

jQuery Mobile Review

Thursday, July 28th, 2011
jQuery Mobile Review

Great things come in small packages

A project I’m working on had me looking into how to create a nice looking mobile site. Two very popular frameworks came to mind: jQuery Mobile, and Sencha Touch. The back-end guy I’m working with on this project recommended Sencha Touch, so I took a look at that first. Let me just say that if you haven’t worked with Ext.js and it’s panel component, or are not even familiar with that library, you are going to have one hell of a time. It is not all that easy to use, and the limited amount of tutorials on how to use it suck beyond belief. After a couple of hours fiddling with it, I decided to say screw it, and went over to jQuery Mobile. The difference? I got a site up and running in roughly a half hour with no problems themeing. jQuery Mobile wins in ease of use hands down.

This isn’t to say that Sencha Touch is bad, because it sure looks good, but it isn’t as intuitive as Mobile. This isn’t really about Touch though…it’s about Mobile. So let’s get into it!

jQuery Mobile logo

(more…)

How to Build a Horizontal jQuery Accordion

Thursday, July 21st, 2011
How to Build a Horizontal jQuery Accordion

Sliders, accordions oh my!

If you search for jQuery slider, you will find tons of posts and articles on how to do so. There are plenty of ways of building one, and I haven’t really seen any two that were exactly the same. Hell, even I wrote on how to build a jQuery slider, using the slider on this blog as an example. You know what is quite difficult to find though? Tutorials on horizontal accordions. I had a hell of a time figuring out how, because most of the articles are about using a plugin. Which, if you have read any of my posts in the past, you will know that I like to do things myself most of the time. I only found one that was super helpful, and it was buried a few pages in. The only problem is that it was using an unordered list, and I needed it to use divs. Luckily for me it was easy to change, and if you care to view the original tutorial over at Design Chemical (written by a guy named Lee I believe), please do so and tell him he rocks. Take a look at the demo first so you can see what the end result looks like.

View Demo

(more…)

Tutorial On Using setInterval To Make A jQuery Rotator

Thursday, April 21st, 2011
Tutorial On Using setInterval To Make A jQuery Rotator

A combination of things

I was tasked last week with building…well, I don’t know what the hell to call it, but at work we named it “the wheel.” Basically, it is a circle with a bunch of gray icons around it. I needed to get them to change to blue, show a larger graphic with additional content, and change to the next icon after a certain amount of time. When one of the icons is clicked though, the animation has to stop, and show whatever content goes with that icon. I used setInterval to accomplish the rotation through the icons, and pretty much the same jQuery I used on the Portfolio Content Gallery I wrote about. You’ll get a better idea of what I am talking about if you see it. I sped up the rotation so you don’t have to wait as long.

View Demo

I’m still learning Javascript/jQuery, and I have never used setInterval before, so this was a lesson for me as well. Turns out it is actually pretty easy, but I thought I would show you how to accomplish this so you don’t have to do any ridiculous searches like I did.

(more…)

jQuery Portfolio Content Gallery

Friday, April 1st, 2011
jQuery Portfolio Content Gallery

Been very busy

Portfolio imageFirst, apologies to my subscribers for not writing a lot recently, but I have been working some overtime, and redesigning my website’s interior pages. But I was working on my portfolio page and thought I would share what I have done. All in all, it is not overly complicated, but I like that it is clean and simple. You’ll also get to see the beginnings of my redesign of my interior pages (just keep in mind that it is not finished yet). Take a look at my new portfolio page so far:

View Demo
(more…)